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

Modified by Tim Kroeger (tim@breakmyzencart.com) for use with
image handler 2 and better cross browser functionality
*/
var offsetfrommouse=[10,10]; //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 currentimageheight = 400;	// maximum image size.
var padding=10; // padding must by larger than specified div padding in stylessheet

// Global variables for sizes of hoverimg
// Defined in "showtrail()", used in "followmouse()"
var zoomimg_w=0;
var zoomimg_h=0;

var threadFlag = false;
var threadObj = null;

if (document.getElementById || document.all){
  document.write('<div id="trailimageid">');
  document.write('</div>');
}
//alert('I love jiangying');
function getObj(name) {
  if (document.getElementById) {
  	  this.obj = document.getElementById(name);
    this.style = document.getElementById(name).style;
  } else if (document.all) {
    this.obj = document.all[name];
    this.style = document.all[name].style;
  } else if (document.layers) {
    this.obj = document.layers[name];
    this.style = document.layers[name];
  }
}


function gettrail(){
  return new getObj("trailimageid");
}

var currentImg = null;
var currentImgParentLink = "";

function setCursorHand(obj)
{
	currentImg = obj;
	currentImg.style.cursor='hand';
}

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

function showtrail(imagename,title,oriwidth,oriheight,zoomimgwidth,zoomimgheight, image, startx, starty, startw, starth,imgObj){
	try
	{
		if( XIXI.$(imgObj).parent().next().children(0)[0] !=null && XIXI.$(imgObj).parent().next().children(0)[0].tagName == "A")
		{
			currentImgParentLink = XIXI.$(imgObj).parent().next().children(0)[0].href;
			//alert(XIXI.$(imgObj).parent().next().children(0)[0].href);
		}else if(XIXI.$(imgObj).next()[0] !=null && XIXI.$(imgObj).next()[0].tagName == "A")
		{
			currentImgParentLink = XIXI.$(imgObj).next()[0].href;
		}else if(XIXI.$(imgObj).next().next()[0] !=null && XIXI.$(imgObj).next().next()[0].tagName == "A")
		{
			currentImgParentLink = XIXI.$(imgObj).next().next()[0].href;
		}else{}
	}catch(ex){}
	showtrailFun(imagename,title,oriwidth,oriheight,zoomimgwidth,zoomimgheight, image, startx, starty, startw, starth);
}



function showtrailFun(imagename,title,oriwidth,oriheight,zoomimgwidth,zoomimgheight, image, startx, starty, startw, starth)
{
	zoomimg_w=zoomimgwidth;
	zoomimg_h=zoomimgheight;
  if (zoomimgheight > 0){ currentimageheight = zoomimgheight; }
  trailobj = gettrail().obj;
  trailobj.style.width=(zoomimgwidth+(2*padding))+"px";
  trailobj.style.height=(zoomimgheight+(2*padding))+"px";
  trailobj.setAttribute("startx", startx);
  trailobj.setAttribute("starty", starty);
  trailobj.setAttribute("startw", startw);
  trailobj.setAttribute("starth", starth);
  trailobj.setAttribute("imagename", imagename);
  trailobj.setAttribute("imgtitle", title);
  followmouse();
  window.onscroll=onscrollFun;
}

function onscrollFun(){
	if(currentImg !=null)
	{
		try
		{															
	  	var   d   =   document.documentElement;
	  	var trailobj = gettrail().obj; 
	    //     首先取得页面现在的左上角相对位置   
	    var   x1   =   d.scrollLeft;   
	    var   y1   =   d.scrollTop;   
	    var   w1   =   d.clientWidth;   
	    var   h1   =   d.clientHeight;   
	      
	    //     取得浮动层的信息   
	    var   w   =   parseInt(trailobj.style.width);   
	    var   h   =   parseInt(trailobj.style.height);   
	    var   x   =   Math.ceil((w1   -   w)/2)   +   x1;   
	    var   y   =   Math.ceil((h1   -   h)/2)   +   y1;   
	      
	    //     设置位置
	    if(XIXI.$.browser.msie)
    	{
	    	trailobj.style.left   =   x;
	  		trailobj.style.top   =   y;
	  	}else
	  	{
	  		trailobj.style.left   =   (x) + "px";
	  		trailobj.style.top   =   y + "px";
	  	} 
	    
	  }catch(ex){}
	}
}




function hidetrail()
{
  //コメント
  if( currentImg != null )
  {
		currentImg.style.cursor='normal';
		currentImg = null
  }
  
	if(document.getElementById("#tipContainer_") != null)
  {
	   document.getElementById("monk").removeChild(document.getElementById("#tipContainer_"));
	}
}

function closetrail(){
	trailstyle = gettrail().style;
  trailstyle.visibility = "hidden";
  document.onmousemove = "";
  trailstyle.left = "-2000px";
  trailstyle.top = "-2000px";
}

