// Michael Sparandara
// Portfolio Website


// Stores whether portfolio is showing overview page(s)
var main = true;

// opacity to fade boxes
var fade_val = .45;

// store previous hash value
var last_hash = ''; 


$(document).ready(function(){
	// hide all proj boxes
	$(".proj-box").hide();
	
	// hide proj next/prev nav
	$("#proj-nav").hide();
	
	// create div wrapper around images and add caption
	$('.image').wrap('<div class="image-wrap" />').parent().append(function() {
		return '<div class="image-caption">' + $(this).children('.image').attr('alt') + '</div>'
	});
	
		
	// set title of image to alt 
	$('.image').each(function(){
		$(this).attr('title', $(this).attr('alt'));
	});
	
	// fix learn more links for IE
	$('.learn-more').css('opacity', '0');
		
	$('.over-box-wrap').hover(

	  function () {
	  	// mouse over
	  	
	    $(this).find(".over-box-fg").stop(true,true).fadeTo('fast', 0);
	    $(this).find(".learn-more").stop(true,true).fadeTo('fast', 1);
//  	    $(this).find(".over-box-bar").stop(true,true).fadeTo('fast', 1);
  	    $(this).find(".over-box-bar").css('background-color', "#D3007B");	    
  	    
	  },
	  function () {
		// mouse out

		$(this).find(".over-box-fg").stop(true,true).fadeTo('fast',.85);
	    $(this).find(".learn-more").stop(true,true).fadeTo('fast', 0);
//	    $(this).find(".over-box-bar").stop(true,true).fadeTo('fast', 0);
  	    $(this).find(".over-box-bar").css('background-color', "#999");	    

	    
	  }
	);


	$('.proj-group').hover(
	  function () {
	  	if (!main) {
		  	$(this).stop(true,true).fadeTo("fast", 1); 
		}
	  },
	  function () {
	  	if (!main) {
		 	$(this).stop(true,true).fadeTo("fast", fade_val); 
		}

	  }
	);

	
	checkHash();
	
	// chech page's hash
  	setInterval("checkHash()", 100);
	
	// register filter nav actions
//	$('#nav-all').click( function() {
//		filter('all');
//	});
//	
	// add 'cycle' class to all on first load
	$(".proj-box").addClass('cycle');
	
	// Not currently used...
	//setFancyBox();

});



function setFancyBox(){
	$("a.fancybox").fancybox({
		'speedIn'		:	300, 
		'speedOut'		:	200, 
		'overlayShow'	:	true,
		'transitionIn'  :   'elastic',
		'titlePosition'	:	'over',
		'onComplete'	:	function() {
				$("#fancybox-wrap").hover(function() {
					$("#fancybox-title").show();
				}, function() {
					$("#fancybox-title").hide();
				});
		}
		
		
	});
	
}

function filter( show ){

	// hide project groups
	$('.proj-group').hide();

	// hide all proj boxes
	$(".proj-box").hide();
	
	// set main view true
	main = true;
			
	// hide proj next/prev nav
	$("#proj-nav").hide();
	
	
	// remove nav highlight
	//$('#page-nav a').removeClass('current-nav');
	
	
	switch (show) {

		// show all
		case "all": 
			$('#featured-projects').show(); 
			$('#all-projects').show(); 
			$('#nav-all').addClass('current-nav');
			
			$(".proj-box").addClass('cycle');
			break;
		
		// default to all		
		default:
			$('#featured-projects').show(); 
			$('#all-projects').show(); 
			$('#nav-all').addClass('current-nav');
			
			$(".proj-box").addClass('cycle');
			break;
	}

	$(".proj-group:visible").fadeTo('slow', 1);	

}


function nextProj(){
	if ( $(".proj-box:visible").nextAll('.cycle').length == 0) {
		show( $(".cycle").first().attr('id') );
	} 
	
	else {
		show( $(".proj-box:visible").nextAll('.cycle').attr('id') );		
	}
	
}

