/**TODO: 
 * opacity on selected project is not correct when selected with side menu
 * scrollTo project when selected
 */


var lastShown = "none";
var showns = [];
var open = false;
var lastClickedEntry = "none";
var projects = [];

$(document).ready(function() {
	listProjects();
	setGrid();
	setSideMenu();
	hideUnders();
	addRulers();
	//debuggy();
});

//drop shadows, not used in jack2.1
function placeShadows(){
	var topVal = 0;
	var leftVal = 0;
	$('.grid .grid_entry').each(function(){
		topVal = $(this).position().top + 20;
		leftVal = $(this).position().left + 20;
		$(this).after("<div class='shadow' style='top:" + topVal +  "px; left:" + leftVal + "px; z-index: -10;'></div>");
		$('#debug').append("   " + leftVal + "|" + topVal);
	});
}

function listProjects(){
	projects = [
	            'mp3', 
	            'monster',
	            'floor',
	            'festuge',
	            'mimo',
	            'model',
	            'bachelor',
	            'apc',
	            'caketank',
	            'designteori',
	            'oplevelse'
	            ];
}

function addRulers(){
	$(".blurb_left").append("<hr/>");
	$(".blurb_right").append("<hr/>");
}

function setGallery(id){
	$(id).slideView();
}

//opening and closing of projects
function openEntry(){
	
		//document.title = "jackord.com | " + $(this).attr('id');
		var underID = "#under_" + $(this).attr('id');
		var galleryID = "#gallery_" + $(this).attr('id');
		
		//first time any project is chosen
		if(lastShown == 'none'){
			//set pointer in side menu - doesn't work when going to about page and back again so removed
			//$('.side_menu_pointer').css('background', "url('images/side_menu_pointer.png')");
			
			//grid stuff
			open = true;
			fadeOthers(this);
			$(underID).slideToggle(700, function(){
				if(showns.indexOf(galleryID) == -1){
					setGallery(galleryID);
					showns.push(galleryID);
				}
				scrollToProject(underID);
			});
			
		//not first time any project is chosen
		} else{ 
			//A open, B clicked
			if(underID != lastShown && open){
				open = true;
				fadeOthers(this);
				$(lastShown).fadeToggle(80, function(){
					$(underID).fadeToggle(350);
					
					//first time a project is opened
					if(showns.indexOf(galleryID) == -1){				
						setGallery(galleryID);
						showns.push(galleryID);
					}
					scrollToProject(underID);
				});
			//A clicked again
			} else if(underID == lastShown){
				if(open){
					open = false;
					showAll();
					$(underID).slideToggle(500);
				}
				else if(!open){
					open = true;
					fadeOthers(this);
					$(underID).slideToggle(500, function(){
						scrollToProject(underID);
					});
				}
				
			}
			//A closed again, B clicked
			else if(underID != lastShown && !open){
				open = true;
				fadeOthers(this);
				$(underID).slideToggle(500, function(){
					//if first time opening B
					if(showns.indexOf(galleryID) == -1){	
						setGallery(galleryID);
						showns.push(galleryID);
					}
					scrollToProject(underID);
				});
			}
			
		}
		
		lastShown = underID;
		lastClickedEntry = underID.substring(7, underID.length); //removes the "#under_" part, used in mouseleave
		
		placePointer(lastClickedEntry);
}

//place the menu pointer at correct menu entry
function placePointer(id){
	var pointerPos = 82 + 38*projects.indexOf(id);
	$('.side_menu_pointer').animate({top: pointerPos}, 500);
}

function scrollToProject(id){
	//scroll to project
	var id_without_under = id.substring(7, id.length);
	//speed set according to position in array which indicates distance to project on page
	var speed = (parseInt(projects.indexOf(id_without_under)/4))*200 + 200;
	$.scrollTo(id, speed);
}

function setSideMenu(){
	//click on side menu items
	$('.side_menu .side_menu_entry').click(openEntry);
	
	//mouse over/leave on side menu
	$('.side_menu .side_menu_entry').mouseenter(function(){
		$(this).animate({opacity: '0.8'}, 100);
	});
	
	$('.side_menu .side_menu_entry').mouseleave(function(){
		$(this).animate({opacity: '1.0'}, 300);
	});
}

function setGrid(){
	//click on grid entries
	$('.grid .grid_entry').click(openEntry);
	
	//mouse over/leave on grid
	$('.grid .grid_entry').mouseenter(function(){
		$(this).animate({opacity: '0.8'}, 100);
	});
	
	$('.grid .grid_entry').mouseleave(function(){
		if(!open) $(this).animate({opacity: '1.0'}, 300);
		else if(open){
			//if not the selected one fade out on mouse leave
			if($(this).attr('id') != lastClickedEntry) $(this).animate({opacity: '0.4'}, 100);
			//if selected project stay opac 1.0 on mouse leave
			else $(this).css({opacity: '1.0'}); 
		} 
	});
}

function showAll(){
	$('.grid .grid_entry').each( function(){
		$(this).animate({opacity: '1.0'}, 200);
	});
}

function fadeOthers(selected){
	$('.grid .grid_entry').each( function(){
		if($(this).attr('id') != $(selected).attr('id')){
			$(this).animate({opacity: '0.4'}, 200);
		} else{
			$(this).css({opacity: '1.0'});
		}
	});
	$(selected).css({opacity: '1.0'});
}

function hideUnders(){
	//TODO: for each under - maybe not needed if all same class? or finds first one or something? seems to work now
	$('.under_content').hide();
}

function debuggy(){
	$("#debug").html('debug');
	alert("hej");
}