// preview_templates.js

var offsetfrommouse=[15,15, 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.
var quadrant = 1;
var timer;

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

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


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


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

function showtrail(imagename,title,width,height){
   quadrant = 0;
   i = imagename
   t = title
   w = width
   h = height
   timer = setTimeout("show('"+i+"',t,w,h);",200);
}

function show(imagename,title,width,height){

   var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth - offsetfrommouse[0]
   var docheight=document.all? Math.max(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>650 && docheight>500)) {
      (width == 0 ) ? width = defaultimagewidth: '';
      (height == 0 ) ? height = defaultimageheight: '';
			
      width+=30
      height+=55;
      defaultimageheight = height
      defaultimagewidth = width

      document.onmousemove=followmouse; 

		
      newHTML = '<div class="border_preview" style="width:'+  width +'px;height:'+ height +'px"><div ' +
         'id="loader_container"><div id="loader"><div align="center">Loading template preview...</div><div id="loader_bg"><div id="progress"> ' +         '</div></div></div></div>';
      newHTML = newHTML + '<h2 class="title"> ' + title + '</h2>';
      newHTML = newHTML + '<div class="preview_temp_load"><img onload="javascript:remove_loading();" src="' + imagename + '" border="0"></div>';
      newHTML = newHTML + '</div>'; 
		
//alert(newHTML);
      gettrailobjnostyle().innerHTML = newHTML;
      gettrailobj().display="none";
   }
}

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)
    // crap... quadrant always get reset in IE.

   var posx = 0;
   var posy = 0;
   if (!e) var e = window.event;
   if (e.pageX || e.pageY) 	{
      posx = e.pageX;
      posy = e.pageY;
   } else if (e.clientX || e.clientY) 	{
      posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
   }
   if (quadrant == 0) {
      if (posy > docheight/2) {
         if (posx > docwidth/2) {
            quadrant = 4;
         } else {
            quadrant = 3;
         }
      } else { 
         if (posx > docwidth/2) {
            quadrant = 1;
         } else {
            quadrant = 2;
         }	  
      }
//      alert("quadrant: " + quadrant);
   }         

   if (!e) var e = window.event;
   if ((quadrant == 1) || (quadrant==4)) {
      xcoord = posx - offsetfrommouse[0] - defaultimagewidth;
//alert(xcoord + ":"+ posx + ":"+ offsetfrommouse[0] + ":"+ defaultimagewidth);
   } else {
      xcoord = offsetfrommouse[1] + posx;
   }
   if ((quadrant == 1) || (quadrant == 2)) {
      ycoord = offsetfrommouse[1] + posy;  // move it below the cursor
   } else {
      ycoord = posy-defaultimageheight-offsetfrommouse[1];
//alert(ycoord+":"+posy+":"+defaultimageheight+":"+offsetfrommouse[1]);
   }
   if (ycoord < 0) {
         ycoord = truebody().scrollTop;
   } else if (ycoord+defaultimageheight>docheight) {
         ycoord = docheight - defaultimageheight-offsetfrommouse[1];
   }
/*
	if (typeof e != "undefined"){
		if (docwidth - e.pageX < defaultimagewidth + 2*offsetfrommouse[0]){
			xcoord = e.pageX - xcoord - defaultimagewidth; // Move to the left side of the cursor
		} else {
			xcoord += e.pageX;  // move to the right of the cursor
		}
		if (docheight - e.pageY < defaultimageheight + offsetfrommouse[1]){
                        // if there isn't room for the image below the cursor       
                   ycoord =Math.max(0, e.pageY-defaultimageheight-2*offsetfrommouse[1]) + truebody().scrollTop;
		} else {
			ycoord += e.pageY;  // move it below the cursor
		}
	} else if (typeof window.event != "undefined"){
		if (docwidth - event.clientX < defaultimagewidth + 2*offsetfrommouse[0]){
			xcoord = event.clientX + truebody().scrollLeft - xcoord - defaultimagewidth; // Move to the left side of the cursor
		} else {
			xcoord += truebody().scrollLeft+event.clientX
		}
		if (docheight - event.clientY < (defaultimageheight + 2*offsetfrommouse[1])){
			ycoord += event.clientY + truebody().scrollTop - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + event.clientY - docheight));
		} else {
			ycoord += truebody().scrollTop + event.clientY;
		}
	}
*/
   gettrailobj().left=xcoord+"px"
   gettrailobj().top=ycoord+"px"
     gettrailobj().display="block";
}