// live preview start

// mouse coords
var mouse_x = 0;
var mouse_y = 0;
var mouse_x_max = 0;
var mouse_y_max = 0;
var mouse_x_min = 0;
var mouse_y_min = 0;

var mouse_click_x = 0;
var mouse_click_y = 0;

var scrollbarWidth = 0;
var scrollbarHeight = 0;

// current preview image height
var img_width = 0;
var img_height = 0;
var img_border = 10;

// coordinates where to move picture
var img_pos_x = 0;
var img_pos_y = 0;

// tag if preview image is displayed
var displayed_image = '';

// init
var is_mozilla = (document.getElementById&&!document.all);
if (is_mozilla) {
  document.addEventListener('mousemove',mouseMoved, true);
} else {
  if(document.all){
    document.onmousemove = mouseMoved;
  }
}

// USED
function getScrollbarsInfo() {

/*
This function calculates window.scrollbarWidth and window.scrollbarHeight

This must be called
“onload” to work correctly (or on “DOM ready”, if you're using
a framework that provides such an event)
*/

var i = document.createElement('p');
i.style.width = '100%';

i.style.height = '200px';

var o = document.createElement('div');
o.style.position = 'absolute';
o.style.top = '0px';
o.style.left = '0px';
o.style.visibility = 'hidden';
o.style.width = '200px';
o.style.height = '150px';
o.style.overflow = 'hidden';
o.appendChild(i);

document.body.appendChild(o);
var w1 = i.offsetWidth;
var
h1 = i.offsetHeight;
o.style.overflow = 'scroll';
var w2 = i.offsetWidth;
var h2 = i.offsetHeight;
if (w1 == w2) w2 = o.clientWidth;
if (h1 == h2) h2 = o.clientWidth;

document.body.removeChild(o);

scrollbarWidth = w1-w2;
scrollbarHeight = h1-h2;

// alert("scrollbarWidth" + scrollbarWidth + ";scrollbarHeight" + scrollbarHeight);
// window.status = "scrollbarWidth" + scrollbarWidth + ";scrollbarHeight" + scrollbarHeight;

}
               

// USED
function getMouseCoords(e) {
    if (document.layers) {
        // When the page scrolls in Netscape, the event's mouse position
        // reflects the absolute position on the screen. innerHight/Width
        // is the position from the top/left of the screen that the user is
        // looking at. pageX/YOffset is the amount that the user has
        // scrolled into the page. So the values will be in relation to
        // each other as the total offsets into the page, no matter if
        // the user has scrolled or not.
        
        
        mouse_x = e.pageX;
        mouse_x_min = window.pageXOffset;
        mouse_x_max = window.innerWidth+window.pageXOffset - scrollbarWidth;

        mouse_y = e.pageY;        
        mouse_y_max = window.innerHeight+window.pageYOffset;
        mouse_y_min = window.pageYOffset;
    } else if (document.all) {
        // When the page scrolls in IE, the event's mouse position
        // reflects the position from the top/left of the screen the
        // user is looking at. scrollLeft/Top is the amount the user
        // has scrolled into the page. clientWidth/Height is the height/
        // width of the current page the user is looking at. So, to be
        // consistent with Netscape (above), add the scroll offsets to
        // both so we end up with an absolute value on the page, no
        // matter if the user has scrolled or not.
        mouse_x = window.event.x+document.body.scrollLeft;
        mouse_x_max = document.body.clientWidth; // +document.body.scrollLeft;
        mouse_x_min = document.body.scrollLeft;
        
        mouse_y = window.event.y+document.body.scrollTop;
        mouse_y_max = document.body.clientHeight+document.body.scrollTop;
        mouse_y_min = document.body.scrollTop;
        
    } else if (document.getElementById) {
        // Netscape 6 behaves the same as Netscape 4 in this regard
        
        
        mouse_x = e.pageX;
        mouse_x_max = window.innerWidth+window.pageXOffset - scrollbarWidth;
        mouse_x_min = window.pageXOffset;
        
        mouse_y = e.pageY;
        mouse_y_max = window.innerHeight+window.pageYOffset - scrollbarWidth;
        mouse_y_min = window.pageYOffset;
    }
    
    // window.status = "mouse_x=" + mouse_x + ";mouse_x_min=" + mouse_x_min + ";mouse_x_max="+mouse_x_max + "; mouse_y=" + mouse_y + ";mouse_y_min=" + mouse_y_min + ";mouse_y_max="+mouse_y_max;
}

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

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

// counts new picture coordinates
// USED
function countImgCoords() {

  var d = 0;

	img_pos_x = Math.round((mouse_x - (img_width / 2)));
  img_pos_y = Math.round((mouse_y - (img_height / 2)));
  
  if (img_pos_x < mouse_x_min) { img_pos_x = mouse_x_min; }
  d = (img_width + (2*img_border)); if ((img_pos_x + d) > mouse_x_max) { img_pos_x = mouse_x_max - d; }
  if (img_pos_y < mouse_y_min) { img_pos_y = mouse_y_min; }
  d = (img_height - (2*img_border)); if ((img_pos_y) + d > mouse_y_max) { img_pos_y = mouse_y_max - img_height; }
}

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

  // don't show the same preview twice
  if (displayed_image == imagename) { 
      // alert("Already displayed");
      return ; 
  }
  
  // don't show after click on the same place
  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
	// 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
	displayed_image = imagename;
}


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

// hides preview
// USED
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
// USED
function hideImgPreviewWithMouseClick() {
    mouse_click_x = mouse_x;
    mouse_click_y = mouse_y;
    hideImgPreview();
}

// hides preview when mouse lefts image
// USED
function hideImgPreviewWithMouseOut() {
    hideImgPreview();
}


// event handler - periodically executed
// USED
function mouseMoved(e) {
    getMouseCoords(e);        // get current mouse coordinates
    
    if (displayed_image != '') {
          // countImgCoords();
    }
    
    if (scrollbarWidth == 0) {
        getScrollbarsInfo();       
    }
}


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