var zoom_level = 1;

var background_positions = {
  1: "0px -111px",
  2: "-280px -144px",
  3: "-634px -314px"
};

var cutout_background_positions = {
  1: "0px 12px",
  2: "0px 0px",//"107px 34px",
  3: "0px -140px"//"-4px -60px"
};

var image_scales = {
  1: 0.25,
  2: 0.5, // lamp's height - 214px
  3: 0.75,
  4: 0.25, // as the lamp's height * 2  428px
  5: 0.35, // here we relate to the wall so proportions are not so subtle
  6: 0.45,
  7: 0.55
};

var image_resolutions = {
  1: 428,//133,
  2: 428,//233,
  3: 428//500
};

var resolutions_of_backgrounds = {
  1: [500, 500],
  2: [1000, 1000],
  3: [1500, 1500]
}

var window_width = $('room_background').getWidth();
var window_height = $('room_background').getHeight();
var cutout_image = $('cutout_image');

/*var recalculate = function(){    
    document.getElementById('room_background').style.backgroundImage = 'url(/images/rooms_bg/room_7_' + zoom_level + '_high_res.jpeg)';  
    
    document.getElementById('room_background').style.backgroundPosition = background_positions[zoom_level];
    
    cutout_image.src = zoom_images[zoom_level];

    resize_cutout(current_size);

    var offset = cutout_background_positions[zoom_level].split(' ')
    cutout_image.style.top =  offset[1];
    cutout_image.style.left = offset[0];
	
	if(Prototype.Browser.IE) {	
      cutout_image.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + cutout_image.src + "', sizingMethod='scale')";
    }
}*/

current_size = 4;

var resize_cutout = function(scale_to) {
  switch(scale_to) {     
   case 1:
     document.getElementById('room_background').style.backgroundImage = 'url(/images/rooms_bg/Laptop.jpg)';     
     document.getElementById('room_background').style.backgroundPosition = '65px 56px';
     cutout_image.style.top =  '193px';
     cutout_image.style.left = '62px';     
     break;
   case 2:
     document.getElementById('room_background').style.backgroundPosition = '0px -105px';
     document.getElementById('room_background').style.backgroundImage = 'url(/images/rooms_bg/2-3-4_lo_res.jpg)';
     cutout_image.style.top  = '90px';
     cutout_image.style.left = '-81px';
     break;
   case 3:
     document.getElementById('room_background').style.backgroundPosition = '0px -105px';
     document.getElementById('room_background').style.backgroundImage = 'url(/images/rooms_bg/2-3-4_lo_res.jpg)';
     cutout_image.style.top  = '22px';
     cutout_image.style.left = '-81px';
     break;
   case 4:     
     document.getElementById('room_background').style.backgroundPosition = '0px -111px';
     document.getElementById('room_background').style.backgroundImage = 'url(/images/rooms_bg/room_7_' + zoom_level + '_high_res.jpeg)'; 
     cutout_image.style.top  = '2px';
     cutout_image.style.left = '-11px';     
     break;
   case 5:
     document.getElementById('room_background').style.backgroundPosition = '0px -111px';
     document.getElementById('room_background').style.backgroundImage = 'url(/images/rooms_bg/room_7_' + zoom_level + '_high_res.jpeg)'; 
     cutout_image.style.top  = '2px';
     cutout_image.style.left = '-11px';    
     break;
   case 6:
     document.getElementById('room_background').style.backgroundPosition = '0px -111px';
     document.getElementById('room_background').style.backgroundImage = 'url(/images/rooms_bg/room_7_' + zoom_level + '_high_res.jpeg)'; 
     cutout_image.style.top  = '2px';
     cutout_image.style.left = '-11px';     
     break;
   case 7:
     document.getElementById('room_background').style.backgroundPosition = '0px -111px';
     document.getElementById('room_background').style.backgroundImage = 'url(/images/rooms_bg/room_7_' + zoom_level + '_high_res.jpeg)';     
     cutout_image.style.top  = '2px';
     cutout_image.style.left = '-11px';
     break;
  }

  // the standard size is 4ft 48'' x 30''
  if(image_ratio < 1) {
    cutout_image.style.width = image_resolutions[zoom_level] * image_scales[scale_to] + 'px'; 
	  cutout_image.style.height = image_resolutions[zoom_level] * image_scales[scale_to] * image_ratio + 'px'; 
  } else {      
    cutout_image.style.height = image_resolutions[zoom_level] * image_scales[scale_to] + 'px'; 
	  cutout_image.style.width = image_resolutions[zoom_level] * image_scales[scale_to] / image_ratio + 'px'; 
  }

  // just simple workaround to keep the png image transparent in ie6 while changing its source
  if(Prototype.Browser.IE) {	
    cutout_image.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + zoom_images[zoom_level] + "', sizingMethod='scale')";
  }
}

/*
document.observe("dom:loaded", function() {   
  $('room_background').onmousedown = function(e){    
    var prev_x = parseInt(e.clientX);
    var prev_y = parseInt(e.clientY);

    this.onmousemove = function(e){
      var diff_x = parseInt(e.clientX) - prev_x;
      var diff_y = parseInt(e.clientY) - prev_y;

      var prev_pos = this.style.backgroundPosition.split(' ');        
      var new_pos_x = parseInt(prev_pos[0]) + diff_x;
      var new_pos_y = parseInt(prev_pos[1]) + diff_y;
        
      if((window_width - resolutions_of_backgrounds[zoom_level][0] < new_pos_x) && (window_height - resolutions_of_backgrounds[zoom_level][1] < new_pos_y) && (new_pos_x < 0) && (new_pos_y < 0)) {
        this.style.backgroundPosition = new_pos_x + 'px ' + new_pos_y + 'px';

        var new_pos_x = parseInt(cutout_image.style.left) + diff_x;
        var new_pos_y = parseInt(cutout_image.style.top) + diff_y;

        cutout_image.style.left = new_pos_x + 'px';
        cutout_image.style.top =  new_pos_y + 'px';                          
      }
      prev_x = parseInt(e.clientX);
      prev_y = parseInt(e.clientY);
    }
  }; 

  $('room_background').onmouseup = function(e){
    this.onmousemove = null;
  };
});
*/