/* Author: Jorge Stamatio	

*/


$(document).ready(function() {
	  		

///////////////////////////////////////////////////////////////////////////////////////
//				Initiate Variables					///////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////

	loaded = 0;
var	browserHeight = $(window).height(),
	browserWidth = $(window).width(),
	prevButton = $('.prev'),
	nextButton = $('.next'),
	viewer = $('.viewer'),
	images = $('.viewer img'),
	//////////
	firstImage = $('.viewer img:first');
	firstImageWidth = firstImage.width();
	firstImageHeight = firstImage.height();
	///////////
	loader = $('#loadingJSP');
	
	
	
	activeImage = $('.viewer img.active'),
	currentImg = 0,
	prevImg = 0,
	
	categories = $('#galleries .category').length,
	category = 0;
var Galleries = new Array(); 
	Galleries[0]="human";       
	Galleries[1]="urban";
	Galleries[2]="natural";
var	activeCat = 0;
	
	
var	maxThumbs = (Math.floor(browserWidth/110)),
	maxThumbsLength = maxThumbs*110,
	
	
	thumbnails = $('.thumbnails img'),
	thumbLength = thumbnails.length,
	thumbWidth = (thumbLength*110)+110,
	
	viewerWidth = 0,
	viewerMargin = 0,
	viewerMarginTop = 0,
	
	
	nav_down = 0,
	lock_next = 0;
	

///////////////////////////////////////////////////////////////////////////////////////
				$('html').css({"height":browserHeight});
				$('body').css({"height":browserHeight});
				images.css({"height":browserHeight-96});
				$('.thumbnails').css({"width":thumbWidth});
				
				
			
				
		
				
			$(window).resize(function() {
						browserWidth = $(window).width();
						browserHeight = $(window).height();
						maxThumbs = (Math.floor(browserWidth/110))-2;
						maxThumbsLength = maxThumbs*110;
					
								viewer.css({"height":browserHeight-96});
								images.css({"height":browserHeight-96});
								
						
						
						
			});
			
				
							
				
						nextButton.click(function() {
							nextImage('left');
						});
						prevButton.click(function() {
							nextImage('right');
						});

					
						function nextImage(direction) {
							if(lock_next == 1){return;}
							
							prevImg = currentImg;
							
							
					        if(direction == "left") {
									currentImg++
									//first = "left";
									imageIn = "right";
					            if(currentImg == images.length) {
					                currentImg = 0;
									thumbScroll("start");
					            }
								else{
									thumbScroll(direction);
								}
								
					            
					        } else if(direction == "right") {
								currentImg--
								//first = "right";
								imageIn = "left";
								if(currentImg < 0) {
					                currentImg = images.length-1;
									thumbScroll("end");
					            }
								
								else{
									thumbScroll(direction);
								}
					            
					        } 
							thumbnails.removeClass('selected');
							thumbnails.eq(currentImg).toggleClass('selected');
							
							//////////// Last addition
						
							var commingImage = images.eq(currentImg);
							
							
						
						
						
							//////////// new ////////////////
							lock_next = 1;
							images.eq(prevImg).removeClass('active').fadeOut(600, function() {
							
									if(commingImage.width() > browserWidth){
										images.css({"width":browserWidth,"height":"auto"});
									}
									else{
										images.css({"width":"auto","height":browserHeight-96});
									}
							
								commingImage.addClass('active').show("slide", { direction: imageIn },300, function(){
								//commingImage.addClass('active').fadeIn(600, function(){
									lock_next = 0;
								});
								
							});
							
							
						
						
						}
	
	
	function thumbScroll (direction) {
		
			end_img = ((thumbLength-maxThumbs)*110)*-1;
			thumbMargin = parseInt($('.thumbnails').css('left'));
			totalThumbLength = thumbLength*110;
			
			
		if(totalThumbLength <= maxThumbsLength){
			$('.thumbnails').animate({'left': '0px'});
		}
		
		
		else{
			if (direction == 'left'){
				if(thumbMargin <= end_img){
					$('.thumbnails').animate({'left':end_img});
				}
				else{
					$('.thumbnails').animate({'left': '-=110'});
				}

			}
			if (direction == 'right'){
				if(thumbMargin >= 0){
					$('.thumbnails').animate({'left': '0px'});
					return;
				}
				else{
					$('.thumbnails').animate({'left': '+=110'});
				}			
				
			}
			if (direction == 'start'){
				$('.thumbnails').animate({'left': '0px'});
			}
			if (direction == 'end'){
				$('.thumbnails').animate({'left':end_img});
			
			}
		}
			
		
	}
	
						

							
///////////////////////////////////////////////////////////////////////////////////////
//				Switch Gallery Click					///////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////
// Sends to switchGallery function in the end

$(".category").click(function(e){
		e.preventDefault();
		
		gallery = $(this).attr('href');
		category = $(this).attr('alt');
		_gaq.push(['_trackEvent', 'Category', ''+gallery+'', '']);
		
		if (activeCat == category){
			return false;
		}
		else{
				$('.category').removeClass('active');
				$(this).toggleClass('active');
				activeCat = category; 
				switchGallery(gallery,category);
		}
	
		
});


		

		
			$('.thumbnails').draggable({
				axis: 'x',
				distance: 15,
		//		handle: '.thumbnail',
				stop: function(){

				 	resetDrag();
				}
			});
		
	
		
	
	
	
	function resetDrag () {
			left_thumb = parseInt($('.thumbnails').css('left'));
			end_img = ((thumbLength-maxThumbs)*110)*-1;
			if (left_thumb > 0) {
				//$('.thumbnails').draggable("option", "revert", true);
				$('.thumbnails').animate({'left': '0px'},300);
			}
				if (left_thumb < end_img) {
					//$('.thumbnails').draggable("option", "revert", true);
					$('.thumbnails').animate({'left':end_img},300);
				}
		
	}	
	

		
		
///////////////////////////////////////////////////////////////////////////////////////
//				Show and hide Navigation					///////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////

$('#nav a').click(function(e){
	e.preventDefault();
	navItem = $(this).attr('href');
	_gaq.push(['_trackEvent', 'info', ''+navItem+'', '']);
	
		if($(this).hasClass('on')){
			$(navItem).animate({"opacity": 0},200, function(){
				$(navItem).slideToggle(300);
			});
			$(this).removeClass('on');
			$('#close_nav').slideUp(200);
			nav_down = 0;
			return;
		}
		
			$('.navContent').hide();
			$(navItem).css({"opacity":0});
			$(navItem).slideDown(300, function(){
				$(navItem).animate({"opacity":1});
			});
			$('#nav a').removeClass('on');
			$(this).addClass('on');
			$('#close_nav').slideDown(200);
			return;
		
});

$('#close_nav').click(function(){
	$('.navContent').animate({"opacity": 0},200, function(){
		$('.navContent').slideUp(300);
		$('#nav a').removeClass('on')
	});
	$('#close_nav').slideUp(200);
});




$('#center').click(function(){
	$('.navContent').animate({"opacity": 0},200, function(){
		$('.navContent').slideUp(300);
		$('#nav a').removeClass('on')
	});
	$('#close_nav').slideUp(200);
});


$("#left_hover").hover(
  function () {
    if(loaded == 0){return;}
	$('.prev').animate({'left': -10});
	$('.prev').addClass('on');
  }, 
  function () {
    if(loaded == 0){return;}
	$('.prev').animate({'left': -90});
	$('.prev').removeClass('on');
  }
);



$('#left_hover').click(function(){
	$('.navContent').animate({"opacity": 0},200, function(){
		$('.navContent').slideUp(300);
		$('#nav a').removeClass('on')
	});
	$('#close_nav').slideUp(200);
	nextImage('right');
});

$("#right_hover").hover(
  function () {
    if(loaded == 0){return;}
	$('.next').animate({'right': -10});
	$('.next').addClass('on');
  }, 
  function () {
    if(loaded == 0){return;}
	$('.next').animate({'right': -90});
	$('.next').removeClass('on');
  }
);



$('#right_hover').click(function(){
	$('.navContent').animate({"opacity": 0},200, function(){
		$('.navContent').slideUp(300);
		$('#nav a').removeClass('on')
	});
	$('#close_nav').slideUp(200);
	nextImage('left');
});




$("#about").click(function(e){
	e.preventDefault();
	$('a.title').removeClass('on');
	$(this).toggleClass('on');
	$('#itemContainer').animate({"left":0})
});

$("#browser").click(function(e){
	e.preventDefault();
	$('a.title').removeClass('on');
	$(this).toggleClass('on');
	$('#itemContainer').animate({"left":-750})
});

$("#social").click(function(e){
	e.preventDefault();
	$('a.title').removeClass('on');
	$(this).toggleClass('on');
	$('#itemContainer').animate({"left":-1500})
});




///////////////////////////////////////////////////////////////////////////////////////

			
			
///////////////////////////////////////////////////////////////////////////////////////
//				Thumbnails								///////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////


	$(".thumbnails").delegate(".thumbnail", "click", function(){
		//do nothing if click on current thumbnail
		if ($(this).hasClass('selected')) { return; }
		//select thumbnails alt tag
			thumbnails.removeClass('selected');
	     	num = $(this).attr('alt');
			$(this).toggleClass('selected');
			
			currentImg = num;
	        $('.active').fadeOut(100,function(){
				$("#img_" + num + "").delay(100).fadeIn(100);
				
			});
			images.removeClass('active');
			images.eq(currentImg).addClass('active');
			
		
	});



///////////////////////////////////////////////////////////////////////////////////////





///////////////////////////////////////////////////////////////////////////////////////
//				Keyboard Navigation						///////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////

			$(document).keypress(function(e){
				//Prevent defaults for spacebar, arrow up and arrow down on keypress
				if(e.keyCode == 32 || e.keyCode == 38 || e.keyCode == 40){
					e.preventDefault();
				}
			});
			
			$(document).keydown(function(e){
				//Prevent defaults for spacebar, arrow up and arrow down on keydown
				if(e.keyCode == 32 || e.keyCode == 38 || e.keyCode == 40){
					e.preventDefault();
				}
			});
			
			$(document).keyup(function(e){
				 e.preventDefault();
				if(loaded == 0) {
					return;
				}
				else {
					
					if (e.keyCode == 39) {
					 e.preventDefault();
				       nextImage("left");
				    }
					if (e.keyCode == 37) { 
						e.preventDefault();
				       nextImage("right");
				    }
					if (e.keyCode == 38) { 
				       e.preventDefault();
						 activeCat--
				            if(activeCat < 0) {
				                activeCat = categories-1;
				            }
							gallery = Galleries[activeCat];
							switchGallery(gallery,activeCat);	
				    }
					if (e.keyCode == 40) {
						e.preventDefault();
						activeCat++
					        if(activeCat == categories) {
					            activeCat = 0;
					       	}
							gallery = Galleries[activeCat];
							switchGallery(gallery,activeCat);
				    }
				

					
					
					
				} //loaded
				
			    
				
				
			});
///////////////////////////////////////////////////////////////////////////////////////		
		
			
		


///////////////////////////////////////////////////////////////////////////////////////
//				Functions								///////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////
			function switchGallery(gallery,category) {
					loader.show();
					$('.loadingJSP_text').html('Loading '+gallery+'...');
					loaded = 0;
					activeCat = category;
					$('.viewer img').fadeOut(300);
						$.ajax({
								type: "POST",
								url: ""+gallery+".php",
								success: function (data) {
									$(".viewer").html(data);
									$('.viewer img:first').load(function(){
										$.ajax({
												type: "POST",
												url: "t_"+gallery+".php",
												success: function (data) {
												$(".thumbnails").html(data);
												resetGallery();
												loader.delay(300).fadeOut(100, function(){
													loaded = 1;
												});
												
												}		
										}); //ajax thumbs
										
									});
																						
								}	
									
						}); //ajax pics
						
						
		
						//Navigation Feedback
						$('.category').removeClass('on');
						$('.category').eq(category).toggleClass('on');
					
					
							
					
    		}//end switch gallery

			function resetGallery() {
				
						images = $('.viewer img');
						images.css({"height":browserHeight-96});
						currentImg = 0;
						prevImg = 0;
							thumbnails = $('.thumbnails img');
							thumbLength = $('.thumbnails img').length;
							thumbWidth = (thumbLength*110)+110;
							maxThumbs = (Math.floor(browserWidth/110));
							maxThumbsLength = maxThumbs*110;
						
						//Thumbnails
						
						
						
						
						thumbScroll("start");
						
							
						
				
					
							
							
							$('.viewer img:first').fadeIn(500);
						
							
							$('.viewer img:first').addClass('active');
							$('.thumbnails img:first').toggleClass('selected');
							
							
					
			}


		
///////////////////////////////////////////////////////////////////////////////////////
//				mail					///////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////

$('.show_mail').click(function(){
	$('#question').slideToggle(100);
	$('#answer').focus();
});

$('#send_answer').click(function(){
	var secretNumber = $('#answer').val();
	if(secretNumber == 14){
		$('#to_me').html('<a href="mailto:contact@jstamatiophotography.com?Subject=Hello!">contact@jstamatiophotography.com</a>');
		$('#question').slideUp(100);
		$('.show_mail').slideUp(100);
		$('#to_me').delay(300).slideDown(100); 
			
			
	}
	else{
		return;
	}
});



///////////////////////////////////////////////////////////////////////////////////////

$('#close_oops').click(function(){
	$('#oops').fadeOut(200);
});

			
			
			


});//document ready






///////////////////////////////////////////////////////////////////////////////////////
//				Load Function							///////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////

$(window).load(function() {
	var browserWidth = $(window).width(),
		loader = $('#loadingJSP');
	
	
	
	$('header').animate({"margin-top" : 0},400, function(){
		loader.fadeOut(100);
		$('.viewer img:first').fadeIn(500);
		$('.viewer img:first').addClass('active');
		$('.thumbnails img:first').toggleClass('selected');
		
		
			$('.next').delay(1000).animate({'right': -90},300);
			$('.prev').delay(1000).animate({'left': -90},300);
	
			category = 0;
			loaded = 1;


		
		var jsp_cookie = $.cookie('jsp_user');



		if (jsp_cookie){
			return;
		}
		else{
			
			$.cookie('jsp_user', 'true', { expires: 1, path: '/' });
			return;
		}	

	});
	

	if($('html').hasClass('ie6') || $('html').hasClass('ie7') || $('html').hasClass('ie8')){
		$('#oops').fadeIn(200);
	}
			
	
	
});
///////////////////////////////////////////////////////////////////////////////////////