function displayVariantImage( item_id, detail_id, image_id, mode )
{
    var form = document.forms["image_zoom_form"];
    
    form.item_id.value   = item_id;
    form.detail_id.value = detail_id;
    form.image_id.value  = image_id;
    
    if (mode && typeof(mode) != "undefined")
    {
       form.view_action.value = mode;
    }

    form.screenres_height.value = getScreenHeight();
    form.screenres_width.value  = getScreenWidth();

    // check if we have ocr text for this item and copy it into the image_zoom_form 
    var ocr_text = document.getElementById("ocr_highlight_text");
    if (ocr_text && ocr_text.value.length)
    {
        form["ocr_highlight_text"].value = ocr_text.value;
    }

    form.submit();
}

function updateVariantImageScrollBar( image_id, direction )
{
   // check if selected image is not in the viewport, and adjust scrollbar
   // accordingly.

   var image_container = document.getElementById("image_container_" + image_id);     
   var main_container  = document.getElementById("image_list_container");     
   
   var selected_image_pos = image_container.offsetTop;
   var container_height   = main_container.style.height;
   
   // strip of 'px' from container_height
   container_height = container_height.substr(0, container_height.length-2);

   if (direction == "next")
   {
      if (selected_image_pos >= container_height - 20)
      {
          main_container.scrollTop = selected_image_pos+15;
      }
   }
   else if (direction == "prev")
   {
      if (container_height >= selected_image_pos)
      {
          main_container.scrollTop = selected_image_pos-15;
      }      
   }
}

function setSelectedVariantImage( image_id )
{
   // hide arrows for previously selected image
   var form = document.forms["image_zoom_form"];
   
   // get previous image id 
   var prev_image_id = form["image_id"].value;
   
   // set new image id
   form["image_id"].value = image_id;

   var prev_left_arrow  = document.getElementById("image_sel_left_" + prev_image_id);
   var prev_right_arrow = document.getElementById("image_sel_right_" + prev_image_id);   

   prev_left_arrow.style.display="none";
   prev_right_arrow.style.display="none";
   
   // draw arrows for currently selected image
   
   var left_arrow  = document.getElementById("image_sel_left_" + image_id);
   var right_arrow = document.getElementById("image_sel_right_" + image_id);
   
   left_arrow.style.display="inline";
   right_arrow.style.display="inline";
   
   
}

function displayNextVariantImageAjaxRequest()
{
   var image_container = document.getElementById("image_list_container");
   
   var images = image_container.getElementsByTagName("img");
   
   var set_next = false;

   var form               = document.forms["image_zoom_form"];
   var selected_image_id  = form.image_id.value;

   for (x = 0;x < images.length;++x)
   {
      var image = images[x];
      var image_idstr = image.id;
      if (image_idstr.substr(0,4) == "img_")
      {
         var img_id = image_idstr.substr(4, image_idstr.length);
         
         if (set_next)
         {
             setSelectedVariantImage(img_id);
             updateVariantImageScrollBar(img_id, "next");
             displayVariantImageAjaxRequest();
             break;
         }

         if (img_id == selected_image_id)
         {
             set_next = true;             
         }                 
      }   
   }
}


function  displayPrevVariantImageAjaxRequest()
{
   var image_container = document.getElementById("image_list_container");
   
   var images = image_container.getElementsByTagName("img");
   
   var set_previous = false;

   var form               = document.forms["image_zoom_form"];
   var selected_image_id  = form.image_id.value;

   for (x = images.length-1;x >= 0;--x)
   {
      var image = images[x];
      var image_idstr = image.id;
      if (image_idstr.substr(0,4) == "img_")
      {
         var img_id = image_idstr.substr(4, image_idstr.length);

         if (set_previous)
         {
             setSelectedVariantImage(img_id);             
             updateVariantImageScrollBar(img_id, "prev");
             displayVariantImageAjaxRequest();
             break;
         }

         if (img_id == selected_image_id)
         {
             set_previous = true;             
         }                 
         

      }   
   }

}

function displayVariantImageZoomAjaxRequest(  zoom_mode )
{
    // basic item/variant/image ids
    var form = document.forms["image_zoom_form"];
    var item_id   = form.item_id.value;
    var detail_id = form.detail_id.value;
    var image_id  = form.image_id.value;
    
    // users screen res
    var screenres_width  = form.screenres_width.value;
    var screenres_height = form.screenres_height.value;
    
    // original scale settings
    var scale_height = form.scale_height.value;
    var scale_width  = form.scale_width.value;
    
    // check for new scale settings (output by last ajax request)
    var scale_height_updated = document.getElementById("scale_height_updated");
    var scale_width_updated  = document.getElementById("scale_width_updated");
   
    if (scale_width_updated && scale_width_updated)
    {
        scale_height = scale_height_updated.value;
        scale_width = scale_width_updated.value;
    }
   
    
    var image_container = document.getElementById("main_image_container");

    var zoom_args = "&scale_height=" + scale_height + "&scale_width=" + scale_width 
                  + "&screenres_width=" + screenres_width + "&screenres_height=" + screenres_height;

    var form_args = "&image_only&item_id=" + item_id + "&detail_id=" + detail_id + "&image_id=" + image_id  
                    + "&" + zoom_mode + "&" + zoom_args;

    var ocr_form = document.forms["ocr_highlight_form"];    
    if (ocr_form)
    {
        var ocr_input = ocr_form["ocr_highlight_text"];
        // append ocr highlight text
        form_args += "&ocr_highlight_text=" + encodeURIComponent(ocr_input.value)
    }


    var req = new AsynchRequest("img_viewer/",                

        //function on success - using response_text
        function(response_text) 
        { 
            image_container.innerHTML = response_text;
        },

        //function on start of load
        function() 
        {
          image_container.innerHTML="<div style='padding:50px;font-size:1.5em;'><img src='/images/compere/busy.gif' alt'loading'/><span style='padding-left:5px;'>Image Loading...</span></div>";
        },
                
        //function on error
        function(error_state)
        {
         image_container.innerHTML="<span class='alert'>An error occured loading the image, please try again.</span>";                              
        },

        "POST",
        form_args
      );

  req.send(); 
      
  return false;

}

