$(function() {
	var image			= $('#fullSizePic'),				// datail image
		titles			= $('.info span'),	 				// titles
		works			= $('.pics img'),					// images
		stage 			= $('#controls'),					// 
		controls		= $('.pageswitch'),  				// page switch buttons
		controlsPrev	= $('#controls .pageswitch.prev'),	// previous page button
		controlsNext	= $('#controls .pageswitch.next'),	// next page button
		opacity			= [1,0.5] 		 	 				// opacity [high,low]
		delay			= 250;				 				// delay for image fade
		$('html').addClass('js');	 						// add js available class
		
	if (works.length){
		$('.pics').delegate('img', 'hover',function(e){
			if(e.type === 'mouseenter') {
				$(titles[works.index($(this))]).toggleClass('active');
				$(this).stop(true, false).fadeTo('fast', opacity[0]);
				works.not($(this)).stop(true, false).fadeTo('normal', opacity[1]);
			}else{
				$(titles[works.index($(this))]).toggleClass('active');
				works.delay(delay).fadeTo('normal', opacity[0]);
			}
		});
	}
	
	$(window).load(function(){
		if(image.length){
		
			var position = image.offset();
			var yTop = parseInt(position.top);	
			var imageHeight = $('#fullSizePic').height();
			
			var controlsHeight = 100;
			var speed = 300;
			var timer;
			
			var content = $('#content,.footer');
			
					
			stage.css({
				 'position' : 'absolute'
				,'top'  	: yTop+'px'
				,'height'   : imageHeight+'px'
				,'width'    : '100%'
				,'z-index'  : '35'
			});	
			
			//controls.css('top',(image.offset().top+(image.height()/2)-30)+'px');
			controls.click(function(e){
				e.preventDefault();
				image.attr('href',$(this).attr('href'));
				content.fadeTo('fast',0,function(){
					window.location.href = image.attr('href');
				});
			});
			content.animate({'opacity':1},delay*2);
			//controls.animate({'opacity':1},delay*2).delay(3000).animate({'opacity':0},delay*2);
			
			stage.bind('mousemove', function(e){
				//controls.clearQueue();
				if (timer) {
					clearTimeout(timer);
					timer = 0;
				}
				timer = setTimeout(function() {
					controls.stop(true,false);
					controls.animate({opacity: 0}, speed);	
				}, 3000)
				var mouseYPos = e.pageY;	
				var mouseXPos = e.pageX;	
				var controlsPos	= (mouseYPos - this.offsetTop);	
				if (mouseXPos < (stage.width()/2)-100 && controlsPrev.length) { 
					controlsPrev.animate({opacity: 1}, speed);
					$(this).css('cursor', 'pointer');			
				} else if (mouseXPos > (stage.width()/2)+100 && controlsNext.length) { 
					controlsNext.animate({opacity: 1}, speed);
					$(this).css('cursor', 'pointer');		
				} else { 
					$(this).css('cursor', 'default');
					controls.stop(true,false);
					controls.animate({opacity: 0}, speed);	
				}
				controls.css('top', controlsPos);
													
			});
			stage.click(function(e){	
				var mouseYPos = e.pageY;	
				var mouseXPos = e.pageX;
				if (mouseXPos < (stage.width()/2)-100 && controlsPrev.length) { 
					controls.stop(true,false);
					controls.fadeTo('fast',0);
					content.fadeTo('fast',0,function(){
						window.location = controlsPrev.attr('href');
					});		
				} else if (mouseXPos > (stage.width()/2)+100 && controlsNext.length) { 
					controls.stop(true,false);
					controls.fadeTo('fast',0);
					content.fadeTo('fast',0,function(){
						window.location = controlsNext.attr('href');
					});	
				}
							
			});
			stage.mouseleave(function (e) {
				controls.stop(true,false);
				controls.animate({opacity: 0, top: ((imageHeight/2) - (controlsHeight/2))}, 600);			
			})
		}	
	})
});