document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
var ie=document.all;
var nn6=document.getElementById&&!document.all;

var isdrag=false;
var padderSet=true;
var xx;
var yy;
var current_obj;
var container_h = 360;
var container_w = 375;
var position_left;
var position_top;
var objh;
var objw;
var zoomsizestep=.25;
var obj;
var padder;
var zoom_amount = .25;
var max_zoom = 3;
var max_zoom_level = 1;
var default_zoom = .30;
var zoom_count = 0;
var a_width;
var a_height;
var num_steps = 30;
var top_step_size;
var left_step_size;
var end_count = 0;
var pan = false;
var end_zoom;
var obj_top;
var obj_left;
var animate ;
/**
 * set Image Size
 *
 * This function will set the image width and height.
 */
function setImageSize() {
   objw = document.getElementById('image').width;
   objh = document.getElementById('image').height;
}

function movemouse(e) {
   if (isdrag)  {
      if (zoom_amount > default_zoom){
         var position_left = nn6 ? lastxx + e.clientX - xx : lastxx + event.clientX - xx;
         var position_top = nn6 ? lastyy + e.clientY - yy : lastyy + event.clientY - yy;

         current_obj.style.left = position_left;
         current_obj.style.top  = position_top;

      }
      return false;
   }
}

function selectmouse(evt) {
   
   var obj       = nn6 ? evt.target : event.srcElement;
   var topelement = "HTML";

   while (obj.tagName != topelement && obj.className != "zoom_image")
   {
      obj = nn6 ? obj.parentNode : obj.parentElement;
   }

   if (obj.className=="zoom_image")
   {

      isdrag = true;
      current_obj = obj;
      lastxx = parseInt(current_obj.style.left+0);
      lastyy = parseInt(current_obj.style.top+0);
      xx = nn6 ? evt.clientX : event.clientX;
      yy = nn6 ? evt.clientY : event.clientY;
      document.onmousemove=movemouse;
      return false;
   }
}

function mouseoff() {
   isdrag=false
}

function zoomin() {
   // check to see if we have set our actuall width and height

   if(!a_height || !a_width){
      a_height = document.getElementById('a_height').value;
      a_width = document.getElementById('a_width').value;
   }
   if(zoom_amount < max_zoom){
      
      end_zoom = zoom_amount+zoomsizestep;
      objw = a_width*zoom_amount;
      objh = a_height*zoom_amount;
      animateZoomIn();
   }
}

function animateZoomIn(){
   if(zoom_amount >= max_zoom_level){
      return;
   }

   zoom_amount = zoom_amount+0.05;
   objw = Math.floor(a_width*zoom_amount);
   objh = Math.floor(a_height*zoom_amount);

   var image =  document.getElementById('image');
   // determine the begining and ending dimensions of the image
   var start_height = image.height;
   var start_width = image.width;
   var end_height = Math.floor(a_height*zoom_amount);
   var end_width = Math.floor(a_width*zoom_amount);
   var old_top = image.style.top;
   var old_left = image.style.left;
   old_top = parseInt(old_top.replace(/[a-z]/g,''));
   old_left = parseInt(old_left.replace(/[a-z]/g,''));

   // find the "synchronization pixel" of the original (small) image.
   // This is the pixel (x,-y) of the image that lines up with the center of the "zoom box"
   var start_sync_x = 88-old_left;
   var start_sync_y = 80-old_top;

   // translate the "synchronization pixel" of the original (small) image to the new, larger image.
   var end_sync_x   = (start_sync_x/start_width)*end_width;
   var end_sync_y   = (start_sync_y/start_height)*end_height;

   // use the new image's "synchronization pixel" to calculate the new offsets
   var new_offset_top  = 80-end_sync_y;
   var new_offset_left = 88-end_sync_x;

   //debugging alertbox
   //alert("zoom_amount: "+zoom_amount+" max_zoom_level: "+max_zoom_level+"\n"+
   //      "Height:: start: "+start_height+" end: "+end_height+"\n"+
   //      "Width:: start: "+start_width+" end: "+end_width+"\n"+
   //      "old_top: "+old_top+" old_left: "+old_left+"\n"+
   //      "start_sync_x: "+start_sync_x+" end_sync_x: "+end_sync_x+"\n"+
   //      "start_sync_y: "+start_sync_y+" end_sync_y: "+end_sync_y+"\n"+
   //      "new_offset_top: "+new_offset_top+" new_offset_left: "+new_offset_left
   //     );

   image.style.top = new_offset_top ;
   image.style.left = new_offset_left;

   image.style.width=end_width+'px';
   image.style.height=end_height+'px';
   if(zoom_amount <= end_zoom){
      setTimeout("animateZoomIn()",50);
   }
   else {
      zoom_amount = end_zoom;
      return;
   }

}

