var getSizeImg = function(src) {
        var timg = $('<img>').attr('src', src).css({ position: 'absolute', top: '-1000px', left: '-1000px' }).appendTo('body');
        var size = {width: timg.get(0).offsetWidth, height: timg.get(0).offsetHeight };
        
        try { document.body.removeChild(timg[0]); }
        catch(e) {};

        return size;
    };

$().ready(function(){

	$('#_Container').resizable({
		containment: $('#_Wrapper'),
		handles: 'all',
		knobHandles: true,
		autoHide: true,
		minWidth: 100,
		minHeight: 100,
		resize: function(event, ui){
			var self = $(this).data("resizable"),
				imageSize = $('#_Container').data("image-size"),
				top = self.position.top, 
				height = ((self.position.top + self.size.height) <= imageSize.height ? self.size.height : imageSize.height),
				left = self.position.left,
				width = ((self.position.left + self.size.width) <= imageSize.width ? self.size.width : imageSize.width);

			left = left > 0 ? left : 0;
			top = top > 0 ? top : 0;
			
			var bgPos = '-' + (left + 1) + 'px -' + (top + 1) + 'px';

			//the borders of the resize rect are offsetting the bg pos incorrectly. subtract (add, since its a negative) 1 to fix.
			$(this).css({backgroundPosition: bgPos});

			$("#log-top").html(top + "px");
			$("#log-height").html(height + "px");
			$("#log-left").html(left + "px");
			$("#log-width").html(width + "px");
		},
		stop: function(event, ui){
			var self = $(this).data("resizable"),
				top = self.position.top,
				left = self.position.left;

			left = left > 0 ? left : 0;
			top = top > 0 ? top : 0;

  		$(this).css({backgroundPosition: ((left + 1) * -1) + 'px ' + ((top + 1) * -1) + 'px'});
		}
	})
	.draggable({
		cursor: 'move',
		containment: $('#_Wrapper'),
		drag: function(event, ui){
			var self = $(this).data("draggable");
			$(this).css({backgroundPosition: ((self.position.left + 1) * -1) + 'px ' + ((self.position.top + 1) * -1) + 'px'});

			$("#log-top").html(self.position.top+"px");
			$("#log-left").html(self.position.left+"px");
		}
	});

	$('.thumbs')
		.find("li a")
		.click(function(event){
		  $('#_Container').css({top: '0', left: '0'});
      
      var size = getSizeImg($(this).find("img").attr("src"));

	  	$('#_Container_Image').css({
	  		width: size.width, 
	  		height: size.height, 
	  		background: 'transparent url('+$(this).find("img").attr("src")+') no-repeat scroll 0%' 
	  	});
	  	
      $('#_Wrapper').css({ width: size.width, height: size.height });
	  	$('#_Container')
	  		.css('background', 'transparent url('+$(this).find("img").attr("src")+') no-repeat scroll 0px 0px')
	  		.data("image-size", size);

      return false;
		});

	$('#_Container_Image').css({ opacity: 0.5 });
  $("#log-height").html($('#_Container').height()+"px");
  $("#log-width").html($('#_Container').width()+"px");
  
  $(".thumbs li a:first").click();
});