function closetrailGotoProduct()
{
	trailstyle = gettrail().style;
  trailstyle.visibility = "hidden";
  document.onmousemove = "";
  trailstyle.left = "-2000px";
  trailstyle.top = "-2000px";
  if(currentImgParentLink != "")
  {
  	window.location.href = currentImgParentLink;
  }
}



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 (document.all){
  //	trail.obj.innerHTML = 'A = ' + truebody().scrollHeight + '<br>B = ' + truebody().clientHeight;
  //} else {
  //	trail.obj.innerHTML = 'C = ' + document.body.offsetHeight + '<br>D = ' + window.innerHeight;
  //}
  var relativeX = null;
  var relativeY = null;
  
	  if (typeof e != "undefined"){
	    if ((typeof e.layerX != "undefined") && (typeof e.layerY != "undefined")) {
	      relativeX = e.layerX;
	      relativeY = e.layerY;
	    } else if ((typeof e.x != "undefined") && (typeof e.y != "undefined")) {
	      relativeX = e.x;
	      relativeY = e.y;
	    }
	
	    if (docwidth - e.pageX < zoomimg_w + (3 * padding)) {
	      xcoord = e.pageX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
	    } else {
	      xcoord += e.pageX;
	    }
	    if (docheight - e.pageY < zoomimg_h + (2 * padding)){
	      ycoord += e.pageY - Math.max(0,(0 + zoomimg_h + (5 * padding) + e.pageY - docheight - truebody().scrollTop));
	    } else {
	      ycoord += e.pageY;
	    }
	  } else if (typeof window.event != "undefined"){
	    if ((typeof event.x != "undefined") && (typeof event.y != "undefined")) {
	      relativeX = event.x;
	      relativeY = event.y;
	    } else if ((typeof event.offsetX != "undefined") && (event.offsetY != "undefined")) {
	      relativeX = event.offsetX;
	      relativeY = event.offsetY;
	    }
	
	    if (docwidth - event.clientX < zoomimg_w + (3 * padding)) {
	      xcoord = event.clientX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
	    } else {
	      xcoord += truebody().scrollLeft+event.clientX;
	    }
	    if (docheight - event.clientY < zoomimg_h + (2 * padding)){
	      ycoord += event.clientY - Math.max(0,(0 + zoomimg_h + (5 * padding) + event.clientY - docheight - truebody().scrollTop));
	    } else {
	      ycoord += truebody().scrollTop + event.clientY;
	    }
	  }

	trail = gettrail();
  startx    = trail.obj.getAttribute("startx");
  starty    = trail.obj.getAttribute("starty");
  startw    = trail.obj.getAttribute("startw");
  starth    = trail.obj.getAttribute("starth");
  imagename = trail.obj.getAttribute("imagename");
  title     = trail.obj.getAttribute("imgtitle");

  // calculate and set position BEFORE switching to visible
  var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
  var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);
  if(ycoord < 0) { ycoord = ycoord*-1; }
  if ((trail.style.left == "-2000px") || (trail.style.left == "")) { trail.style.left=xcoord+"px"; }
  if ((trail.style.top == "-2000px") || (trail.style.top == "")) { trail.style.top=ycoord+"px"; }
 
 // trail.style.left = xcoord + "px";
//	trail.style.top  = ycoord + "px";
  var gLeft = null;
  var gTop = null;
  gLeft = (document.body.offsetWidth - (docwidth /2)) / 4;
  gTop = (document.body.offsetHeight - (docheight /2)) /8;
  
  //trail.style.left=((document.body.offsetWidth - docwidth) /2)+"px";
  //trail.style.top=((document.body.offsetHeight - docheight) /2)+"px";
  
  gLeft +=document.documentElement.scrollLeft;
  gTop +=document.documentElement.scrollTop;
  
  trail.style.left = gLeft + "px";
	trail.style.top  = gTop + "px";