function prevProj(){
	if ( $(".proj-box:visible").prevAll('.cycle').length == 0) {
		show( $(".cycle").last().attr('id') );
	}
	else {
		show( $(".proj-box:visible").prevAll('.cycle').attr('id') );
	}
}

function show(proj, type){
	// !! not using type currently
		
	// hide proj next/prev nav
	$("#proj-nav").show();
	
	$(".proj-box").hide();
	
	// if project doesn't exist, go to all
	if ( $("#" + proj).size() == 0 ){
		filter('all');
		return;
	}

		
	if (main) {
		// fade in first time
		$("#" + proj).fadeIn(400);
	}
	
	else {
		$("#" + proj).show();
	}
	
	if (!main) {
		$(".proj-group:visible").fadeTo('slow', fade_val);	
	}
	
	// lazy load images
	loadImages("#" + proj);
	
	//$("#" + proj).show('slide', {direction: 'left'}, 1000);	
	//$("#proj_overview").fadeTo('slow', .2);
	
	// no longer just viewing overviews
	main = false;
	
	var nav_offset = $('#proj-nav').offset();
	
	if ( $(window).scrollTop() > (nav_offset.top - 20)) {
		$(window).scrollTop( nav_offset.top - 20 );
		//$(window).animate({scrollTop: nav_offset.top - 20}, 500);
	}
	
	// transition duration
	var dur = 500;
	
	// set hash
	window.location.hash = '/' + proj;
	last_hash = window.location.hash.substring(2);
	
	
}



function checkHash(){
	// if hash is set
	if (window.location.hash){
		// if hashes are the same, do nothing		
		if (window.location.hash.substring(2) == last_hash){
			return;
		}
		
		// otherwise this is a change of nav	
		last_hash = window.location.hash.substring(2);
		
		// split hash
		var hash_split = window.location.hash.substring(2).split("/",1);
				

		// if project is specified, show it
		if (hash_split[0]) {
			main = false;
			show(hash_split[0]);
		}
		
		else {
			main = true;
			filter('all');
		}
		
	}
	
	// set initial hash
	else {
		last_hash = '#/';
		window.location.hash = '#/';
		
	}
	
}


// IMAGE LOADER //
// Modified from: http://blog.realmofzod.com/2009/04/09/asynchronous-image-loading-with-jquery/

var gLoadSpinnerUrl =  '../images/ajax-loader.gif';
var gFailImage =  '../images/blank.gif';

// added function — adds images per project
function loadImages(project) {
    $(project + ' .image:not(:has(img))').each(function(){       
		//alert('img');
        var loader = $(this);
        loader.html('<img src="' + gLoadSpinnerUrl + '"/>');
        loader.addClass('spinner');
        LoadThisImage(loader);
    });
}

// todo:
// lazy load other photos once user goes to a page

// supplied functions:

function LoadImage(pSelector, pCallback){
    var loader = $(pSelector);
    loader.html('<img class="spinner" src="' + gLoadSpinnerUrl + '"/>');
 
    LoadThisImage($(img), loader, pCallback);
}


function LoadAllImages(){
    $('.image').each(function(){       
        var loader = $(this);
        loader.html('<img src="' + gLoadSpinnerUrl + '"/>');
        LoadThisImage(loader);
    });
}

function LoadThisImage(loader, pCallback){
    image_src = loader.attr('src');
    img = new Image();
    $(img).hide();
    
 
    $(img).load(function() {
        cb_js = loader.get(0).getAttribute('onload');              
        onload_cb = function(){
            eval(cb_js);
        }       
 
        loader.html(this);
        loader.removeClass('loadable-image');
        loader.removeAttr('src');
        loader.removeAttr('onload');
        loader.removeClass('spinner');
        
        $(this).show(); 

        if (onload_cb){                
            onload_cb($(this));
        }              
        if (pCallback){
            cb = pCallback;
            cb($(this));
        }
    })
    .error(function() { $(this).attr('src', gFailImage).show(); })
    .attr('src', image_src)
    .show();
}