// JavaScript Document
// PHOTO GALLERY
function openGallery(){
	var footerTitle = 	$('.contDettProdotto .colDx h1').html()			   
	$("html").css("overflow", "hidden");
	$("body").css("overflow", "hidden");
	
	$('body').append($('<div id="overWin"></div>'));
	$('#overWin').fadeIn(600).append('<div id="outer_container"><div id="imagePan"><div class="container"><div><img src="" id="fsImage" /></div></div></div></div>').append('<div class="footer"><h1>nome</h1></div>').append('<div class="closeGallery"></div><div class="navImg"><p>title</p><ul></ul></div>');
	
	
	
	$('#overWin .footer h1').html(footerTitle)
	$('#overWin .navImg p').html(titleView)
	
	
	$('.productImageSlideNav li').each(function(){
		linkZoomGallery = $('a',this).attr('zoomgallery')
		titleView = $('a',this).attr('titleNavGallery')
		$('<li><a href="javascript:void(0)" zoomGallery="'+linkZoomGallery+'" titleNavGallery="'+titleView+'"></a></li>').appendTo('#overWin .navImg ul');
	});
	
	
	mostraPhoto()
	
	//chiudo la gallery
	$('.closeGallery').click(function(){
		$('#overWin').fadeOut('slow', function(){
			$('#overWin').remove();									   
		});
		$("html").css("overflow", "auto");
		$("body").css("overflow", "auto");
	});
	
	
	$('#overWin .navImg ul li').click(function(){
		if(zoomClick==1){
			zoomClick=2
			$imagePan.unbind("mousemove");
			$imagePan_container.stop().animate({
				top: 0,
				left:0	
			},200, 'swing')
			
			//FullScreenBackground($(this))
			
			 $('#fsImage').stop().animate({
				width : newWidth, 
				height :  newHeight,
				marginLeft:($('#overWin #outer_container').width()-newWidth)/2+"px",
				marginTop:($('#overWin #outer_container').height()-newHeight)/2+"px"
			},600, 'swing', function(){
				zoomClick=0	
			})	
			
			
			$('#mycursor').css({'background-position':'0 0'})
			$imagePan.unbind("mousemove");
			$imagePan_container.css("top",0).css("left",0);
			
			
		}
		
		$('#overWin .navImg ul li').removeClass('off')
		$(this).addClass('off')
		titleView = $('a', this).attr('titleNavGallery')
		$('#overWin .navImg p').html(titleView)
		linkZoom = $('a', this).attr('zoomgallery')
		mostraPhoto()
	});
	
	
	
	
}



$(window).resize(function(){
	$('#overWin').width($(window).width())
	$('#overWin').height($(window).height())
	$('#overWin').css('left', 0)
	$('#outer_container').width($(window).width())
	$('#outer_container').height($(window).height()-$('#overWin .footer').height())
	$('#imagePan').width($('#outer_container').width())
	$('#imagePan').height($('#outer_container').height())
	$('#imagePan .container div').height($('#outer_container').height())


	if(zoomClick==1){
		zoomClick=2
		$imagePan.unbind("mousemove");
		$imagePan_container.stop().animate({
			top: 0,
			left:0	
		},200, 'swing')
		
		//FullScreenBackground($(this))
		
		 $('#fsImage').stop().animate({
			width : newWidth, 
			height :  newHeight,
			marginLeft:($('#overWin #outer_container').width()-newWidth)/2+"px",
			marginTop:($('#overWin #outer_container').height()-newHeight)/2+"px"
		},600, 'swing', function(){
			zoomClick=0	
		})	
		
		
		$('#mycursor').css({'background-position':'0 0'})
		$imagePan.unbind("mousemove");
		$imagePan_container.css("top",0).css("left",0);
		
		return false
		
		
	}
	
	FullScreenBackground('#overWin #fsImage')
});




//mostro immagine
function mostraPhoto(){
	$('#mycursor').remove()
	$('#overWin').append('<div class="preloader"></div>')
	//$('#overWin h1').fadeOut('slow');	
	
	$('#overWin #fsImage').fadeOut(600, function(){
		
		$('#overWin #fsImage').remove();
		$('#imagePan .container div').append('<img src="" id="fsImage" />');
		$('#overWin #fsImage').attr('src', linkZoom);
		
		FullScreenBackground('#fsImage')
		
		$('#outer_container').width($(window).width())
		$('#outer_container').height($(window).height()-$('#overWin .footer').height())
		$('#imagePan').width($('#outer_container').width())
		$('#imagePan').height($('#outer_container').height())
		$('#imagePan .container').height($('#imagePan img').height())
		$('#imagePan .container div').height($('#imagePan img').height())
		
		$('#overWin').waitForImages(function() {	
			$('#overWin .preloader').fadeOut()
			
			setTimeout("$('#overWin #fsImage').fadeIn(600)", 600)
			setTimeout("$('#overWin .preloader').remove()", 400);
			//$('#overWin h1').fadeIn(400);	
			zoomInOutFsImage()
		})
	})
	
	
	
	$('#overWin .navImg ul li a').each(function(){
		if($(this).attr('zoomgallery') == linkZoom){
			$(this).parent().addClass('off')	
		}
	});
};

var newWidth = 0;
var newHeight = 0;
var zoomClick= 0

//Image scale function
function FullScreenBackground(theItem){
   	var iWidth = 0;
	var iHeight = 0;
	iWidth = $(theItem).width();
	iHeight = $(theItem).height();
	
	$(theItem).height($(window).height()-$('#overWin .footer').height());
	$(theItem).css("width", 'auto');
	
	if($(theItem).width()>=$('#overWin #outer_container')){
		$(theItem).width($('#overWin #outer_container').width());	
		$(theItem).css("height", 'auto');
	}
	
	newWidth = $('#overWin #fsImage').width()
	newHeight = $('#overWin #fsImage').height()
	
	
	setTimeout("centerFsImage()", 500)
	
	
	
	
}

