// Static vars
var SOURCE_DIV_REFERENCE = "#project-details-wrapper";
var FADE_OPACITY = 0.2;
var TRANSITION_DELAY = 5000;
var FADE_DELAY = 1000;

// classvars
var _current_category_id = "all";
var _current_carousel_image =0;
var _current_button_index =0;
var _carousel_interval = 0;

$(document).ready(function() {



$("#images li").hover(function() {
    $(this).addClass("hover")
}, function() { $(this).removeClass("hover") }
    )


    $(".buttons li").hover(function() {
        $(this).addClass("hover")
        }, function() { $(this).removeClass("hover") }
    )
    
    // set defaults from url
    if (!isNaN(parseInt(location.hash.replace("#", "")))) {

        _current_category_id = location.hash.replace("#", "")
    }
        var li = $(".buttons li a[rel='" + _current_category_id + "']").parent("li")
        if (li.length > 0) {
            _current_button_index = $(".buttons li").index(li);
        }

   
    setOpacities()
    setBtnClasses();

    // setup the button events
    $('.buttons li a').click(function(event) {
        event.preventDefault();
        _current_category_id = $(event.target).attr("rel");
        _current_button_index = $(".buttons li a").index(this);
        setOpacities();
        setBtnClasses();

    });

});

function initFancyBox(){

	// setup the fancybox image events
	$("#images a").fancybox(
	{
		'showNavArrows':false,
		'ajax':{dataFilter:function(data)
		{
			return($(data).find(SOURCE_DIV_REFERENCE).html());			
		}},
		'onComplete':onContent,
		'onCleanup':onCleanup,
		'overlayColor':'#ffffff'
	});
	}

/**
* if current project id is set to all, then animate all icons to full visiblity and enable lightbox and hover
* else, loop through them, if the current project id is set to one in the icon's array then
* animate to visible and enable lightbox and hover, otherwise, animate to lower opacity and disable lightbox and hover
*/
function setOpacities()
{
$('#images a').unbind("click","hover")

	//console.log(_current_category_id);
	if(_current_category_id =="all" || _current_category_id == undefined)
	{
		$('#images a').animate({opacity:1});
		$('#images a').click(function(e) {
			e.preventDefault()
			$.fancybox({
				'showNavArrows':false,
				'ajax':{dataFilter:function(data)
				{
					return($(data).find(SOURCE_DIV_REFERENCE).html());			
				}},
				'href':this.href,
				'onComplete':onContent,
				'onCleanup':onCleanup,
				'overlayColor':'#ffffff'
			});
			})
			$('#images a').hover(function(){
				$("span",this).css({display:""})
				$(this).css({cursor:"pointer"})
			
			})
	}else
	{
		$('#images a').each(function()
		{
			
			var tmpArray = $(this).attr("rel").split(',');
			
			if($.inArray(String(_current_category_id), tmpArray)>-1)
			{
				$(this).animate({opacity:1});
				$(this).click(function(e) {
					e.preventDefault()
					$.fancybox({
						'showNavArrows':false,
						'ajax':{dataFilter:function(data)
						{
							return($(data).find(SOURCE_DIV_REFERENCE).html());			
						}},
						'href':this.href,
						'onComplete':onContent,
						'onCleanup':onCleanup,
						'overlayColor':'#ffffff'
					});
					})
				$(this).hover(function(){
					$("span",this).css({display:""})
					$(this).css({cursor:"pointer"})
					
				})
			}else
			{
				$(this).animate({opacity:FADE_OPACITY});
				$(this).hover(function(){
					$("span",this).css({display:"none"})
					$(this).css({cursor:"default"})
					
				})
				$(this).click(function(e){
					$.fancybox.cancel()
					e.preventDefault()
					return false;
				})
			}			
			
		});		
	}
}


/**
*
*/
function setBtnClasses()
{
	$('.buttons li').each(function(index)
	{
		if(index == _current_button_index)
		{
			
			$(this).addClass("active-btn");	
		}else
		{
			$(this).removeClass("active-btn");	
		}
	});
}


/*
* Called when the AJAX content is loaded
*/
function onContent()
{
	_current_carousel_image=0;
	$('#project-details').children().not('img').wrapAll("<div id='left-col'>");
	// wrap up our img elements for better styling
	var $imgs = $('#project-details img')
	//get the tallesxt image's height (only 4 images, rest disgarded)
	var maxheight = 0
	$imgs.each(function(i){
		if ((i<4) && ($(this).height() > maxheight)){maxheight = $(this).height()}
	})
	var showThumbnails = ($imgs.length>1)

	//remove them from the HTML
	$imgs.remove()
	// re-add the top 4 images, set the height of the container and wrap it.
	$imgs =$("<div id='right-col'></div>").append($("<div id='image-wrapper'></div>").css({height:maxheight}).append($imgs.filter(':lt(4)')))
$('#project-details').append($imgs);
	
	setImage(0);	
	
	
	_carousel_interval = setInterval(setImage, TRANSITION_DELAY, null);
	if (showThumbnails){
		outputThumbnails();
	}
}



function setImage(p_carousel_index)
{		
		// if the argument is set, then set current carousel id to it
		if(p_carousel_index != null){_current_carousel_image = p_carousel_index;}		
		// if it tries to access an index greater than the max number of images, rest it to 0
		if(_current_carousel_image>=$('#project-details #right-col img').length){_current_carousel_image =0;}
		
		// loop through each img, if it's the one we want to display
		// set to animate in, set all others to animate out.
		$('#project-details #right-col img').each(function(index)
	    {
		   if(index == _current_carousel_image)
		   {
			   $(this).animate({'opacity':1}, FADE_DELAY);
		   }else
		   {
			   $(this).animate({'opacity':0},FADE_DELAY);
		   }
	    });
		
		_current_carousel_image++;
}



function onCleanup()
{
	clearInterval(_carousel_interval);
	_current_carousel_image =1;
	_carousel_interval = 0;
}


/**
* loops through large images and outputs a thumbnail for each one
* in the project-thumbs div which it also outputs.
*/
function outputThumbnails()
{
	$('#project-details').append("<div id='project-thumbs'></div>");
	
	$('#project-details #right-col img').each(function(index)
    {
		$('#project-thumbs').append('<img src='+$(this).attr('src').replace('440','200')+' alt="project 1" />');
		$('#project-thumbs img:eq('+index+')').click(function(test)
		{
			var index = $('#project-thumbs img').index(this);
			setImage(index);
		});
	});

}