var type;
var client;

function getWorkData(href) {
	var findHash = href.lastIndexOf('#');
	var data = href.substr(findHash+1).split('-');
	if (data.length == 3 && data[0] == 'WORK') {
		type = data[1];
		client = data[2];
		return true;
	}
	else return false;
}

function openWorkDrawer() {
	// Close the Twitter and Facebook widgets
	$('#twitter, #facebook').fadeOut(200);
	$('#nav').animate({
		'height':'221px'
	},200);
	$('#wrapNav').animate({
		'paddingTop':'166px'
	},200);
	var fixOverlay = true;
	$.each($.browser, function(i, val) {
		if (i=="msie" && val==true && Number($.browser.version.substr(0,1)) <= 7) fixOverlay = false;
	});
	if (fixOverlay) $('#scroll').css('zIndex','auto');
	$('#expandNav').css('display','none');
	$('#drawer').load('work.php',{ 't':type, 'c':client },attachWorkActions);
	$('#drawer').fadeIn(1000);
	$('#nav')
		.addClass('open')
		.prepend(
			$('<a id="workTab" class="pageCenter" href="#"><span>work</span></a>')
				.click(closeWorkDrawer)
				.css('backgroundImage',"url('images/what/work/workTab.png')")
		);
	location.hash = '#WORK';
}

function closeWorkDrawer() {
	$('#nav').animate({
		'height':'55px'
	},200);
	$('#wrapNav').animate({
		'paddingTop':'0'
	},200);
	$('#bg-overlay').fadeOut(200,function(){
		$('#bg-overlay img').remove();
		$('#scroll').css('zIndex',10);
	});
	$('#drawer, #centerNav .altWork').fadeOut(200,function(){
		$('#drawer *, #centerNav .altWork').remove();
	});
	$('#workTab').remove();
	$('#expandNav').css('display','block');
	$('#nav').removeClass('open');
	location.hash = '#';
}

function changeWorkImage() {	
	var imageFile = type+'-'+client;
	var imageId = 'WORK_BG-'+imageFile;
	
	if ($('#WORK-'+imageFile+'_d a').hasClass('part') && !$('li.altWork').length) {
		var suffix = 2;
		if (imageFile.substr(imageFile.length-1) == 2) suffix = null;
		$('#centerNav').append('<li class="altWork"><a class="part" href="#WORK-'+imageFile+suffix+'"><span>Alternate</span></a></li>');
		$('#centerNav .altWork a')
			.click(function(){
				var suffix = ($(this).attr('href').substr($(this).attr('href').length-1) == 2) ? '' : 2;
				if (getWorkData($(this).attr('href'))) {
					changeWorkImage();
				}
				$(this).attr('href','#WORK-'+imageFile+suffix);
				$(this).css('backgroundImage','url("images/what/work/'+imageFile+suffix+'_d.png")');
			})
			.css('backgroundImage','url("images/what/work/'+imageFile+suffix+'_d.png")')
			.parent('li').fadeIn(700);
	}
	
	$('#bg-overlay img').css('z-index',12);
	$('#bg-overlay').prepend('<img id="'+imageId+'" src="images/what/work/'+imageFile+'.jpg" alt="" />');
	
	var ratio = 895/1120; // original image height divided by the width
	var overlayWidth = document.documentElement.clientWidth * ((100 - newdivisionx)/100);
	var overlayHeight = document.documentElement.clientHeight - 226;
	
	if ((overlayHeight/overlayWidth) > ratio) {
		var imageWidth = Math.round(overlayHeight / ratio) +1;
		var imageHeight = Math.round(overlayHeight) +2;
	} else {
		var imageWidth = overlayWidth +1;
		var imageHeight = Math.round(overlayWidth * ratio) +2;
		var imagePosTop = Math.round((imageHeight - overlayHeight) / 2);
	}
	
	$('#drawer h4').text($('#WORK-'+client+'-'+section+'_d span').text());
	
	$('#'+imageId)
		.css({
			'width' : imageWidth+'px',
			'height' : imageHeight+'px',
			'display' : 'none',
			'position' : 'relative',
			'top' : (imagePosTop) ? '-'+imagePosTop+'px' : 0,
			'z-index' : 13
		})
		.fadeIn(500,function(){
			$(this).nextAll().remove();
		});
}

function attachWorkActions() {	
	$('#drawer').append(
		$('<a class="back" href="#">\u00ab Back to Portfolio</a>').click(closeWorkDrawer)
	);
	
	if ($('#bg-overlay img').length < 1) {
		$('#bg-overlay').css('display','block');
		changeWorkImage();
	}
	
	$('#drawer a:not(a[class=back])').click(function(){
		if (getWorkData($(this).attr('href'))) {
			$('#drawer li').removeClass('selected');
			$(this).parent('li').addClass('selected');
			if ($('#centerNav .altWork').length) {
				$('#centerNav .altWork').fadeOut(200,function(){
					$('#centerNav .altWork').remove();
					changeWorkImage();
				});
			} else changeWorkImage();
		}
	}).hover(function(){
		$('#drawer h4').text($(this).children('span').text());
	},function(){
		$('#drawer h4').text($('#WORK-'+client+'-'+section+'_d span').text());
	});
}

$(document).ready(function(){
	
	$('#workNav a').click(function(){
		var data = $(this).attr('href').substr(1).split('-');
		if (data.length == 3 && data[0] == 'WORK') {
			type = data[1];
			client = data[2];
			openWorkDrawer();
		}
	});
	
});