/*
Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact
*/

/*var upload1='Make sure the pictures are JPG formatted and that the pictures do not exceed 2MB in size.  Hover on the pictures to find the exact width and height required by your website template.  Although your pictures will automatically be formatted to the right size, you may want to crop the pictures yourself or at least provide pictures with matching proportions for best results. For more help, please click the MORE HELP button located on the upper right corner.';
var upload2='NOTE: If you would like to make changes to your text after saving it, please make sure to click "EDIT" before continuing your work or the text WILL NOT be properly saved.  REMINDER: Make sure to upload your pictures separately from your text inputs.';
var upload3='NOTE:The text areas are all exaclty sized and shaped according to your website template, therefore your text will appear on your website exactly as they do here.  Save EACH entry separately before selecting the next entry otherwise your text WILL NOT be properly saved. We suggest that you write your text before formatting it! REMINDER: Make sure to upload your pictures separately from your text inputs.';*/

//text for help_info.js
var upload1='アップロードが可能な画像ファイルは最大2MB までのJPG形式のみです。<br /><span class="dash2">.</span>テンプレートの画像の寸法は、それぞれのサムネイル画面（小さな画面）にマウスのポイントを当てると表示されます。<br /><span class="dash2">.</span>画像は自動的にテンプレートの枠のサイズに拡大・縮小されます。写真の一部分だけ（人物だけなど）をアップロードしたい場合はまず画像のクロップ（余分な部分の切り落とし）をして下さい。<br /><span class="dash2">.</span>各画像のアイコンをダブルクリックすると、クロップ機能画面に移動します。画像のクロップの方法は右上の「MORE HELP」をクリックするとご覧になれます。';
var upload2='注:保存完了後変更する場合は、編集をクリックしてから作業を行って変更を保存して下さい。（編集をクリックせずに行った変更は保存されません。） ';
var upload3='注:テキストはそれぞれのテキストボックスに入力後、必ずその都度、保存を行って下さい。又先にテキストを書いてからフォントのサイズや色等の選択をすることをお勧めします。編集ページのテキストボックスは実際のウェブサイトで表示されるものと全く同じサイズです。';

var offsetfrommouse=[0,-25]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.

var defaultimageheight = 40;	// maximum image size.
var defaultimagewidth = 40;	// maximum image size.


function gettrailobj(){
if (document.getElementById)
return document.getElementById("help").style
}

function gettrailobjnostyle(){
if (document.getElementById)
return document.getElementById("help")
}


function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


function hide_help(){	
	gettrailobj().display= "none";
	document.onmousemove=""
	gettrailobj().left="-500px"
}

function show_help(text,title,width,height){
    var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth - offsetfrommouse[0]
	var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)

	if( (navigator.userAgent.indexOf("Konqueror")==-1  || navigator.userAgent.indexOf("Firefox")!=-1 || (navigator.userAgent.indexOf("Opera")==-1 && navigator.appVersion.indexOf("MSIE")!=-1)) && (docwidth>200 && docheight>200)) {
		( width == 0 ) ? width = defaultimagewidth: '';
		( height == 0 ) ? height = defaultimageheight: '';
		defaultimagewidth = width;
	
		newHTML = '<div  class="help_section_material" style="width:'+width+'px; padding:3px;">';
		newHTML = newHTML + '<h2>' + ' '+title + '</h2>'
		
    	newHTML = newHTML + '<div>'+text+'</div>';
		newHTML = newHTML + '</div>'; 
		/*
		if(navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1 ){
			newHTML = newHTML+'<iframe src="about:blank" scrolling="no" frameborder="0" width="'+width+'" height="'+height+'"></iframe>';
		}	
		*/
		gettrailobjnostyle().innerHTML = newHTML;
	
		gettrailobj().display="block";
		height = gettrailobjnostyle().offsetHeight;	
		defaultimageheight = height;
		document.onmousemove=followmouse; 
	}
}
//this is for the image size balloons
function show_help1(text,title,width,height){
    var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth - offsetfrommouse[0]
	var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)

	if( (navigator.userAgent.indexOf("Konqueror")==-1  || navigator.userAgent.indexOf("Firefox")!=-1 || (navigator.userAgent.indexOf("Opera")==-1 && navigator.appVersion.indexOf("MSIE")!=-1)) && (docwidth>200 && docheight>200)) {
		( width == 0 ) ? width = defaultimagewidth: '';
		( height == 0 ) ? height = defaultimageheight: '';
		defaultimagewidth = width;
	
		newHTML = '<div  class="help_section_material" style="width:'+width+'px; padding:3px;">';
		newHTML = newHTML + '<h2>' + ' '+title + '</h2>'
		
    	newHTML = newHTML + '<div align="center">'+text+'</div>';
		newHTML = newHTML + '</div>'; 
		/*
		if(navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1 ){
			newHTML = newHTML+'<iframe src="about:blank" scrolling="no" frameborder="0" width="'+width+'" height="'+height+'"></iframe>';
		}	
		*/
		gettrailobjnostyle().innerHTML = newHTML;
	
		gettrailobj().display="block";
		height = gettrailobjnostyle().offsetHeight;	
		defaultimageheight = height;
		document.onmousemove=followmouse; 
	}
}

function followmouse(e){
	var xcoord=offsetfrommouse[0]
	var ycoord=offsetfrommouse[1]

	var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
	var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight);
	if (typeof e != "undefined"){
		if (docwidth - e.pageX < defaultimagewidth + 2*offsetfrommouse[0] + 30){
		//	alert('now');
			xcoord = e.pageX - 55 - defaultimagewidth; // Move to the left side of the cursor with a larger offset to go around the image
		} else {
		xcoord += e.pageX;
		}
		if (docheight - (e.pageY-truebody().scrollTop) < defaultimageheight + offsetfrommouse[1] ){
				ycoord = (e.pageY) - Math.abs(offsetfrommouse[1]) - defaultimageheight;
				if (e.pageY-truebody().scrollTop < Math.abs(offsetfrommouse[1]) + defaultimageheight) {
						var diff=(Math.abs(offsetfrommouse[1]) + defaultimageheight) - (e.pageY-truebody().scrollTop);
							ycoord+=diff;
					}
		} else {
			if (e.pageY-truebody().scrollTop < Math.abs(offsetfrommouse[1])) { //if the q but is on the top of the page
				ycoord = e.pageY;
			} else {
				ycoord += e.pageY;
			}
		}
	} else if (typeof window.event != "undefined"){

		if (docwidth - event.clientX < defaultimagewidth + 2*offsetfrommouse[0] +30){
			xcoord = event.clientX + truebody().scrollLeft - 50 - defaultimagewidth; // Move to the left side of the cursor
		} else {
			xcoord += truebody().scrollLeft+event.clientX
		}
		if (docheight - (event.clientY) < defaultimageheight + offsetfrommouse[1]){
			ycoord = event.clientY + truebody().scrollTop - Math.abs(offsetfrommouse[1]) - defaultimageheight;
							if (event.clientY < Math.abs(offsetfrommouse[1]) + defaultimageheight) {
						var diff=(Math.abs(offsetfrommouse[1]) + defaultimageheight) - (event.clientY);
							ycoord+=diff;
					}
		} else {
			
			if (event.clientY< Math.abs(offsetfrommouse[1])) { //if the q but is on the top of the page
				ycoord = truebody().scrollTop + event.clientY;
			} else {
				ycoord += event.clientY + truebody().scrollTop ;
			}
		}
	}
	gettrailobj().left=xcoord+"px"
	gettrailobj().top=ycoord+"px"

}