$(document).ready(function() {
	$('#gallery').hide();
/* !Create Helper and Close-button */
	var helper = $('<li id="helper">&nbsp;</li>').hide();
	helper.appendTo('#gallery');
	var close = $('<li id="close">&nbsp;</li>');
	close.appendTo('#gallery');
	
/* !Initializing View */
	$('#bussiness-card').hide().fadeIn("slow");
	var thumbnails_top = $("#thumbnails").css("marginTop");
	var thumbnails_bottom = parseInt($("#thumbnails").css("paddingBottom"));
	
/* !Pull the thumbnails up after 2 seconds */	
	setTimeout(function(){
		$('#thumbnails').animate( {"marginTop": ($('#thumbnails').height()*-1-thumbnails_bottom) + "px" }, 'slow');
	 }, 2000);	
	
/* !Thumbnail Hover */
	$('#thumbnails').mouseenter(function(){
		$("#gallery .image").stop().fadeTo('slow', 0.0);
		helper.fadeOut();
		$(this).stop().animate( {"marginTop": ($(this).height()*-1-thumbnails_bottom) + "px" }, 'slow');
	});

	$('#thumbnails').mouseleave(function(){
		//$("#gallery .image").fadeTo('slow', 1);
		helper.fadeIn();
		$(this).stop().animate( {"marginTop": thumbnails_top }, 'slow');
		$('.active').fadeTo('slow', 1)
	});
	
/* !Initializing Gallery */
	$('#thumbnails li').click(function(e){
		var index = $(this).index();
		var width = $(window).width();
		$('#gallery').fadeIn()
		//fix helper
        helper.css({
            top: (e.pageY  + 15) + "px",
            left: (e.pageX + 15) + "px"
        });
		//pull thumnails down and show image
		$('#thumbnails').animate( {"marginTop": thumbnails_top }, 200);
		//find the original and animate
		$('#gallery').animate({'marginLeft' : (index * width * -1) + "px" },'slow');
		$('#gallery .image').eq(index).fadeTo('slow', 1).addClass('active');
		return false;
	})
	
/* !Resize */
	$(window).resize(function(){
	     var size = parseInt($('#bussiness-card').css('height'))/5.5;
		$('#bussiness-card').css('font-size', size);
		var windowwidth = $(window).width();
		$('#gallery .image').css("width", windowwidth);
		$('#gallery div').css("width", windowwidth).css("height", $(window).height());
	}).trigger("resize");		
		
/* !Arrow Keys */
	$(document).keydown(function(e){
	
		// Initialize
		var width = $('#gallery .image').width();
		var distance = parseInt($('#gallery').css('marginLeft'));
		var current = parseInt(distance / width);
		var items = $('#gallery .image').length;
		var n = items + current;
		
		// Keycodes		
		if (e.keyCode == 27) { 
	    	$('#gallery').hide();
		}
		
		if (e.keyCode == 37||e.keyCode == 39){
			//pull thumnails down and show image
			$('#thumbnails').animate( {"marginTop": thumbnails_top }, 200);
			//$("#gallery .image").fadeTo('slow', 1);
			//initialize gallery
			$('#gallery').fadeIn();
			$('#gallery').stop(true,true);
		}
	    
	    if (e.keyCode == 37&&n<items) { 
			$('#gallery').stop(true,true).animate({'marginLeft' :  "+=" + width + "px" },400);
	       return false;
	    }
		
		if (e.keyCode == 39&&n>1) { 
			$('#gallery').stop(true,true).animate({'marginLeft' :  "-=" + width + "px" },400);
	       return false;
	    }
	});
	
/* !Show Cursor Helper */

    $('#gallery').mousemove(function(e) {
    	helper.show();
        helper.css({
            top: (e.pageY  + 15) + "px",
            left: (e.pageX + 15) + "px"
        });
    });
    
	$('#gallery').mousemove(function(e) {
        var bound = Math.round($(window).width() / 2);
        if ( bound < e.pageX ) {
            helper.css("background-position", "-60px");
        } else if (bound > e.pageX ) {
            helper.css("background-position", "0px");
        };
    });

	$('#gallery').click(function(e) {
		//Initialize
		var width = $('#gallery .image').width();
		var distance = parseInt($('#gallery').css('marginLeft'));
		var current = parseInt(distance / width);
		var items = $('#gallery .image').length;
		var n = items + current;
        var bound = Math.round($(window).width() / 2);
        // Choose Direction and Animate
        if ( bound < e.pageX &&  n>1) {
			$('#gallery').stop(true,true).animate({'marginLeft' :  "-=" + width + "px" },400);
			$('.active').removeClass('active').fadeTo('slow', 0).next().addClass('active').fadeTo('slow', 1);
        } else if (bound > e.pageX &&  n<items) {
			$('#gallery').stop(true,true).animate({'marginLeft' :  "+=" + width + "px" },400);
			$('.active').removeClass('active').fadeTo('slow', 0).prev().addClass('active').fadeTo('slow', 1);
        };
    });
    
    $('#close').click(function(e) {
    	$('#gallery').hide();
    });
})