//ブラウザ判別定数
var agt = navigator.userAgent.toLowerCase();
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_gecko = (agt.indexOf('gecko') != -1);
var is_opera = (agt.indexOf("opera") != -1);

//要素のスタイル属性を取得
function getElementStyle(targetElm,IEStyleProp,CSSStyleProp) {
	var elem = targetElm;
	if (elem.currentStyle) {
		return elem.currentStyle[IEStyleProp];
	} else if (window.getComputedStyle) {
		var compStyle = window.getComputedStyle(elem,"");
		return compStyle.getPropertyValue(CSSStyleProp);
	}
}

//要素の絶対位置を取得
function getPosition(that) {
	var targetEle = that;	//thatは位置を取得したい要素Object
	var pos = new function(){ this.x = 0; this.y = 0; }
	while( targetEle ){
		pos.x += targetEle.offsetLeft; 
		pos.y += targetEle.offsetTop; 
		targetEle = targetEle.offsetParent;
			//IEの補正：上記計算で無視されてしまう各親要素のborder幅を加算
		if ((targetEle) && (is_ie)) {
			pos.x += (parseInt(getElementStyle(targetEle,"borderLeftWidth","border-left-width")) || 0);
			pos.y += (parseInt(getElementStyle(targetEle,"borderTopWidth","border-top-width")) || 0);
		}
	}
	//geckoの補正：カウントしないbody部border幅をマイナスしてしまうので２倍して加算
	if (is_gecko) {
		//以下の部分でbody部を取得し、borderの減算を補正する。
		var bd = document.getElementsByTagName("BODY")[0];//body部を取得
		pos.x += 2*(parseInt(getElementStyle(bd,"borderLeftWidth","border-left-width")) || 0);
		pos.y += 2*(parseInt(getElementStyle(bd,"borderTopWidth","border-top-width")) || 0);
	}
return pos;
}

function OpenColorVariation(divGoods,divPopup,event,ImgPath) {
	//他にポップアップが開いていない場合
	if (!Open && !Loading){
		var basList = document.getElementById('resultBlock');
		if(!divPopup) divPopup = document.getElementById('balloonNone');
		var StyleTop,StyleLeft
		
		var pos=getPosition(divGoods);
		var pos2=getPosition(basList);
		if(pos.x - pos2.x < 200) {
			StyleTop=pos.y - 40;
			StyleLeft=pos.x +100;
			divPopup.getElementsByTagName('div')[1].style.padding = "0 0 0 16px";
			divPopup.getElementsByTagName('div')[2].style.padding = "0 0 0 16px";
			divPopup.getElementsByTagName('div')[2].style.background = "url(/images/balloon-middle.gif) no-repeat left center" 
			divPopup.getElementsByTagName('div')[3].style.padding = "0 0 0 16px";
		} else {
			StyleTop=pos.y - 40;
			StyleLeft=pos.x -250;
			divPopup.getElementsByTagName('div')[1].style.padding = "0 16px 0 0";
			divPopup.getElementsByTagName('div')[2].style.padding = "0 16px 0 0";
			divPopup.getElementsByTagName('div')[2].style.background = "url(/images/balloon-middle2.gif) no-repeat left center" 
			divPopup.getElementsByTagName('div')[3].style.padding = "0 16px 0 0";
		}
		if((document.getElementById) && (!document.all)){
			divPopup.style.top=StyleTop  + 'px';
			divPopup.style.left=StyleLeft+ 'px';
			divPopup.style.visibility='visible';
		}else if(document.all){
			divPopup.style.pixelTop=StyleTop;
			divPopup.style.pixelLeft=StyleLeft;
			divPopup.style.visibility='visible';
		}
		Open = true;
	}
	divGoods.getElementsByTagName('img')[0].style.border = "1px solid #3366CC";
	OpenerDiv = divGoods;
}

function CloseColorVariation(divPopup,event,ImgPath) {
	if(!divPopup) divPopup = document.getElementById('balloonNone');
	// マウスが出て行った先を取得
	var r = event.relatedTarget || event.toElement;
	// マウスが出て行った先が商品ブロックとポップアップの外ならポップアップを閉じる
	if(r && !Contains(r,OpenerDiv) && !Contains(r,divPopup)){
		OpenerDiv.getElementsByTagName('img')[0].style.border = "1px solid #CCCCCC";
		var ImgList = OpenerDiv.getElementsByTagName('img')
		if(Open && !Loading) {
			with(divPopup.style){
				visibility = 'hidden';
			}
		}
		Open = false;
	}
}

function Contains (node, parentNode) {
	// node が parentNode の子孫かどうかを探索
	while (node && node != parentNode) node = node.parentNode;
	return Boolean (node);
}

//テキスト検索窓のデフォルト文字表示の制御
function setDefaultValue(id, text, color, options){
	var elem    = document.getElementById(id);
	var options = options || {};
	
	var onblur = function(){
		if(elem.value == ''){
			elem.value = text;
			elem.style.color = color
			if( typeof options.onblur == 'function'){
				options.onblur(elem);
			}
		}
	};
	var onfocus = function(){
		if(elem.value == text){
			elem.value = '';
			elem.style.color = '';
			if( typeof options.onfocus == 'function'){
				options.onfocus(elem);
			}
		}
	};
	
	onblur();
	elem.onblur  = onblur;
	elem.onfocus = onfocus;
}