//	alert (trail.style.left+","+trail.style.top);
	//trail.style.left="300px";
  //trail.style.top="600px";
  
	
  
  if (trail.style.visibility != "visible") {
    if (((relativeX == null) || (relativeY == null)) ||
      ((relativeX >= startx) && (relativeX <= (startx + startw))
      && (relativeY >= starty) && (relativeY <= (starty + starth)))){
      newHTML = '<div onclick="closetrail();">';
      newHTML += '<div  title="Close popWindow" style="text-align:right;padding:5px 10px 5px 0px;border:none 0px;"><a href="javascript:void(0);" onclick="closetrail();"><b>Close</b></a></div>';
      if(currentImgParentLink !="" )
      {
      	newHTML += '<h1 style="text-align:left;padding-left:20px;"><font style="font-weight:bold;font-size:20px;">' + title + '</font><a style="margin-left:270px;" href="'+ currentImgParentLink + '"><img style="border:px;" src="/App_Themes/Default/images/button_buy_now.gif"></a></h1>';
    	}else{
    		newHTML += '<h1 style="text-align:left;padding-left:20px;"><font style="font-weight:bold;font-size:20px;">' + title + '</font></h1>';
    	}
      newHTML += '<hr style="border:solid 3px #AFC767"></hr>';
      if(currentImgParentLink !="" )
      {
      	var temp = "'hand'";
      	newHTML += '<img onclick="closetrailGotoProduct()" onmouseover="this.style.cursor='+ temp +'" src="' + imagename + '" />';
    	}else{
    		newHTML += '<img src="' + imagename + '">';
    	}
      newHTML += '</div>';
      trail.obj.innerHTML = newHTML;
      trail.style.visibility="visible";
    }
  }
  onscrollFun();
}

function showZoomIn(hrefUrl,imagename,title,oriwidth,oriheight,zoomimgwidth,zoomimgheight, image, startx, starty, startw, starth,imgObj)
{
	var gLeft = null;
    var gTop = null;
    var tempLeft = null;
    var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
  var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);
  
  
  tempLeft = docwidth /2;//(document.body.offsetWidth - (docwidth /2)) / 2;
  
  var flagMin = true;
  var maxPic = false;
  maxPic = (window.location.search.toString().indexOf("main_page=products_all") != -1 || window.location.search.toString().indexOf("main_page=price") != -1);
  gLeft =GetElementLeft(imgObj,0);
  if(gLeft > tempLeft)
  {
		if(maxPic)
		{ 
  			gLeft =GetElementLeft(imgObj,410);
		
		}else{
			gLeft =GetElementLeft(imgObj,430);
		}
  		flagMin = false;
  }else
	{
		if(maxPic)
		{
			gLeft =GetElementLeft(imgObj,-225);
		}else{
			gLeft =GetElementLeft(imgObj,-160);
		}
	}
  
  	gTop = GetElementTop(imgObj,20);
  
      newHTML = '<div onclick="hideZoomIn();" style="left:'+ gLeft + 'px;top:'+ gTop + 'px;margin-top: -62px;position:absolute; z-index:99999;">';
      if(flagMin)
      {//left tip
      	 newHTML +='  <table border="0" class="boxFloatTip" cellpadding="0" cellspacing="0">';
				 newHTML +=' <tr class="boxFloatTipTop" class="boxFloatTipLeft_2">';
				 newHTML +='  <td colspan="3" scope="row" style="padding-left:24px;padding-right:4px;*+padding-right:0px;">';
				 newHTML +='  <div style="background: url(/App_Themes/Default/images/FloatImg/TopLine.gif) repeat-x bottom;height:6px;width:100%; "></div>  ';
				 newHTML +='  </td> ';
				 newHTML +=' </tr>  ';
				 newHTML +=' <tr>';
				 newHTML +='  <td scope="row" class="boxFloatTipLeft_2" style="background-image: url(/App_Themes/Default/images/FloatImg/LeftLine.gif);height: 50px;"> ';
				 newHTML +='  ';
				 newHTML +='  </td> ';
				 newHTML +='  <td rowspan="3" style="width:400px;min-height:177px;text-align:center;background-color:#FFFFFF;"> ';
				 newHTML += '<img src="' + hrefUrl + '">';
				 newHTML +='  </td> ';
				 newHTML +='  <td rowspan="3" class="boxFloatTipLine" style="background-image: url(/App_Themes/Default/images/FloatImg/RightLine.jpg);min-width:5px;">';
				 newHTML +='  </td> ';
				 newHTML +=' </tr>  ';
				 newHTML +=' <tr>';
				 newHTML +='  <td scope="row" class="boxFloatTipLeft_1" style="background: url(/App_Themes/Default/images/FloatImg/LeftFlag.jpg);height:29px;width:27px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ';
				 newHTML +='  ';
				 newHTML +='  </td> ';
				 newHTML +=' </tr>  ';
				 newHTML +=' <tr>  ';
				 newHTML +='  <td scope="row" class="boxFloatTipLeft_2" style="background-image: url(/App_Themes/Default/images/FloatImg/LeftLine.gif);height:140px;">';
				 newHTML +='  &nbsp;  ';
				 newHTML +='  </td>';
				 newHTML +=' </tr> ';
				 newHTML +=' <tr class="boxFloatTipTop">';
				 newHTML +='  <td colspan="3" scope="row" style="padding-left:24px;padding-right:4px;*+padding-right:0px;">';
				 newHTML +='<div style="background: url(/App_Themes/Default/images/FloatImg/BottomLine.jpg) repeat-x top;height: 9px;width:100%;"></div>';
				 newHTML +='  </td>';
				 newHTML +=' </tr>';
				 newHTML +='</table>';
				}else{
					  //right tip
						newHTML +='<table border="0" class="boxFloatTip" cellpadding="0" cellspacing="0">';
            newHTML +='<tr class="boxFloatTipTop" class="boxFloatTipLeft_2">';
            newHTML +='    <td colspan="3" scope="row" style="padding-right:26px;"> ';
            newHTML +='        <div style="background: url(/App_Themes/Default/images/FloatImg/TopLine.gif) repeat-x bottom;';
            newHTML +='            height: 6px; width: 100%;margin-right:27px;">';
            newHTML +='        </div> ';
            newHTML +='    </td>';
            newHTML +='</tr>';
            newHTML +='<tr> ';
            newHTML +='    <td rowspan="3" scope="row" style="background-image: url(/App_Themes/Default/images/FloatImg/RightLine.jpg);height: 120px;min-width:5px;"> ';
            newHTML +='    </td>';
            newHTML +='    <td rowspan="3" style="width:400px;min-height:177px;text-align:center;background-color:#FFFFFF;">';
            newHTML += '<img src="' + hrefUrl + '">';
            newHTML +='    </td>';
            newHTML +='    <td style="background-image: url(/App_Themes/Default/images/FloatImg/RightLine.gif); height: 50px;"> ';
            newHTML +='    </td>';
            newHTML +='</tr>';
            newHTML +='<tr> ';
            newHTML +='    <td style="background: url(/App_Themes/Default/images/FloatImg/RightFlag.jpg) no-repeat;height: 29px;width:27px;"> ';
            newHTML +='    </td>';
            newHTML +='</tr>';
            newHTML +='<tr> ';
            newHTML +='    <td style="background-image: url(/App_Themes/Default/images/FloatImg/RightLine.gif); height: 140px;">';
            newHTML +='    </td>';
            newHTML +='</tr>';
            newHTML +='<tr class="boxFloatTipTop">';
            newHTML +='    <td colspan="3" scope="row" style="padding-right:24px;"> ';
            newHTML +='        <div style="background: url(/App_Themes/Default/images/FloatImg/BottomLine.jpg) repeat-x top;height: 9px; width: 100%;margin-right:27px;">';
            newHTML +='        </div> ';
            newHTML +='    </td>';
            newHTML +='</tr>';
        		newHTML +='</table>';
					}
				 newHTML +='</div> ';
      
      
      if(document.getElementById("#tipContainer_") != null)
	    {
	        document.getElementById("monk").removeChild(document.getElementById("#tipContainer_"));
	    }
	    
		
      var parentContainer=document.createElement("div");//create outer container
	    parentContainer.id="#tipContainer_" ;
	    parentContainer.setAttribute("z-index","999");
	    parentContainer.style.top=  gTop + "px";
	    parentContainer.style.left= gLeft  + "px";
	   document.getElementById("monk").appendChild(parentContainer);
	    parentContainer.innerHTML=newHTML;
	   /* XIXI.$("#tipContainer_").attr("top",gTop);
	    XIXI.$("#tipContainer_").attr("left",gLeft);*/
      //trail.obj.innerHTML = newHTML;
      //trail.style.visibility="visible";
}
    
	
	
	
function hideZoomIn()
{
	if(document.getElementById("#tipContainer_") != null)
   {
	   document.getElementById("monk").removeChild(document.getElementById("#tipContainer_"));
	}
}


