// live preview start

var mouseX = 0;
var mouseY = 0;
               
var is_mozilla = (document.getElementById&&!document.all);
if (is_mozilla){
  document.addEventListener('mousemove',getMouseCoordinates, true);
} 
if(document.all){
    document.onmousemove = getMouseCoordinates;
}
               
function getMouseCoordinates(e){
    if (document.all) e = window.event;
        ele = (document.all) ? e.srcElement : e.target;
        mouseX = (document.all) ? e.screenX : e.clientX;
        mouseY = (document.all) ? e.screenY : e.clientY;
                  
        // window.status = (document.all) ? "e.screen" : "e.client";
}

// current preview image height
var img_width = 0;
var img_height = 0;
// coordinates where to move picture
var img_pos_x = 0;
var img_pos_y = 0;
// current mouse position
var mouse_x = 0;
var mouse_y = 0;
// last mouse click
var mouse_click_x;
var mouse_click_y;
// tag if preview image is displayed
var displayed_image = '';

// preview image div
if (document.getElementById || document.all){
  document.write('<div id="livePreviewImage"></div>');
}

// returns preview image object
function getPreviewObj(){
  if (document.getElementById)
  	return document.getElementById("livePreviewImage");
  else if (document.all)
  	return document.all.livePreviewImage;
}

// detect body of document
function getRealBody(){
  return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

// counts new picture coordinates
function countImgCoords() {

  // fetch body properties
	b = getRealBody();
	doc_top = b.scrollTop;
	doc_right = (document.all? b.scrollLeft + b.clientWidth : pageXOffset + window.innerWidth-15);
	doc_left = b.scrollLeft;
	doc_bottom = (document.all? b.scrollTop + Math.min(b.scrollHeight, b.clientHeight) : Math.min(window.innerHeight));
	
	// cursor in center
	img_pos_x = Math.round((mouse_x - (img_width / 2)));
  img_pos_y = Math.round((mouse_y - (img_height / 2)));
  
  // preview in the bottom right corner
  /*  
  img_pos_x = mouse_x + 10;
  img_pos_y = mouse_y + 10;
  */
  
  // check if any of coordinates is not away from document
  if (img_pos_x < doc_left) img_pos_x = doc_left;
  if (img_pos_y < doc_top) img_pos_y = doc_top;
  if ((img_pos_x + img_width) > doc_right) img_pos_x = doc_right - img_width;
  if ((img_pos_y + img_height) > doc_bottom) img_pos_y = doc_bottom - img_height;

}

// displays preview image
function showImgPreview(imagename, title, width, height){

  // don't show the same preview twice
  if (displayed_image == imagename) { 
      // window.status = "Already displayed";
      return ; 
  }
  
  // don't show after click on the same place
  getMouseCoords(window.event);
  if ((Math.abs(mouse_x - mouse_click_x) < 10) && (Math.abs(mouse_y - mouse_click_y) < 10)) { 
      // window.status = "Same click!"; 
      return ; 
  }
  
  // new preview HTML
	var oHTML = '<div style="padding: 5px; background-color: #FFFF99; border: 1px solid #888;">';
	oHTML = oHTML + '<div align="center" style="padding: 0px 0px 0px 0px; background-color: #FFFFcc;">';
	oHTML = oHTML + '<img src="' + imagename + '" width="' + width + '" height="' + height + '" border="0" onmouseout="hideImgPreviewWithMouseOut();" onclick="hideImgPreviewWithMouseClick();" title="' + title + '">';
	oHTML = oHTML + '</div>';
	
	// remember current image width and height
	img_width = width;
	img_height = height;
	// alert(img_width + "," + img_height);
	
	// count coordinates of image preview
  countImgCoords();

  // move and show preview
	var o = getPreviewObj();
	o.innerHTML = oHTML;
	o.style.left = img_pos_x + "px";
	o.style.top = img_pos_y + "px";
	o.style.display = "inline";
	// alert(img_pos_x + "," + img_pos_y);
	
	// add mouse handler to move preview
	// document.onmousemove = trackMouse;
	window.status = "mouse_x=" + mouse_x + ", mouse_y=" + mouse_y + "; img_pos_x=" + img_pos_x + "; img_pos_y=" + img_pos_y + "; img_pos_x_bottom=" + (img_pos_x + width) + "; img_pos_y_bottom=" + (img_pos_y + height) + "; width=" + width + ", height=" + height;
	
	// fetch latest mouse coords
	getMouseCoords(window.event);
	displayed_image = imagename;
}


// moves img preview
function moveImgPreview() {
  var o = getPreviewObj();
	o.style.left = img_pos_x + "px";
	o.style.top = img_pos_y + "px";
}

function trackMouse(e) {
    if (displayed_image != '') {
          getMouseCoords(e);
          countImgCoords();
          moveImgPreview();
    }
}

// hides preview
function hideImgPreview(){

  var o = getPreviewObj();
	o.innerHTML = "<!-- empty -->";    // clear html
	o.display = "none";                // hide
	o.left = "-500px";                 // move away
	// document.onmousemove=""         // reset mouse capture

  displayed_image = '';
}

// hides preview and remembers mouse click position
function hideImgPreviewWithMouseClick() {
    getMouseCoords(window.event);
    mouse_click_x = mouse_x;
    mouse_click_y = mouse_y;
    hideImgPreview();
}

// hides preview
function hideImgPreviewWithMouseOut() {
    hideImgPreview();
}

// stores mouse coordinates
function getMouseCoords(e){

  if (!e) {
    if (window.event) {  
        e = window.event;
    } else {
        e = window;
    }
  }

	if (e) {
	   if (e.clientX) {
	      // window.status = "e.clientX";
	      b = getRealBody();
  	    mouse_x = b.scrollLeft + e.clientX
  		  mouse_y = b.scrollTop  + e.clientY;
     } else { if (e.pageX){
        // window.status = "e.pageX";
		    mouse_x = e.pageX;
		    mouse_y = e.pageY;
	  } else { if (e.x) {
	      // window.status = "e.X";
		    mouse_x = e.X;
		    mouse_y = e.Y;
		} else {
	     // other possibility - see getCoordinates
	     // window.status = "other";
	     if (window.mouseX) { mouse_x = mouseX; }
		   if (window.mouseY) { mouse_y = mouseY; }
	     // window.status = "None e=" + e;
    } } } 
  } else {
      // window.status = "No e!";
  }
  
  
  // window.status = mouse_x + ", " + mouse_y;
}

// document.onmousemove=getMouseCoords;

// alert("livepreview.js.php loaded!");
// live preview end