function centerFsImage(){
	$('#overWin #fsImage').css({'margin-left':(($('#overWin #outer_container').width() - $('#overWin #fsImage').width())/2), 'margin-top':(($('#overWin #outer_container').height() - $('#overWin #fsImage').height())/2)});	
	
	newWidth = $('#overWin #fsImage').width()
	newHeight = $('#overWin #fsImage').height()
	
}


function zoomInOutFsImage(){
	
	
	$('<div id="mycursor"></div>').appendTo('#overWin')
	
	$('#fsImage').mouseout(function(){
		   $('#mycursor').hide();
		   return false;
	  });
	  $('#fsImage').mouseenter(function(){
		   $('#mycursor').show();
		   return false;
	  });
	  $('#fsImage').mousemove(function(e){
		   $('#mycursor').css('left', e.clientX - 20).css('top', e.clientY + 7);
	  });
	
		$('img#fsImage').click(function(){
			if(zoomClick==0){
				zoomClick=2	
				var max_size = $(this).height() + 2000;
				if ($(this).height() > $(this).width()) {
					h = max_size;
					w = Math.ceil($(this).width() / $(this).height() * max_size);
				} else {
					w = max_size;
					h = Math.ceil($(this).height() / $(this).width() * max_size);
				}
			  
				$(this).stop().animate({
					width : w, 
					height :  h,
					marginLeft: ($('#overWin #outer_container').width()-w)/2+"px",
					marginTop: ($('#overWin #outer_container').height()-h)/2+"px"
				},600, 'swing', function(){
					zoomClick=1	
				})
				
				
				$('#mycursor').css({'background-position':'0 -50px'})
				
				setTimeout("verifyscrol()", 500)
				
				
				return false
				
				
			}else if(zoomClick==1){
				zoomClick=2
				$imagePan.unbind("mousemove");
				$imagePan_container.stop().animate({
					top: 0,
					left:0	
				},200, 'swing')
				
				//FullScreenBackground($(this))
				
				 $(this).stop().animate({
					width : newWidth, 
					height :  newHeight,
					marginLeft:($('#overWin #outer_container').width()-newWidth)/2+"px",
					marginTop:($('#overWin #outer_container').height()-newHeight)/2+"px"
				},600, 'swing', function(){
					zoomClick=0	
				})	
				
				
				$('#mycursor').css({'background-position':'0 0'})
				$imagePan.unbind("mousemove");
				$imagePan_container.css("top",0).css("left",0);
				
				return false
			}
		
	})
}


function verifyscrol(){
	if($('#overWin #fsImage').height()>$('#overWin #outer_container').height()){
		scrollCollectionImgZ()
	}else{
		$imagePan.unbind("mousemove");
		$imagePan_container.css("top",0).css("left",0);
	}
	
}


$outer_container=$("#outer_container");
$imagePan_panning=$("#imagePan #fsImage");
$imagePan=$("#imagePan");
$imagePan_container=$("#imagePan .container");

function scrollCollectionImgZ(){
	$outer_container=$("#outer_container");
	$imagePan_panning=$("#imagePan #fsImage");
	$imagePan=$("#imagePan");
	$imagePan_container=$("#imagePan .container");
	
 	$imagePan_panning.css("margin-top",($imagePan.height()-$imagePan_panning.height())/2+"px");
    containerWidth=$imagePan.width();
    containerHeight=$imagePan.height();
    totalContentW=$imagePan_panning.width();
    totalContentH=$imagePan_panning.height();
    $imagePan_container.css("width",totalContentW).css("height",totalContentH);
 
    function MouseMove(e){
        var mouseCoordsX=(e.pageX - $imagePan.offset().left);
        var mouseCoordsY=(e.pageY - $imagePan.offset().top);
        var mousePercentX=mouseCoordsX/containerWidth;
        var mousePercentY=mouseCoordsY/containerHeight;
        var destX=-(((totalContentW-(containerWidth))-containerWidth)*(mousePercentX));
        var destY=-(((totalContentH-(containerHeight))-containerHeight)*(mousePercentY));
        var thePosA=mouseCoordsX-destX;
        var thePosB=destX-mouseCoordsX;
        var thePosC=mouseCoordsY-destY;
        var thePosD=destY-mouseCoordsY;
        var marginL=$imagePan_panning.css("marginLeft").replace("px", "");
        var marginT=$imagePan_panning.css("marginTop").replace("px", "");
        var animSpeed=500; //ease amount
        var easeType="easeOutCirc";
        if(mouseCoordsX>destX || mouseCoordsY>destY){
            //$imagePan_container.css("left",-thePosA-marginL); $imagePan_container.css("top",-thePosC-marginT); //without easing
            $imagePan_container.stop().animate({left: -thePosA-marginL, top: -thePosC-marginT}, animSpeed,easeType); //with easing
        } else if(mouseCoordsX<destX || mouseCoordsY<destY){
            //$imagePan_container.css("left",thePosB-marginL); $imagePan_container.css("top",thePosD-marginT); //without easing
            $imagePan_container.stop().animate({left: thePosB-marginL, top: thePosD-marginT}, animSpeed,easeType); //with easing
        } else {
            $imagePan_container.stop();
        }
    }
 
    $imagePan_panning.css("margin-left",($imagePan.width()-$imagePan_panning.width())/2).css("margin-top",($imagePan.height()-$imagePan_panning.height())/2);
 
    $imagePan.bind("mousemove", function(event){
        MouseMove(event);
    });
};