$(document).ready(function() {
	
	//set up document
	$("#zoomerControl").html('<li id="btnOut">-</li>\n<li id="btnIn">+</li>\n<li id="btnReset">Reset</li>');
	
	$("#zoomerFrame img").each(function(){
		if($(this).attr('src') == $("#zoomerThumbs li:nth-child(2) a").attr('href'))
		{
			$(this).show();
			$(this).addClass('zoomerImage');
		}
		else
		{
			$(this).hide();
			$(this).removeClass('zoomerImage');
		}
	});
	
	//carousel img
		
	
	$("#zoomerThumbs li a").click(function(){
		if($(this).parent().hasClass('left'))
		{
			$("#zoomerThumbs li.left").css({'z-index':3});
			$("#zoomerThumbs li.left").animate({'left':'43px','top':'0px','width':'46px','height':'62px'});
			$("#zoomerThumbs li.left a img").animate({'width':'46px','height':'62px'});
			$("#zoomerThumbs li.left").addClass('center');
			
			$("#zoomerThumbs li.center:not(.left)").css({'z-index':2});
			$("#zoomerThumbs li.center:not(.left)").animate({'left':'98px','top':'7px','width':'36px','height':'48px'});
			$("#zoomerThumbs li.center:not(.left) a img").animate({'width':'36px','height':'48px'});
			$("#zoomerThumbs li.center:not(.left)").addClass('right');
			
			$("#zoomerThumbs li.right:not(.center)").css({'z-index':1});
			$("#zoomerThumbs li.right:not(.center)").animate({'left':'0px','top':'7px','width':'36px','height':'48px'});
			$("#zoomerThumbs li.right:not(.center) a img").animate({'width':'36px','height':'48px'});
			$("#zoomerThumbs li.right:not(.center)").addClass('left');
			
			$("#zoomerThumbs li.left.center").removeClass('left');
			$("#zoomerThumbs li.center.right").removeClass('center');
			$("#zoomerThumbs li.right.left").removeClass('right');
			
			var href = $(this).attr('href');
			$("#zoomerFrame img").each(function(){
				if($(this).attr('src') == href)
				{
					$(this).fadeIn(400);
					$(this).addClass('zoomerImage');
				}
				else
				{
					$(this).fadeOut(400);
					$(this).removeClass('zoomerImage');
				}
			});
			
			//reset size
			var dimensions = zoomLevels[0].split(',', 2);
			currentZoomLevel = 0;
			$(".zoomerImage").animate({'width':dimensions[0], 'height':dimensions[1],'top':0,'left':0},400);
			//cursor
			$(".zoomerImage").css({'cursor':'default'});
			$(".zoomerImage").draggable('disable');
		}
		else if($(this).parent().hasClass('right'))
		{	
			$("#zoomerThumbs li.right").css({'z-index':3});
			$("#zoomerThumbs li.right").animate({'left':'43px','top':'0px','width':'46px','height':'62px'});
			$("#zoomerThumbs li.right a img").animate({'width':'46px','height':'62px'});
			$("#zoomerThumbs li.right").addClass('center');
			
			$("#zoomerThumbs li.center:not(.right)").css({'z-index':2});
			$("#zoomerThumbs li.center:not(.right)").animate({'left':'0px','top':'7px','width':'36px','height':'48px'});
			$("#zoomerThumbs li.center:not(.right) a img").animate({'width':'36px','height':'48px'});
			$("#zoomerThumbs li.center:not(.right)").addClass('left');
			
			$("#zoomerThumbs li.left:not(.center)").css({'z-index':1});
			$("#zoomerThumbs li.left:not(.center)").animate({'left':'98px','top':'7px','width':'36px','height':'48px'});
			$("#zoomerThumbs li.left:not(.center) a img").animate({'width':'36px','height':'48px'});
			$("#zoomerThumbs li.left:not(.center)").addClass('right');
			
			$("#zoomerThumbs li.right.center").removeClass('right');
			$("#zoomerThumbs li.center.left").removeClass('center');
			$("#zoomerThumbs li.left.right").removeClass('left');
			
			var href = $(this).attr('href');
			$("#zoomerFrame img").each(function(){
				if($(this).attr('src') == href)
				{
					$(this).fadeIn(400);
					$(this).addClass('zoomerImage');
				}
				else
				{
					$(this).fadeOut(400);
					$(this).removeClass('zoomerImage');
				}
			});
			
			//reset size
			var dimensions = zoomLevels[0].split(',', 2);
			currentZoomLevel = 0;
			$(".zoomerImage").animate({'width':dimensions[0], 'height':dimensions[1],'top':0,'left':0},400);
			//cursor
			$(".zoomerImage").css({'cursor':'default'});
			$(".zoomerImage").draggable('disable');
		}
		return false;
	});
	
	
						   
	//frame dimensions
	var frameWidth = 555;
	var frameHeight = 367;
	//set zoom levels
	var zoomLevels = new Array();
	zoomLevels[0] = "367,490";//this should also be the size of the frame
	zoomLevels[1] = "734,980";
	zoomLevels[2] = "1101,1470";
	
	//set starting zoom level
	var currentZoomLevel = 0;
	var currentOffsetX = 0;
	var currentOffsetY = 0;
	
	//thumbnails
		
	
	$("#btnIn").click(function(){
		if(currentZoomLevel < zoomLevels.length-1)
		{
			currentZoomLevel++;
			var dimensions = zoomLevels[currentZoomLevel].split(',', 2);
			
			//resize and offset if required
			var position = $(".zoomerImage").position();
			
			if(currentZoomLevel > 0)
			{
				if(position.top != 0 && position.left != 0)
				{
					
					$(".zoomerImage").animate({'width':dimensions[0], 'height':dimensions[1],'top':(position.top*2),'left':(position.left*2)},400);
				}
				else
				{
					
					$(".zoomerImage").animate({'width':dimensions[0], 'height':dimensions[1],'top':0-((dimensions[1]-frameHeight)/2),'left':0-((dimensions[0]-frameWidth)/2)},400);	
				}
				bounce($(this));
				$(".zoomerImage").css({'cursor':'move'});
				//make this baby draggable...but not too draggable			
				$(".zoomerImage").draggable({ disabled: false,
					stop: function(event, ui) {
						bounce($(this));
					}
				});
				
			}
			else
			{
				//console.log('ELSE');
				//reset position
				$(".zoomerImage").css({'top':0,'left':0});
				//disable dragging
				$(".zoomerImage").draggable('disable');
				//cursor
				$(".zoomerImage").css({'cursor':'default'});
			}
		}
	});
	
	$("#btnOut").click(function(){
		if(currentZoomLevel > 0)
		{
			
			currentZoomLevel--;
			var dimensions = zoomLevels[currentZoomLevel].split(',', 2);
			
			//resize and offset if required
			var position = $(".zoomerImage").position();
			
			if(currentZoomLevel >= 1)
			{
				$(".zoomerImage").animate({'width':dimensions[0], 'height':dimensions[1],'top':(position.top/2),'left':(position.left/2)},400);
				bounce($(this));
				$(".zoomerImage").css({'cursor':'move'});
				//make this baby draggable...but not too draggable			
				$(".zoomerImage").draggable({ disabled: false,
					stop: function(event, ui) {
						bounce($(this));
					}
				});
			}
			else
			{
				//reset position
				$(".zoomerImage").animate({'width':dimensions[0], 'height':dimensions[1],'top':0,'left':0},400);
				//disable dragging
				$(".zoomerImage").draggable('disable');
				//cursor
				$(".zoomerImage").css({'cursor':'default'});
			}
		}
	});
	
	$("#btnReset").click(function(){
		var dimensions = zoomLevels[0].split(',', 2);
		currentZoomLevel = 0;
		$(".zoomerImage").animate({'width':dimensions[0], 'height':dimensions[1],'top':0,'left':0},400);
		//cursor
		$(".zoomerImage").css({'cursor':'default'});
		$(".zoomerImage").draggable('disable');
	});
	
	
	function bounce(object){
		//top-left
		if(parseInt(object.css('top'))>0 && parseInt(object.css('left'))>0)
		{
			object.animate({'top':0,'left':0}, 50);	
		}
		//top-right
		else if(parseInt(object.css('top'))>0 && parseInt(object.css('left'))<(0-(object.width()-frameWidth)))
		{
			object.animate({'top':0,'left':(0-(object.width()-frameWidth))}, 50);
		}
		//bottom-right
		else if(parseInt(object.css('top'))<(0-(object.height()-frameHeight)) && parseInt(object.css('left'))<(0-(object.width()-frameWidth)))
		{
			object.animate({'top':(0-(object.height()-frameHeight)),'left':(0-(object.width()-frameWidth))}, 50);
		}
		//bottom-left
		else if(parseInt(object.css('top'))<(0-(object.height()-frameHeight)) && parseInt(object.css('left'))>0)
		{
			object.animate({'top':(0-(object.height()-frameHeight)),'left':0}, 50);
		}
		//top
		else if(parseInt(object.css('top'))>0)
		{
			object.animate({'top':0}, 50);	
		}
		//right
		else if(parseInt(object.css('left'))<(0-(object.width()-frameWidth)))
		{
			object.animate({'left':(0-(object.width()-frameWidth))}, 50);	
		}
		//bottom
		else if(parseInt(object.css('top'))<(0-(object.height()-frameHeight)))
		{
			object.animate({'top':(0-(object.height()-frameHeight))}, 50);	
		}
		//left
		else if(parseInt(object.css('left'))>0)
		{
			object.animate({'left':0}, 50);	
		}
	}
});