$(document).ready(function(){

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
    
    });
}

/* Preloading the larger images */
preload([
	'http://lithodora.info/upload/portfolio/img_4.jpg',
	'http://lithodora.info/upload/portfolio/img_5.jpg',
	'http://lithodora.info/upload/portfolio/img_7.jpg',
    'http://lithodora.info/upload/galleries/3.jpg',
    'http://lithodora.info/upload/galleries/5.jpg',
    'http://lithodora.info/upload/galleries/7.jpg',
    'http://lithodora.info/upload/galleries/9.jpg',
    'http://lithodora.info/upload/galleries/10.jpg',
    'http://lithodora.info/upload/galleries/13.jpg',
    'http://lithodora.info/upload/galleries/14.jpg',
	'http://lithodora.info/upload/galleries/15.jpg'
	
	
]);

/*
Instead of changing the links, lets just do it at once here
*/
$('.return').each(function(){
	$(this).html('<img src="images/close.png" alt="Return to ' + $(this).parent().attr('class') + '" title="Return to ' + $(this).parent().attr('class') + '">');
});

/*
 Lightbox function
*/		 

$('fieldset').each(function(){
	$(this).find(".lightbox").lightBox();
});
	
	/*
	photo gallery elements 
	*/
	$imgs = $("#photo_stack img");
	$imgCount = $imgs.length;
	$curr_index = 0;
	$imgs.last().addClass('current');
	
	for(var i=1; i<=$imgs.length; i++) {
		$random_deg =  (Math.round((Math.random()*3)+1))
		$suff = '';
		if (i % 2 == 0) 
			$suff = 'neg';
		$imgs.eq(i-1).addClass('deg' + $random_deg + $suff);
	}
	
	$("#photo_stack")
	.delegate('img', 'click', function() {
		$this = $(this);
///		alert($this.attr('caption'));
		if ($this.hasClass('current')) {
			$('#caption').text($this.attr('caption'));
			$zi = $this.css('zIndex') - $imgCount;
			$this.addClass('animate');
			setTimeout(function() { $this.css('zIndex', $zi); }, 200);
			setTimeout(function() { $this.removeClass('animate'); }, 1000);
			$this.removeClass('current');
			if ($this.index() == 0) {
				$imgs.last().addClass('current');
			} else {
				$imgs.eq($this.index()-1).addClass('current');
			}
		}
	})
	.delegate('img', 'mouseenter', function() {
		if ($(this).hasClass('current')) {
			$(this).addClass('hover');
		}
	})
	.delegate('img', 'mouseleave', function() {
		$(this).removeClass('hover');
	});;
	/*
	end photo gallery elements 
	*/
	
	/* Navigation */
	/*
	make the slider look clickable
	*/
	$(".btn-slide").mouseover(function(){ 
	$(this).css("cursor", "pointer");
	});
	
	/*
	make the close button look clickable
	*/
	$(".overlayclose").mouseover(function(){ 
	$(this).css("cursor", "pointer");
	});
	
	
	/* click functions */
		/* click functions */
	$(".overlayclose").click(function(){  
		$(this).parent().fadeOut('slow');
		$('#overlaybg').fadeOut('slow');
	}); 
	
	
	$(".btn-slide").click(function(){  
		$("nav").slideToggle("slow");  
		$(this).toggleClass("active");
		$(this).text(($(this).hasClass('active') ? 'Close Menu ↑' : 'Open Menu ↓'));
	});    
	
	$("#sitelinks a").click(function(e){  
	
		if ($(this).attr('class') != ""){
			
			$(".step").slideToggle("slow");
			var where = "#" + $(this).attr('class');
			$(where).slideToggle("slow");
			$('#steps').slideToggle("slow");
			if (jQuery.browser.msie) { 
			$(where).css('display','block');
			}
			e.preventDefault();
		}
	});   

	$("#about a").click(function(e){  
	
		if ($(this).attr('class') != ""){
			
			$(".step").slideToggle("slow");
			var where = "#" + $(this).attr('class');
			$(where).slideToggle("slow");
			$('#steps').slideToggle("slow");
			if (jQuery.browser.msie) { 
			$(where).css('display','block');
			}
			e.preventDefault();
		}
	}); 

	$("#imagelinks a").click(function(e){  
	
		if ($(this).attr('class') != ""){
			
			$(".step").slideToggle("slow");
			var where = "#" + $(this).attr('class');
			$(where).slideToggle("slow");
			$('#steps').slideToggle("slow");
			if (jQuery.browser.msie) { 
			$(where).css('display','block');
			}
			e.preventDefault();
		}
	});  
	
	
	$(".return").click(function(e){  
		$('#steps').slideToggle("slow");
		$(".step").slideToggle("slow");
		$(this).parent().slideToggle("slow");
		if (jQuery.browser.msie) { 
			$('.sites').css('display','none');
			$('.projects').css('display','none');
		}
				e.preventDefault();
	});   
	
	/*
	handle the navigation
	*/
	$(function() {
		/*
		number of fieldsets
		*/
		var fieldsetCount = $('.step').length;
	
		/*
		current position of fieldset / navigation link
		*/
		var current 	= 1;
		
		/*
		sum and save the widths of each one of the fieldsets
		set the final sum as the total width of the steps element
		*/
		var stepsWidth	= 0;
		var widths 		= new Array();
		var heights 		= new Array();
		$('#steps .step').each(function(i){
			var $step 		= $(this);
			widths[i]  		= stepsWidth;
			stepsWidth	 	+= $step.width();
			heights[i]      = ($(this).height() + 10);
		});
		$('#steps').width(stepsWidth);
	
		/*
		when clicking on a navigation link the form slides to the corresponding fieldset
		*/
		$('nav a').bind('click',function(e){
			var $this	= $(this);
			var prev	= current;
			$this.closest('ul').find('li').removeClass('selected');
			$this.parent().siblings().removeClass('active');
			$this.parent().addClass('selected');
			/*
			store the position of the link in the current variable	
			*/
			current = $this.parent().index() + 1;
			
			/*
			If looking at a website and user clicks the menu, disable the site display and jump to the correct location
			*/		
			$('.sites').each(function(index){
				if($(this).css('display') != 'none'){
					$(".step").slideToggle("slow");
					$(this).css('display','none');
				}
			});

			/*
			If looking at a project and user clicks the menu, disable the site display and jump to the correct location
			*/		
			$('.projects').each(function(index){
				if($(this).css('display') != 'none'){
					$(".step").slideToggle("slow");
					$(this).css('display','none');
				}
			});
	
			/*
			Make the nav show which page we are one
			*/
			$(this).parent().addClass('active');
			
			/*
			animate / slide to the next or to the corresponding
			fieldset.
			*/
			$('#steps').stop().animate({
				marginLeft: '-' + widths[current-1] + 'px',
				height: heights[current-1] + 'px'			
			},1500);

			e.preventDefault();
			
		});


	});
	



});