// --- For the initial load we don't want the loading screen
var initialload=true;

// --- Get the width and height of the screen so taht we can set the size of the thickbox
var myHeight = 0;
var myWidth = 0;

function setRe()
{
	if( typeof( window.innerWidth ) == 'number' ) {
	  //Non-IE
	  myHeight = window.innerHeight;
	} else if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight) ) {
	  //IE 6+ in 'standards compliant mode'
	  myHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
	  //IE 4 compatible
	  myHeight = document.body.clientHeight;
	}
	
	if( typeof( window.innerWidth ) == 'number' ) {
	  //Non-IE
	  myWidth = window.innerWidth;
	} else if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
	  //IE 6+ in 'standards compliant mode'
	  myWidth = document.documentElement.clientWidth;
	} else if( document.body && ( document.body.clientWidth ||document.body.clientHeight ) ) {
	  //IE 4 compatible
	  myWidth = document.body.clientWidth;
	}	
}






function ajax(type, ID){
	// --- Get heights and widths so we can include that in the link information
	setRe();
	
	if(myHeight > 900){
	myHeight = 900;
	} 
	if(myWidth > 1200){
	myWidth = 1200;
	}
	
	myHeight -= 65;
	myWidth -= 65;
	
	//console.log(type + ID);
	var types = '';
	// Do the ajax call as a callback after the fade out
	// Get the necessary data
	$.ajax({
		async: false,
		type: "GET",
		url: "../scripts/getwork.php" ,
		data: type + "=" + ID ,
		dataType: "xml" ,
		success: function(xml, status){
					var name=$(xml).find("NAME").text(); // Client name or service name
					
					
					// Get the type name and identifier (clients or services) to be used in future ajax calls
					var typeName = $(xml).find("TYPES").attr('NAME');
					var typeIdentifier = $(xml).find("TYPES").attr('IDENTIFIER');
					var site = $(xml).find("WEBSITE").text();
					
					//console.log('Name: ' + name+ ' Description: ' + description + ' Type Name: ' + typeName + ' Type Identifier: ' + typeIdentifier);
					
					// Create the list of types with links for ajax calls
					$(xml).find("TYPE").each(function(){
						types += "<a class=\"worklink\" onclick=\"loadwork('" + typeIdentifier + "', " + $(this).attr('ID') + ")\">" + $(this).text() + "</a>";
					});
					types = types.replace(/,\s$/, '');

					var left_description=$(xml).find("LEFT_DESCRIPTION").text();
					if(type == 'client_ID'){
						var right_description=$(xml).find("RIGHT_DESCRIPTION").text();
					} else {
						var right_description= '<h1>Clients</h1>' + types;
					}
					
					// Put the name, types, and description at the bottom of the page
					$("#projectName").html(name);
					if(site != ''){
						$("#site").html('<a class="thickbox" href="' + site + '?KeepThis=true&amp;TB_iframe=true&amp;height=' + myHeight + '&amp;width=' + myWidth+'"><img src="/images/site/launchsmall.png" alt="Launch site" /></a>');
					} else {
						$("#site").html('');
					}
					
					$("#leftcolumn").html(left_description);
					$("#right_description").html(right_description);
					
					// Remove all elements that were previously there
					$("#project-image").children().remove();
					$("#project-cycle-links").children().remove();
					
					// Fill in each slide with an image for this project
					$(xml).find("SLIDE").each(function(){
													   
						var text = $(this).text();
						//alert(text);
						if($(this).attr('LINK') != ''){
											
							// --- we have to see if the link is a dynamic link, because if it is we need to change
							// --- the way we write the link so that it says &KeepThis instead of ?KeepThis
							if(($(this).attr('LINK').match(/\?/))){
								var thickboxlink = "&KeepThis=true&amp;TB_iframe=true&amp;height=" + myHeight + "&amp;width=" + myWidth;
							} else {
								var thickboxlink = "?KeepThis=true&amp;TB_iframe=true&amp;height=" + myHeight + "&amp;width=" + myWidth;
							}
							
							var clientName= $(this).attr("CLIENT");
							$("#project-image").append("<li><img class=\"linkable\" src=\"" + text + "\" alt=\"" + name + "\" /><div class=\"slidename\">"+ $(this).attr("SLIDENAME") +"</div><div class=\"shadow\" style=\"display:none;\"><a title=\"<a target='_blank' href='" + $(this).attr('LINK') + "'>View " + clientName + " in a new window</a>\" target=\"_blank\" class=\"thickbox\" href=\"" + $(this).attr('LINK') + thickboxlink + "\"><img src=\"/images/site/over.png\" alt=\"\" /></a></div></li>");
						} else {
							$("#project-image").append("<li><img src=\"" + text + "\" alt=\"" + name + "\" /><div class=\"slidename\">"+ $(this).attr("SLIDENAME") +"</div></li>");
						}
					});
				}
		
	});<!-- End Ajax Call-->
}




function loadwork(type, ID, element){
	if(initialload){
		ajax(type, ID);
		initialload = false;	
	} else {
		ajax(type, ID);
		//$("#load-area").fadeIn(1500 , function(){ajax(type, ID);});
	}
	// For some reason on the initial load it doesn't work if you have the cycle here
	// So lets only fade in here if we are not on the initial load
	
	//var run = "$('#load-area').fadeOut(1500, function(){$('#project-image').cycle({ fx: 'turnLeft', timeout: 0, speed:   500, easing: 'easeInOutQuad', pager: '#project-cycle-links'});});";
	//var run = "$('#project-image').cycle({ fx: 'turnLeft', timeout: 0, speed:   500, easing: 'easeInOutQuad', pager: '#project-cycle-links'});";
	//var run = "$('#load-area').fadeOut(1500, function(){$('#project-image').cycle({ fx: 'turnLeft', timeout: 0, speed:   500, easing: 'easeInOutQuad', pager: '#project-cycle-links'}); $('#project-image li[display!=none] a').hover(function(){$('#hover').css('display','block');}, function(){});	});";
	
	//setTimeout(run, 3500);
	//run;
	$('#project-image').cycle({ fx: 'turnLeft', timeout: 0, speed:   500, easing: 'easeInOutQuad', pager: '#project-cycle-links'});
	$("#tabs-inner-inner a.current").removeClass('current');
	if(element != null){
		$(element).addClass('current');
	}
	
}




function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}




$(document).ready(function(){
		$("#tabs").tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
		var type = gup('type');
		var id = gup('ID');
		
		(type == "") ? type = "service_ID" : '';
		(id == "") ? id = "6" : '';

		
		loadwork(type, id, $("#servicestarter"));
		
		$("#changetoclient").click(function(){
			$("#clientstarter").click();
		});
		$("#changetoservice").click(function(){
		$("#servicestarter").click();
		});
		
		$("#project-image li img.linkable").live("mouseover", function(){
			$(".shadow", $(this).parent()).css("display", "block");
	   });


		$(".shadow").live("mouseout", function(){
			$(this).css("display", "none");
	   });
		
});