function GetEvent(){    
         if(document.all)    return window.event;        
         func==GetEvent.caller;            
         while(func!=null){    
             var arg0=func.arguments[0];
             if(arg0){
                 if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
                     || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){    
                     return arg0;
                 }
             }
             func=func.caller;
         }
         return null;
 }


//获取元素绝对顶位置
function GetElementTop(obj,positionNum){
    var y = obj.offsetTop;
    while (obj = obj.offsetParent) y += obj.offsetTop;
	if(XIXI.$.browser==null)
      alert('eeeeeeeeeeeeeeeeeeeeeeee');	
    if(XIXI.$.browser.msie)
    {
        if(typeof(positionNum)!='undefined')
        {
            return y+positionNum;
        }else
        {
            return y;
        }
    }
    else{
        if(typeof(positionNum)!='undefined')
        {
            return (y+positionNum);
        }else
        {
            return y;
        }
    }
};
//获取元素绝对左位置
function GetElementLeft(obj,positionNum){
    var x = obj.offsetLeft;
    while (obj = obj.offsetParent) x += obj.offsetLeft;
	if(XIXI.$.browser==null)
      alert('eeeeeeeeeeeeeeeeeeeeeeee');	
    if(XIXI.$.browser.msie)
    {
    return x-positionNum;
    }else{
    return (x-positionNum);
    }
};