$(document).ready(function() {

	var	imgHeight;
	var dragDiv = $('#loader');	
	var clicked = false;
	var initMouseY;
	
	var img = new Image();
	
	$(img)
	
	.load(function () {
		$(this).hide();
		dragDiv.removeClass('loading').append(this);		
		imgHeight = $(this).height();			
		dragDiv.css('background', "url('" + imgURL[0] + "') no-repeat top left");
		dragDiv.hide();
		dragDiv.fadeIn();
	})
	
	.error(function () {
		// notify the user that the image could not be loaded
	})
	
	.attr('src', imgURL[0]);
	
	dragDiv.mousedown(function(e) {
		dragDiv.css('cursor', 'move');
		clicked = true;
		initMouseY = Math.round(e.pageY - dragDiv.eq(0).offset().top);
	});
	
	dragDiv.mouseup(function(e) {
		dragDiv.css('cursor', 'default');
		clicked = false;
	});
	
	dragDiv.mousemove(function(e) {
		if (clicked) {
			bg = dragDiv.css('background-position');
			if (bg.indexOf('%') > 1) {
				toppos = (dragDiv.height() / 2) - (imgHeight / 2);
			}
			else {
				bg = bg.replace("px", "").replace("px", "").split(" ");
				toppos = parseInt(bg[1]);
			}
			var currentMouseY = Math.round(e.pageY - dragDiv.eq(0).offset().top) - initMouseY;					
			var y = toppos + (currentMouseY);
			var topLimit = browserHeight - imgHeight;					
			if (y < topLimit) y = topLimit;
			if (y > 0) y = 0;
			initMouseY = Math.round(e.pageY - dragDiv.eq(0).offset().top);
			dragDiv.css('background-position', "0px " + y + "px");
		}
	});
	
	$("#screennav li").mousedown(function(e) {
		
		$("#screennav").children("li").each(function() {
			$(this).removeClass('current');
		});
		$(this).addClass('current');

		//dragDiv.addClass('loading');

		var imgNr = parseInt($(this).text()) - 1;											 
		var img = new Image();
		
		$(img)
		
		.load(function () {
			$(this).hide();
			dragDiv.removeClass('loading').append(this);		
			imgHeight = $(this).height();			
			dragDiv.css('background', "url('" + imgURL[imgNr] + "') no-repeat top left");
			dragDiv.hide();
			dragDiv.fadeIn();
		})
		
		.error(function () {
			// notify the user that the image could not be loaded
		})
		
		.attr('src', imgURL[imgNr]);		
		
	});

});