function animateZoomOut(){

   zoom_amount = zoom_amount-0.05;

   // determine the begining and ending dimensions of the image
   var image =  document.getElementById('image');
   var start_height = image.height;
   var start_width = image.width;
    if(zoom_amount < .3){
        zoom_amount = .3;
        end_zoom = .31;
    }
   objw = Math.floor(a_width*zoom_amount);
   objh = Math.floor(a_height*zoom_amount);

   var end_height = objh;
   var end_width = objw;

   var old_top = image.style.top;
   var old_left = image.style.left;
   old_top = parseInt(old_top.replace(/[a-z]/g,''));
   old_left = parseInt(old_left.replace(/[a-z]/g,''));

   // find the "synchronization pixel" of the original (small) image.
   // This is the pixel (x,-y) of the image that lines up with the center of the "zoom box"
   var start_sync_x = 88-old_left;
   var start_sync_y = 80-old_top;

   // translate the "synchronization pixel" of the original (small) image to the new, larger image.
   var end_sync_x = (start_sync_x/start_width)*end_width;
   var end_sync_y = (start_sync_y/start_height)*end_height;

   // use the new image's "synchronization pixel" to calculate the new offsets
   var new_offset_top = 80-end_sync_y;
   var new_offset_left = 88-end_sync_x;

   //debugging alertbox
   //alert("zoom_amount: "+zoom_amount+" max_zoom_level: "+max_zoom_level+"\n"+
   //      "Height:: start: "+start_height+" end: "+end_height+"\n"+
   //      "Width:: start: "+start_width+" end: "+end_width+"\n"+
   //      "old_top: "+old_top+" old_left: "+old_left+"\n"+
   //      "start_sync_x: "+start_sync_x+" end_sync_x: "+end_sync_x+"\n"+
   //      "start_sync_y: "+start_sync_y+" end_sync_y: "+end_sync_y+"\n"+
   //      "new_offset_top: "+new_offset_top+" new_offset_left: "+new_offset_left
   //     );

   image.style.top = parseInt(new_offset_top) ;
   image.style.left = parseInt(new_offset_left);

   image.style.width=objw+'px';
   image.style.height=objh+'px';

   if(zoom_amount > end_zoom){
     animate = setTimeout("animateZoomOut()",50);
   }
   else {
        clearTimeout(animate);
    }
}

function zoomout() {
   //reset the image left and top
   if(!a_height || !a_width){
      a_height = document.getElementById('a_height').value;
      a_height = parseInt(a_height);
      a_width = document.getElementById('a_width').value;
      a_width = parseInt(a_width);
   }
   if(zoom_amount > default_zoom) {
      end_zoom = zoom_amount-default_zoom;

      objw = a_width*zoom_amount;
      objh = a_height*zoom_amount;

      var image_pos = document.getElementById('image');

      obj_top = image_pos.style.top;
      obj_top = parseInt(obj_top.replace(/px/g,''));

      obj_left = image_pos.style.left;
      obj_left = parseInt(obj_left.replace(/px/g,''));
     
      animateZoomOut();
   }
}

function clearPadder(){
   padder = document.getElementById('padder')
   if(zoom_count > 1){
      padder.style.margin='-100px 0px 0px -100px';
   }
   else {
      padder.style.margin='-20px 0px 0px -40px';
   }
}


function clearImage(){
   obj = document.getElementById('image');
   obj.style.top = 0;
   obj.style.left = 0;
}

/**
 * zoomPopUp
 * @param {int} id
 */
 function zoomPopUp(id) {
     window.open('/zoom_popup.php?id='+id,'PopUpWindow','height=650,width=800');
 }

 function enlargePopUp(id) {
   window.open('/larger_image.php?id='+id,'PopUpWindow','height=650,width=600');
 }

/**
 * viewZoomPoint
 * @param {zoom point id} id
 * @param {zoom height} zh
 * @param {zoom width } zw
 */
function viewZoomPoint(id,zh,zw) {
   if(document.getElementById&&!document.all){
      document.getElementById('image').style.marginLeft = 0;
      document.getElementById('image').style.marginTop = 0;
   }
   end_zoom = 1;
   //objw = a_width*zoom_amount;
   //objh = a_height*zoom_amount;
   //animateZoomIn();
   var id_x = document.getElementById(id+'_x').value;
   var id_y = document.getElementById(id+'_y').value;
   //Add extra padding to show image in center of screen. This may not be the best place to put this.
     id_x = parseInt(id_x) + 100;
     id_y = parseInt(id_y) + 50;
   move2point(id_x,id_y);
}

/**
 * move2point pans the image to the specified point.
 * @param id_x (need parameter definition here)
 * @param id_y (need parameter definition here)
 */
