$(document).ready(function() {
   // Starting Point
   var int_original_start_x = int_pos_x = 50;
   var int_original_start_y = int_pos_y = 50;

   // Thumbnail Size
   var int_thumb_width = 150;
   var int_thumb_height = 150;

   // Window Size
   var int_window_width = 500;
   var int_window_height = 500;

   // Calculate Ratios
   var int_x_ratio = (int_original_width - int_window_width) / int_original_width;
   var int_y_ratio = (int_original_height - int_window_height) / int_original_height;

   // Min and Max mouse positions for dragging.
   var int_thumb_min_x = (int_thumb_width - (int_thumb_width * int_x_ratio)) / 2;
   var int_thumb_min_y = (int_thumb_height - (int_thumb_height * int_y_ratio)) / 2;
   var int_thumb_max_x = int_thumb_width - int_thumb_min_x;
   var int_thumb_max_y = int_thumb_height - int_thumb_min_y;

   // Debugging
   // $('#xvalues').html(int_thumb_min_x +', '+ int_thumb_max_x);
   // $('#yvalues').html(int_thumb_min_y +', '+ int_thumb_max_y);

   // Set initial position of Original Imagel
   $("#bigbox").css("background-position", int_original_start_x + "% " + int_original_start_y + "%");


   obj_offset = 123;
   $("img#zoomThumb").mousemove(function(e){
      if(obj_offset == 123) {
         obj_offset = $('#zoomThumb').offset();
      }
      var int_original_x = e.pageX - obj_offset.left;
      var int_original_y = e.pageY - obj_offset.top;
      // $('#cursorpos').html(int_original_x +', '+ int_original_y);
      if (int_original_x > int_thumb_min_x && int_original_x < int_thumb_max_x) {
         int_pos_x = (int_original_x - int_thumb_min_x) / (int_thumb_width / 2) * 100;
      } else if (int_original_x <= int_thumb_min_x) {
         int_pos_x = 0;
      } else if (int_original_x >= int_thumb_max_x) {
         int_pos_x = 100;
      }
      if (int_original_y > int_thumb_min_y && int_original_y < int_thumb_max_y) {
         int_pos_y = (int_original_y - int_thumb_min_y) / (int_thumb_height / 2) * 100;
      } else if (int_original_y <= int_thumb_min_y) {
         int_pos_y = 0;
      } else if (int_original_y >= int_thumb_max_y) {
         int_pos_y = 100;
      }
      $("div#bigbox").css("background-position", int_pos_x + "% " + int_pos_y + "%");
   });
});