$(window).load(function() {
	var viewPortHeight = document.documentElement.clientHeight;
	var viewPortWidth = document.documentElement.clientWidth;
	var leftSlider = $('#leftSlider');
	var rightSlider = $('#rightSlider');
	var worksList = $('#worksList ul');
	var worksListArray = Array();
	var zoomBg = $('#zoomBackground');
	var activeWork = [$(document), null, 0];
	var aboutLayer = $('#aboutAndContact');
	var workLoader = $('#workLoader');
	
	$('#content').css('height', px(viewPortHeight-40));
	if(viewPortHeight < 600) { $('#top').css('top', '20px'); }
	if(viewPortHeight < 780) { $('#footer').css('paddingLeft', '400px'); $('#footerBrDesign').css('marginRight', '400px'); }
	$('#worksList').css('width', px(viewPortWidth-40-406));
	
	function worksListMargin() { return(parseInt(worksList.css('marginLeft'))); }
	function worksListFunctionX() { return((worksListLength-viewPortWidth+411)); }
	function px(value, negative) { return(((negative==true)?'-':'')+value+'px'); }
	function slideLeft() { return(activeWork[2] > 0); }
	function slideRight() { return(activeWork[2] < (worksListArray.length-1)); }
	function zoomSetDefault() { activeWork[0].find('a[title^=zoom]').attr('href', activeWork[1]); }
	function zoomLoadImage(image) { image.load(function() { zoomUpdateMargins($(this)); workLoader.animate({ opacity: 0 }, 150); $(this).animate({ opacity: 1 }, 150); }); }
	function zoomUpdateMargins(image) {
		var imageMargins = { 'margin-top' : px($(image).height()/2, true), 'margin-left' : px($(image).width()/2, true) }
		$(image).css(imageMargins);
	}
	function zoomChangeWork(i, firstOne) {
		zoomBg.find('img[alt^=zoom]').animate({ opacity: 0 }, 150, function() {
			workLoader.animate({ opacity: 1 }, 150);
			zoomSetDefault();
			nextWork = worksList.find('li').get(i);
			activeWork[0] = $(nextWork);
			activeWork[1] = activeWork[0].find('a[title^=zoom]').attr('href');
			$(this).attr('src', activeWork[1]);
			zoomLoadImage($(this));
		});
	}
	function point2pointMarginSum(a, b) {
		var sum = 0, multiplier = 1, start = 0, stop = 0;
		if(a < b) { start = a; stop = b; }
		else if(a > b) { start = b; stop = a; multiplier = -1; }
		for(i = start; i < stop; i++) { sum += worksListArray[i]; }
		return(sum * multiplier);
	}
	
	worksList.children('li').each(function(i) {
		worksListArray[i] = $(this).find('img').width()+40;
		$(this).find('img[alt^=work]').hover(
			function() { $(this).parents('li').attr('id', 'activeWork'); worksList.find('li[id!=activeWork]').stop().animate({opacity: 0.3}, 200); },
			function() { $(this).parents('li').removeAttr('id'); worksList.find('li').animate({opacity: 1}, 200); }
		).parents('li').click(function() {
			var lastWork = activeWork[2];
			activeWork[0] = $(this);
			activeWork[1] = activeWork[0].children('a').attr('href');
			activeWork[2] = i;
			worksList.animate({ marginLeft: px(worksListMargin()-point2pointMarginSum(lastWork, activeWork[2])) }, 150);
			zoomBg.css('display', 'block').animate({ opacity: 1 }, 250);
			zoomBg.prepend('<img src="' + $(this).find('a[title^=zoom]').attr('href') + '" alt="zoom" />');
			zoomLoadImage(zoomBg.find('img[alt^=zoom]'));
			$(this).find('a[title^=zoom]').attr('href', '#');
		});
	});

	leftSlider.click(function() {
		if(slideLeft()) {
			activeWork[2]--;
			if(worksListMargin() < 0) { worksList.animate({ marginLeft: px(worksListMargin()+worksListArray[activeWork[2]]) }, 200); }
			if(zoomBg.css('display') == 'block') { zoomChangeWork(activeWork[2]); }
		}
	});
	rightSlider.click(function() {
		if(slideRight()) {
			worksList.animate({ marginLeft: px(worksListMargin()-worksListArray[activeWork[2]]) }, 200);
			activeWork[2]++;
			if(zoomBg.css('display') == 'block') { zoomChangeWork(activeWork[2]); }
		}
	});
	
	zoomBg.click(function() { $(this).animate({ opacity: 0 }, 250, function() { $(this).css('display', 'none').find('img[alt^=zoom]').remove(); }); zoomSetDefault(); });
	
	leftSlider.hover(function() { if(slideLeft()) { $(this).animate({ opacity: 1 }, 500); } }, function() { $(this).animate({ opacity: 0 }, 500); });
	rightSlider.hover(function() { if(slideRight()) { $(this).animate({ opacity: 1 }, 500); } }, function() { $(this).animate({ opacity: 0 }, 500); });
	
	$('#aboutAndContactOpen').click(function() { aboutLayer.css('display', 'block').animate({ opacity: 1 }, 150); });
	$('#aboutAndContactClose, #pageContent').click(function() { aboutLayer.animate({ opacity: 0 }, 150, function() { $(this).css('display', 'none'); }); });
});