var linkArray = new Array();

var initWorkPage = function(params){
	
	var dataXML;
	
	$.ajax({
		type: "GET",
		url: encodeURI(params.xmlPath),
		dataType: "xml",
		success: function(xml) {
			$(xml).find('xml').each(function(){
				var dataXML = $(this);
				
				var runningDelay = 200;
				var delayDecreaser = 15;
				var newDelay = runningDelay;
				
				var i = 0;
				$(this).find('client').each(function(){
														  
					var clientName = $(this).attr("name");
					var clientLogo = $(this).attr("logo");
					var clientBGImage = $(this).attr("image");
					var clientDesc = $(this).attr("desc");
					linkArray.push(encodeURI($(this).attr("link")));
					
					var newHTML = "";
					if(i % 3 == 2)
					{
						newHTML += '<div class="clientBox right" id="box' + i + '" style="background-image:url('+clientBGImage+')" onclick="getURL('+i+')">';
					}
					else
					{
						newHTML += '<div class="clientBox" id="box' + i + '" style="background-image:url('+clientBGImage+')" onclick="getURL('+i+')">';
					}
					
					newHTML += '<div class="info">';
					newHTML += '<img src="'+clientLogo+'"/>';
					newHTML += '<p>'+clientName+'</p>';
					newHTML += '</div>';
					newHTML += '<div class="desc">';
					newHTML += '<p>'+clientDesc+'</p>';
					newHTML += '</div>';
					newHTML += '</div>';
					
					$('.workBoxes').append(newHTML);
					
					$('#box' + i).hover(function(){
						$('.desc', this).stop().animate({height: 158, marginTop: 0},{duration: 200, easing: 'swing'});
					}, function(){
						$('.desc', this).stop().animate({height: 57, marginTop: 101},{duration: 200, easing: 'swing'});
					}
					)
					
					$('#box' + i + ' img').load(function(){
						
						var margin = (57 - $(this).height()) / 2;
						
						$(this).css('margin-top', margin);
						$(this).css('margin-right', margin);
					});
					
					var endWidth = $('#box' + i).css('width');
					var endHeight = $('#box' + i).css('height');
					$('#box' + i).css('border-width', '0px');
					var endMargin = $('#box' + i + ' .info').css('margin-top');
					
					$('#box' + i).css('height', 57);					
					$('#box' + i).css('width', 0);
					$('#box' + i + ' .info').css('width', 0);
					$('#box' + i + ' .info').css('margin-top', 0);		
					$('#box' + i + ' .desc').css('width', 0);
					$('#box' + i + ' .desc').css('margin-top', 0);	
					
					$('#box' + i).stop().delay(runningDelay + newDelay).animate({width: endWidth, borderWidth: 1},{duration: 200, easing: 'swing'}).animate({height: endHeight},{duration: 200, easing: 'swing'});
					$('#box' + i + ' .info').stop().delay(runningDelay + newDelay).animate({width: endWidth},{duration: 200, easing: 'swing'}).animate({marginTop: endMargin},{duration: 200, easing: 'swing'});
					$('#box' + i + ' .desc').stop().delay(runningDelay + newDelay).animate({width: endWidth},{duration: 200, easing: 'swing'}).animate({marginTop: endMargin},{duration: 200, easing: 'swing'});

					
					$('#box' + i).css({});
					
					runningDelay += newDelay;
					
					if(newDelay > 0 && i > 6)
					{
						newDelay -= delayDecreaser;
						
						if(newDelay < 0)
						{
							newDelay = 0;
						}
					}
					
					i++;
					
					if(i % 3 == 0)
					{
						$('.workBoxes').append('<div style="clear:both;"></div>');
					}
					
				});
				
			});
			
			$('.developmentsBoxes').append('<div style="clear:both;"></div>');
		}
	});
	
}

var getURL = function(i)
{
	location.href=linkArray[i];
}