var sites = true;
var index = 0;
var lefty = 0;

var breakingPoint = 13;
var totalThumbs = 25;

$(function(){
	/* set the IDs for the <dt>s */
	$('.containerArea dt').each(function(i){
		$(this).attr("id", i);
	});

	$('.image').hover(function(e){
		$('.clickForDetails').show();
		//$('.clickForDetails').mousemove();

	}, function(){
		$('.clickForDetails').hide();		
	});

	$('.image').mousemove(function(event){
		$('.clickForDetails').css("left", event.pageX + 20);
		$('.clickForDetails').css("top", event.pageY - 20);
	});

	$('.image').click(function(){
		$('.clickForDetails').hide();
		$('.clickToLaunchSite').hide();
		$('.grid').hide();
		$('.gridEmail').hide();
		$('.portfolio').fadeIn();
		$('.gridView').fadeIn();
		$('.portfolio dt').hide();
		//get the index and show the selected one
		//alert($('.piece').index($(this).parent()));
		
		//$('.portfolio dt#' + $('.piece').index($(this).parent())).fadeIn();
		$('.portfolio dt').show();

		//we need to teleport to the correct block
		index = 749*$('.piece').index($(this).parent());
		$('.containerArea').css({"left" : "-" + (index) + "px"});

		$('.next').show();
		$('.prev').show();


		if(index/749 == breakingPoint || index/749 == totalThumbs) $('.next').hide();
		if(index/749 == 0 || index/749 == (breakingPoint + 1)) $('.prev').hide();
		

		//$('.piece').hide();
	});


	$('.btn').hover(function(){
		$(this).css("text-decoration", "underline");
	}, function(){
		$(this).css("text-decoration", "none");
	});

	$('.piece div').click(function(){
		$('.clickForDetails').hide();
		$('.clickToLaunchSite').hide();
		$('.grid').hide();
		$('.gridEmail').hide();
		
		$('.gridView').fadeIn();
		$('.portfolio dt').hide();
		//get the index and show the selected one
		//alert($('.piece').index($(this).parent()));
		
		//$('.portfolio dt#' + $('.piece').index($(this).parent())).fadeIn();
		$('.portfolio dt').show();

		//we need to teleport to the correct block
		index = 749*$('.piece').index($(this).parent());
		//alert(index);
		//alert(parseInt($('.piece').index($(this).parent())));
		$('.containerArea').css({"left" : "-" + (index) + "px"});
		

		$('.portfolio').fadeIn();

		$('.next').show();
		$('.prev').show();


		if(index/749 == breakingPoint || index/749 == totalThumbs) $('.next').hide();
		if(index/749 == 0 || index/749 == (breakingPoint+1)) $('.prev').hide();
	});

	$('.gridView').click(function(){
		$('.portfolio').hide();
		$('.gridView').hide();
		$('.piece').hide();
		if(sites){
			$('.grid').show();
			$('.grid .piece').each(function(i){
				$(this).fadeIn((i + 1)*100);
			});	
		}
		else{
			$('.gridEmail').show();
			$('.gridEmail .piece').each(function(i){
				$(this).fadeIn((i + 1)*100);
			});
		}
		$('.next').hide();
		$('.prev').hide();
		
	});

	//on start up
	$('.grid .piece').each(function(i){
		$(this).fadeIn((i + 1)*100);
	});

	$('.web').click(function(){
		sites = true;
		$('.portfolio').hide();
		$('.grid').show();
		$('.gridEmail').hide();
		$('.gridView').hide();
		$('.piece').hide();
		$('.grid .piece').each(function(i){
			$(this).fadeIn((i + 1)*100);
		});
		$('.next').hide();
		$('.prev').hide();

	});
	
	$('.web').hover(function(){
		$(this).addClass("webHover");
	}, function(){
		$(this).removeClass("webHover");
	});

	$('.email').hover(function(){
		$(this).addClass("emailHover");
	}, function(){
		$(this).removeClass("emailHover");
	});

	$('.gridView').hover(function(){
		$(this).addClass("gridViewHover");
	}, function(){
		$(this).removeClass("gridViewHover");
	});

	$('.email').click(function(){
		sites = false;
		//$('.clickToLaunchSite').html("Click to Launch Site"
		$('.portfolio').hide();
		$('.grid').hide();
		$('.gridEmail').show();
		$('.gridView').hide();
		$('.piece').hide();
		$('.gridEmail .piece').each(function(j){
			$(this).fadeIn((j + 1)*100);
		});
		$('.next').hide();
		$('.prev').hide();

	});

	$('.macbook').hover(function(event){
		$('.clickToLaunchSite').removeClass("red");
		
		

		if($(this).parent().hasClass('offline')){
			$('.clickToLaunchSite').html('Website is offline');
			$('.clickToLaunchSite').addClass("red");

		}
		else{
			$('.clickToLaunchSite').html("Click to Launch Site");
			if(!sites){
			$('.clickToLaunchSite').html("Email temporarily unavailable");
			}
			else{
				$('.clickToLaunchSite').html("Click to Launch Site");
			}
		}
		$('.clickToLaunchSite').css("left", event.pageX + 20);
		$('.clickToLaunchSite').css("top", event.pageY - 20);
		$('.clickToLaunchSite').show();


		
	
	}, function(){
		$('.clickToLaunchSite').hide();
	});

	$('.macbook').mousemove(function(event){
		$('.clickToLaunchSite').css("left", event.pageX + 20);
		$('.clickToLaunchSite').css("top", event.pageY - 20);
	});

	$('.next').click(function(){
		$('.containerArea').animate({"left" : "-=749"}, 500);
		lefty = $('.containerArea').css("left").replace("px","")/749;
		//alert(lefty);
		if(lefty == -(breakingPoint-1) || lefty == -(totalThumbs-3)) {
			$(this).hide();
		}
		else{
			$('.prev').show();
		}
	});

	$('.prev').click(function(){
		$('.containerArea').animate({"left" : "+=749"}, 500);
		lefty = $('.containerArea').css("left").replace("px","")/749;
		//alert(lefty);
		if(lefty == -(breakingPoint+1) || lefty == -1 || lefty == -(breakingPoint+2)){
			$(this).hide();
		}
		else{
			$('.next').show();
		}
	});

	$('.next').hover(function(){
		$(this).addClass('nextHover');
	}, function(){
		$(this).removeClass('nextHover');
	});

	$('.prev').hover(function(){
		$(this).addClass('prevHover');
	}, function(){
		$(this).removeClass('prevHover');
	});

});