function getScreenWidth()
{
    if (window.innerWidth) {
       var wSize = window.innerWidth;
    } else if (document.documentElement.clientWidth) {
       var wSize = document.documentElement.clientWidth;
    } else if (document.body.clientWidth) {
       var wSize = document.body.clientWidth;
    } else {
       var wSize = 1024; // these do not account for kiosk mode or Opera Show
    }

    return wSize;
}

function getScreenHeight()
{
    if (window.innerHeight) {
       var hSize = window.innerHeight;
    } else if (document.documentElement.clientHeight) {
       var hSize = document.documentElement.clientHeight;
    } else if (document.body.clientHeight) {
       var hSize = document.body.clientHeight;
    } else {
       var hSize = 700;  // assuming 1024x768, minus chrome and such
    }

    return hSize;
}

function displayVariantImageAjaxRequest(  mode )
{
    var form = document.forms["image_zoom_form"];

    var item_id   = form.item_id.value;
    var detail_id = form.detail_id.value;
    var image_id  = form.image_id.value;
    
    if (mode && typeof(mode) != "undefined")
    {
       form.view_action.value = mode;    
    }
    
    var image_container = document.getElementById("main_image_container");
    
    var form_args = "itemid=" + item_id + "&image_only&item_id=" + item_id + "&detail_id=" + detail_id + "&image_id=" + image_id  
                    + "&view_action=" + form.view_action.value 
                    + "&screenres_width=" + getScreenWidth()
                    + "&screenres_height=" + getScreenHeight();
                    
    var ocr_form = document.forms["ocr_highlight_form"];    
    
    if (ocr_form)
    {
        var ocr_input = ocr_form["ocr_highlight_text"];
        // append ocr highlight text
        form_args += "&ocr_highlight_text=" + encodeURIComponent(ocr_input.value);
    }
    
    var req = new AsynchRequest("img_viewer/",                

        //function on success - using response_text
        function(response_text) 
        { 
          image_container.innerHTML = response_text;
          
          // update height and width values
          var tags = image_container.getElementsByTagName("input");
          for (x = 0;x < tags.length;++x)
          {
             if (tags[x].name == "original_width")
                newwidth = tags[x].value;
              
             if (tags[x].name == "original_height")
                 newheight = tags[x].value;                
          
          }
          
          if (newwidth && newheight)
          {
             document.getElementById("original_width_desc").innerHTML=newwidth;
             document.getElementById("original_height_desc").innerHTML=newheight;
          
          }
        },

        //function on start of load
        function() 
        {
          image_container.innerHTML="<div style='padding:50px;font-size:1.5em;'><img src='/images/compere/busy.gif' alt'loading'/><span style='padding-left:5px;'>Image Loading...</span></div>";
        },
                
        //function on error
        function(error_state)
        {
         image_container.innerHTML="<span class='alert'>An error occured loading the image, please try again.</span>";                              
        },

        "POST",
        form_args
      );

  req.send();
      
  return false;
}

function downloadVariantImage()
{
    var form = document.forms["image_zoom_form"];

    var item_id   = form.item_id.value;
    var detail_id = form.detail_id.value;
    var image_id  = form.image_id.value;

    var spec_form     = document.forms["image_download_form"];
    var image_quality = spec_form.image_download_quality.options[spec_form.image_download_quality.selectedIndex].value;
    var image_format  = spec_form.image_download_format.options[spec_form.image_download_format.selectedIndex].value;
    
    var url = "img_download/?" + "item_id="   
      + item_id + "&detail_id=" 
      + detail_id + "&id=" 
      + image_id + "&format=" + image_format + "&image_download_quality=" + image_quality;

  document.location.href=url;
  return false;

}

function scrollToVariantImage()
{
   // if we have a selected image, attempt to scroll the div container so that the 
   // image is visible      
   var container    = document.getElementById("image_list_container");     
   var selected_img = document.getElementById("selected_image");      
   var num_images   = document.getElementById("num_images");      
      
   if (container && selected_img && num_images)
   {
      container.scrollTop = (num_images.value * selected_img.value) * selected_img.value;
   }     
}

function displayOCRHighlight()
{
    var ocr_form   = document.forms["ocr_highlight_form"];
    var image_form = document.forms["image_zoom_form"];
    
    ocr_form["screenres_width"].value  = getScreenWidth();
    ocr_form["screenres_height"].value = getScreenHeight();
    ocr_form["image_id"].value         = image_form["image_id"].value;
    
    ocr_form.submit();
    
    return false;
}