function move2point(id_x,id_y){
   end_count++;
   var padder = document.getElementById('image');

   if(!a_height || !a_width){
      a_height = document.getElementById('a_height').value;
      a_height = parseInt(a_height);
      a_width = document.getElementById('a_width').value;
      a_width = parseInt(a_width);
   }
     var pad_top = padder.style.top;
    // alert(pad_top);
      pad_top = pad_top.replace(/[a-z]/g,'');
      pad_top = parseInt(pad_top);

      var pad_left = padder.style.left;
      pad_left = pad_left.replace(/[a-z]/g,'');
      pad_left = parseInt(pad_left);
   if(!top_step_size){
      top_step_size = (pad_top-id_x)/num_steps;
   }
   if(!left_step_size){
      left_step_size = (pad_left-id_y)/num_steps;
   }
   top_step_size = parseInt(top_step_size);
   pad_top = (pad_top)-(top_step_size);
   left_step_size = parseInt(left_step_size);
   pad_left = (pad_left)-(left_step_size);

   padder.style.top = pad_top;
   padder.style.left = pad_left;

   if(zoom_amount < end_zoom){
 var image =  document.getElementById('image').style;   
   zoom_amount = zoom_amount+0.05;
   objw = a_width*zoom_amount;
   objh = a_height*zoom_amount;


   image.width=objw+'px';
   image.height=objh+'px';
   
   } else {
       if(objw != a_width){
    var image =  document.getElementById('image').style;   
       image.width=a_width;
   }
   if(objh != a_height){
       image.height=a_height;
   }
   }
     
   if(end_count != num_steps || zoom_amount < end_zoom){
      setTimeout("move2point('" + id_x + "','" + id_y + "')",33);
   }
   else {
       //alert(pad_top+' '+pad_left);
   padder.style.top = id_x;
   padder.style.left = id_y;
      top_step_size = false;
      left_step_size = false;
      zoom_amount = 1;
      end_count = 0;
   }

}

function resetZoom(){
   var obj = document.getElementById('image');
   if(!a_height || !a_width){
      a_height = document.getElementById('a_height').value;
      a_height = parseInt(a_height);
      a_width = document.getElementById('a_width').value;
      a_width = parseInt(a_width);
   }
   objw = a_width*default_zoom;
   objh = a_height*default_zoom;
   document.getElementById('image').style.width=objw+'px';
   document.getElementById('image').style.height=objh+'px';

   image = document.getElementById('image').style;
   image.top = 0;
   image.left = 0;
   image.marginLeft = -100;
   image.marginTop = -50;
   zoom_count = 0;
   zoom_amount = default_zoom;
}
/*
function resetZoom(){
   var obj = document.getElementById('image');

   obj_top = obj.style.top;
   obj_top = obj_top.replace(/[a-z]/g,'');
   obj_top = parseInt(obj_top);
   obj_left = obj.style.left;
   obj_left = obj_left.replace(/[a-z]/g,'');
   obj_left = parseInt(obj_left);

   padder = document.getElementById('padder');
   pad_top = padder.style.marginTop;
   pad_top = pad_top.replace(/[a-z]/g,'');
   pad_top = parseInt(pad_top);
   pad_left = padder.style.marginLeft;
   pad_left = pad_left.replace(/[a-z]/g,'');
   pad_left = parseInt(pad_left);

   if(pad_top > 0){
      pad_top = (pad_top-10 > 0) ? pad_top-10 : 0;
      padder.style.marginTop = pad_top+'px';
   }
   if (pad_top < 0) {
      pad_top = (pad_top+10 < 0) ? pad_top+10 : 0;
      padder.style.marginTop = pad_top+'px';
   }

   if(pad_left > 0 ){
      pad_left = (pad_left-10 > 0) ? pad_left-10 : 0;
      padder.style.marginLeft = pad_left+'px';
   }
   if (pad_left < 0) {
      pad_left = (pad_left+10 < 0) ? pad_left+10 : 0;
      padder.style.marginLeft = pad_left+'px';
   }

   if(obj_top > 0){
      obj_top = (obj_top-30 > 0) ? obj_top-30 : 0;
      obj.style.top = obj_top+'px';
   }
   if (obj_top < 0) {
      obj_top = (obj_top+30 < 0) ? obj_top+30 : 0;
      obj.style.top = obj_top+'px';
   }

   if(obj_left > 0 ){
      obj_left = obj_left-30 > 0 ? obj_left-30 : 0;
      obj.style.left = obj_left+'px';
   }
   if (obj_left < 0) {
      obj_left = obj_left+30 < 0 ? obj_left+30 : 0;
      obj.style.left = obj_left+'px';
   }
   var image = document.getElementById('image');
   if(!a_height || !a_width){
      a_height = document.getElementById('a_height').value;
      a_height = parseInt(a_height);
      a_width = document.getElementById('a_width').value;
      a_width = parseInt(a_width);
   }
   if(zoom_amount != default_zoom){
      zoom_amount = zoom_amount-default_zoom;
      zh = a_height*zoom_amount;
      zw = a_width*zoom_amount;
      document.getElementById('left').innerHTML = zh;
      image.style.height = zh+'px';
      image.style.width = zw+'px';
   }
   if (obj_top !== 0 || obj_left !== 0 ){
      setTimeout(resetZoom,5);
   }
   else {
      //obj.style.top = '0px';
      //obj.style.left = '0px';
      //padder.style.marginTop = '-20px';
      //padder.style.marginLeft = '-40px';
      isdrag=false ;
      zoom_count = 0;
      return;
   }
}
*/