// Stop the flash of hidden items
document.documentElement.className = 'js';

var animations = new Array();
var animation_index = new Array();
var cat_array=new Array();
var game_index = new Array();
var games = new Array();
var web = new Array();
var web_index = new Array();
var display = '';
var display_from = 1;
var length = 0;
var cur_img = '';
if(typeof(c_project) == undefined){
	var c_project = '';
}


/**
* We use the initCallback callback
* to assign functionality to the controls
*/
function mycarousel_initCallback1(carousel) {
	jQuery('.web_pager a').bind('click', function() {
		//carousel.startAuto();
		var pos = jQuery(this).attr('rel') != '' ? jQuery(this).attr('rel') : 1 ;
		carousel.scroll(jQuery.jcarousel.intval(pos));
		return false;
	});
};
function mycarousel_initCallback2(carousel) {
	jQuery('.game_pager a').bind('click', function() {
		//carousel.startAuto();
		var pos = jQuery(this).attr('rel') != '' ? jQuery(this).attr('rel') : 1 ;
		carousel.scroll(jQuery.jcarousel.intval(pos));
		return false;
	});
};
function mycarousel_initCallback3(carousel) {
	jQuery('.animation_pager a').bind('click', function() {
		//carousel.startAuto();
		var pos = jQuery(this).attr('rel') != '' ? jQuery(this).attr('rel') : 1 ;
		carousel.scroll(jQuery.jcarousel.intval(pos));
		return false;
	});
};

// Category Navigation
function select_category(cat){
	$('.mycarousel_'+cat[0]).slideUp('fast'); 
	$('.mycarousel_'+cat[1]).slideUp('fast');
	$('.mycarousel_'+cat[2]).slideDown('fast');	
	$('ul.p_nav').removeClass('projects_nav_active_'+cat[0]);
	$('ul.p_nav').removeClass('projects_nav_active_'+cat[1]);
	$('ul.p_nav').addClass('projects_nav_active_'+cat[2]);
}

// Start each carousel
function start_carousel(display_from){
	for(i=1;i<4;i++){
		jQuery('.mycarousel'+i).jcarousel({ start: display_from, scroll : 8, initCallback: window["mycarousel_initCallback"+i], buttonNextHTML: null, buttonPrevHTML: null});
	}
}

// Calculations to add the pager for games
function add_pager(length, category){
	//length = 25;
	var number_of_items = Math.ceil(length/8);
	//console.log('items: '+number_of_items);
	if(number_of_items>1){
		for(i=0; i<number_of_items; i++){
			start_here = (i==0?1:((i*8)+1));
			$('.'+category).append('<a href="#" class="'+category+'_'+i+' '+((display_from==(start_here))?(' active_'+i):'')+'" rel="'+(start_here)+'"><span>'+(i+1)+'</span></a>');
		}
	}
}
function change_active(parent, element){// ie: 'web_pager', $(this).attr('class')
	if($('.'+element).attr('rel')=='')
		var rel = 0; 
	else
		var rel = $('.'+element).attr('rel');
	
	switch(rel){
		case '1': $('.'+element).addClass('active_0'); break;
		case '9': $('.'+element).addClass('active_1'); break;
		case '17': $('.'+element).addClass('active_2'); break;
		case '25': $('.'+element).addClass('active_3'); break;
		case '33': $('.'+element).addClass('active_4'); break;
		case '41': $('.'+element).addClass('active_5'); break;
		default:
	}
}

