﻿$(document).ready( function(){
	
	// Initializing main-content height and change on window resize
	$('#main-content').css({"height": $(window).height()});
	
	function windowResized() {
		var winHeight = $(window).height();
		var currentBlockID = $("#menu li a.current").attr("href");
		if ($(currentBlockID).outerHeight() >  winHeight) {winHeight = $(blockID).outerHeight()-50; }
		$("#main-content").css({"height": winHeight});
	};
	
	// Hide all blocks first
	$('.block').css({"display": "none", "position": "absolute"});
	
	// Then bring first block in
	$('.block#home').css({"top": $(window).height(), "display": "block"});	
	$(".block#home").animate({"top": 0}, {"duration": 800, queue: false});
	
	// Some CSS properties needed when javascript is not turned off
	$('#navigation-content').css({width: '60px'});
	$("#navigation").css( {width: '59px'});
	$("#coin-slider").css( {'overflow': 'visible'});
	$("#navigation-content span").css( {'padding-left': '0'});

	// Navigation menu hover effect
	$('#navigation-content').hover( 
		function(){
			$("#navigation").stop().animate( {width: '239px'}, 400, 'swing');
			$(this).stop().animate( { width: '239px' }, 400, 'swing' );
		}, 
		function(){
			$("#navigation").stop().animate( {width: '59px'}, 400, 'swing');
			$(this).stop().animate( {width: '60px'}, 400, 'swing');			
			$('.rightangle').hide();			
		}
	);
	
	// Lavalamp effect for menu
	// Retrieve the selected item position and width
	var default_top = Math.round($('#menu li.selected').offset().top - $('#menu').offset().top);
	var default_height = $('#menu li.selected').height();
	
	$('#menu').append('<li class="leftangle"></li>');
	$('#menu').append('<li class="rightangle"></li>');
		
	// Set the starting position for the triangles
	$('.leftangle').css({ top: default_top, width: 7, height: default_height });
	$('.rightangle').css({ top: default_top, width: 7, height: default_height });
		
	// If mouseover the menu item
	$('#menu li').hover(function () {
			
		// get the position and height of the menu item
		var top = Math.round($(this).offset().top - $('#menu').offset().top);
		var height = $(this).height();
		 
		$('.rightangle').show();
		
		// set the floating triangles position and transition
		$('.rightangle').stop(false, true).animate( { top: top }, { duration:500 } );	
	});
		
	// If the mouse leave the menu, reset the floating triangle to the selected item
	$('#menu').mouseleave(function () {

		// retrieve the selected item position
		default_top = Math.round($('#menu li.selected').offset().top - $('#menu').offset().top);
		
		// set the floating triangle position and transition
		$('.rightangle').stop(false, true).animate({top: default_top},{duration:500});		
		
		$('.rightangle').hide();	
	});
	
	
	$('#menu li a').hover( 
		function(){
			$('span', this).animate( { 'padding-left': '10px' }, 400 );
		}, 
		function(){
			$('span', this).animate( { 'padding-left': '0px' }, 400 );	
		}
	);
	
	// On click remove the current block and bring the proper block
	$("#menu li a").click(function () {
		var top = Math.round($(this).offset().top - $('#menu').offset().top);
		$('.leftangle').stop(false, true).animate({top: top},{duration:500});
			
		// reset the selected item
		$('#menu li').removeClass('selected');	
			
		// select the current item
		$(this).addClass('selected');
		
		if ($(this).hasClass("current") == false) {
			takeCurrent("#menu li a.current");
			bringNext($(this));
		}
		return false;
	});

	function takeCurrent(menu_item1) {
		var currentBlockID = $(menu_item1).attr("href");
		$(currentBlockID).animate({"top": -$(currentBlockID).outerHeight()}, {"duration": 800, queue: false});
		$(menu_item1).removeClass("current");
	}

	function bringNext(menu_item) {
		var winHeight = $(window).height();
		$(menu_item).addClass("current");
		var blockID = $(menu_item).attr("href");
		$(blockID).css( { "top": $(window).height(), "display": "block" } );
		if ($(blockID).outerHeight() >  winHeight) { winHeight = $(blockID).outerHeight()+100; }
		$('#main-content').css( { "height": winHeight } );
		$(blockID).animate( { "top": 0 }, { "duration": 800, queue: false } );
	}

	// Slider initialization
	$('#coin-slider').coinslider();

	// Latest works photo effects
	$('.photolist em').each(function() { $(this).fadeTo(0, 0); });
	$('.photolist span').each(function() { $(this).fadeTo(0, 0); });
	
	$('.photolist a').hover( 
		function(){
			$(this).children("img").stop().fadeTo('slow', .6);
			$(this).append('<span class="zoom">&nbsp;</span>').css({opacity:0, display:block}).fadeTo('slow', 1);
		}, 
		function(){
			$(this).children("img").stop().fadeTo('slow', 1);
			$(this).children("span").fadeTo('slow', 0).remove();
		}
	);
	
	// Fancybox initialization
	$("a[rel=works]").fancybox({
		'titlePosition' 	: 'over',
		'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
			return '<span id="fancybox-title-wrap"><span id="fancybox-title-left"></span><span id="fancybox-title-main">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span><span id="fancybox-title-right"></span></span>';
		}
	});

	// Submit button
	$('.submitbutton').hover( 
		function(){
			$(this).stop().css({ 'backgroundColor': '#fff', 'color': '#888'});
		}, 
		function(){
			$(this).stop().css({ 'backgroundColor': '#ddd', 'color': '#aaa'});		
		}
	);
	
	// Social media icons effect
	$('.iconbar li a img').hover( 
		function(){
			$(this).animate( { 'padding-top': '0px' }, 400 );
		}, 
		function(){
			$(this).animate( { 'padding-top': '10px' }, 400 );
		}
	);	
	
	var resizeTimer = null;
	
	$(window).bind('resize', function() {
		if (resizeTimer) clearTimeout(resizeTimer);
		resizeTimer = setTimeout(windowResized, 10);
	});

});