$(document).ready(function (){
	$('.thumb').css('display','block');
	if (typeof c_project === 'undefined'){
		//var c_project = '';
		//alert('');
	}
	// Start web
	($('ul.web').children('li.thumb')).each(function(index){
		url = $(this).children('a').attr('href');
		web[url]=index+1;
		if(c_project==url){
			display = 'web';
			display_from = Math.floor(index/8)*8+1;
		}
		web_index[index]=url;
	});
	length = 8-(web_index.length%8);
	
	add_pager(web_index.length, 'web_pager', display_from);
	
	if(length!=8)
		for(i=0;i<length;i++)
			$('ul.web').append('<li class="thumb"><div style="width:90px;height:90px;"></div></li>');
	
	// End web
	
	// Start games	
	/*($('ul.games').children('li.thumb')).each(function(index){
		
		url = $(this).children('a').attr('href');
		games[url]=index+1;
		if(c_project==url){
			display = 'games';
			display_from = Math.floor(index/8)*8+1;
		}
		console.log(game_index[index]=url);
	});
	length = 8-(game_index.length%8);
	console.log('length:= '+game_index.length);
	//Add pager
	add_pager(game_index.length, 'game_pager', display_from);
				
	if(length!=8)
		for(i=0;i<length;i++){
			$('ul.games').append('<li class="thumb"><div style="width:90px;height:90px;"></div></li>');
			console.log('added: '+i);
		}*/
	($('ul.games').children('li.thumb')).each(function(index){
		url = $(this).children('a').attr('href');
		web[url]=index+1;
		if(c_project==url){
			display = 'games';
			display_from = Math.floor(index/8)*8+1;
		}
		game_index[index]=url;
	});
	length = 8-(game_index.length%8);
	
	add_pager(game_index.length, 'game_pager', display_from);
	
	if(length!=8)
		for(i=0;i<length;i++)
			$('ul.games').append('<li class="thumb"><div style="width:90px;height:90px;"></div></li>');
	// End games
	
	// Start animation
	($('ul.animation').children('li.thumb')).each(function(index){
		url = ($(this).children('a').attr('href'));
		animations[url]=index+1;
		if(c_project==url){
			display = 'animation';
			display_from = Math.floor(index/8)*8+1;
		}
		animation_index[index]=url;
	});
	length =8-(animation_index.length%8);
		
	//Add pager
	add_pager(animation_index.length, 'animation_pager', display_from);
	
	//console.log(animation_index.length+' animation_pager '+display_from)
	
	if(length!=8){
		for(i=0;i<length;i++){
			$('ul.animation').append('<li class="thumb"><div style="width:90px;height:90px;"></div></li>');
		}
	}
					
	$('.project_cat_1').click(function(){
		select_category(["3","2","1"]);
		$('.web .thumb').css('display','block');
		//$('.mycarousel1').css('left','0px');
	});               
	$('.project_cat_2').click(function(){
		select_category(["3","1","2"]);
		//$('.mycarousel2').css('left','0px');
		$('.games .thumb').css('display','block');
	});
	$('.project_cat_3').click(function(){
		select_category(["1","2","3"]);
		//$('.mycarousel3').css('left','0px');
		$('.animation .thumb').css('display','block');
		
	});
	//display_from = 1;	
	if(display=='games'){
		select_category(["3","1","2"]);
		//start_carousel(display_from);
		jQuery('.mycarousel1').jcarousel({ start: display_from, scroll : 8, initCallback: mycarousel_initCallback1, buttonNextHTML: null, buttonPrevHTML: null});
		jQuery('.mycarousel2').jcarousel({ start: display_from, scroll : 8, initCallback: mycarousel_initCallback2, buttonNextHTML: null, buttonPrevHTML: null});
		jQuery('.mycarousel3').jcarousel({ start: display_from, scroll : 8, initCallback: mycarousel_initCallback3, buttonNextHTML: null, buttonPrevHTML: null});
		$('.mycarousel_1, .mycarousel_3').css('display','none');
		$('.mycarousel_2').css('display','block');
	}
	else if(display=='animation'){	
		select_category(["1","2","3"]);
		//start_carousel(display_from);
		jQuery('.mycarousel1').jcarousel({ start: display_from, scroll : 8, initCallback: mycarousel_initCallback1, buttonNextHTML: null, buttonPrevHTML: null});
		jQuery('.mycarousel2').jcarousel({ start: display_from, scroll : 8, initCallback: mycarousel_initCallback2, buttonNextHTML: null, buttonPrevHTML: null});
		jQuery('.mycarousel3').jcarousel({ start: display_from, scroll : 8, initCallback: mycarousel_initCallback3, buttonNextHTML: null, buttonPrevHTML: null});
		$('.mycarousel_1, .mycarousel_2').css('display','none');
		$('.mycarousel_3').css('display','block');
	}
	else{
		//alert(c_project);
		
		if(games[c_project]=='')
			games[c_project] = 1;
		
		//start_carousel(display_from);	
		jQuery('.mycarousel1').jcarousel({ start: display_from, scroll : 8, initCallback: mycarousel_initCallback1, buttonNextHTML: null, buttonPrevHTML: null});
		jQuery('.mycarousel2').jcarousel({ start: display_from, scroll : 8, initCallback: mycarousel_initCallback2, buttonNextHTML: null, buttonPrevHTML: null});
		jQuery('.mycarousel3').jcarousel({ start: display_from, scroll : 8, initCallback: mycarousel_initCallback3, buttonNextHTML: null, buttonPrevHTML: null});
		select_category(["3","2","1"]);
		$('.mycarousel_2, .mycarousel_3').css('display','none');
		$('.mycarousel_1').css('display','block');
	}

	if(c_project != ''){
		// Drop the thumbnail by 15px for the active one
		//($('a[href$="'+c_project+'"]').parent(['li'])).addClass('active_project');
		
		// Make the thumbnail larger for the active one
		//$('a[href$="'+c_project+'"]').children('img').attr('width','95');
		//c
		
		//Active color image
		//console.log($('a[href$="'+c_project+'"]').children('img').attr('hover'));
		cur_img = $('a[href$="'+c_project+'"]').children('img').attr('src');
		$('a[href$="'+c_project+'"]').children('img').attr('src','assets/images/thumbnails/'+$('a[href$="'+c_project+'"]').children('img').attr('hover'));
	}
	
	// Animate the thumb when hover, if not active
	$(".thumb").hover(
		function(){
			// Make the thumbnail move up
			if($(this).hasClass('active_project') == false/* && $(this).children('a').children('img').css('padding-top')!=0*/){
				//$(this).children('a').children('img').css('padding-top','0');
				cur_img = $(this).children('a').children('img').attr('src');
				$(this).children('a').children('img').attr('src','assets/images/thumbnails/'+$(this).children('a').children('img').attr('hover'));
			}
		},
		function(){
			if($(this).hasClass('active_project') == false){
				//console.log(cur_img);
				//$(this).children('a').children('img').css('padding-top','15px');
				$(this).children('a').children('img').attr('src',cur_img);
				
			}
		}
	);
	
	// Category onclick events
	$('.web_pager a').click(function(){
		for(i=0;i<5;i++)
				$('.web_pager a').removeClass('active_'+i);
		change_active('web_pager', $(this).attr('class'));
		
	});
	$('.animation_pager a').click(function(){
		for(i=0;i<5;i++)
				$('.animation_pager a').removeClass('active_'+i);
		change_active('animation_pager', $(this).attr('class'));
		
	});
	$('.game_pager a').click(function(){
		for(i=0;i<5;i++)
				$('.game_pager a').removeClass('active_'+i);
		change_active('game_pager', $(this).attr('class'));
		
	});
});