var navActiveHeight = 185; //150 + height footer
var navDisabledHeight = 51; // 6 + height footer
var imgBottomMargin = 61; //105 - height footer

var maxWidthHorizontal = 900;
var maxWidthVertical = 450;

var navAnimateEasing = 'easeOutExpo';
var navAnimateDuration = 1000;
var activeElement = 1;

var imageLoaded;
var divLoaded;
var resizeActive;
var resizeActiveRatio;
var resizeActiveClass;
var url;
var skip_intro = true;
var lock = false;
var timer;

cufonReplace();
//jQuery.easing.def = 'easeInCirc';
//jQuery.fx.interval = 13;
$(function(){
		
		$('ul#thumbs a').not('.active').css({
            opacity: 0.5
        });
		$('ul#thumbs a').hover(
		function(){	
			$(this).stop().fadeTo(300, 1.0);
		},
		function(){	
			$(this).not('.active').stop().fadeTo(300, 0.5);
		});	
		$('a#content-next').bind('click', function(ev){
			ev.preventDefault();
	  		if (!lock) {
				var index = $('ul#thumbs a.active').parent().next('li').index();
				if (index != -1) {
					jQuery.history.load(index);
					$('div#nav').scroller('moveToElement', index, 'right');
				}
			}
		});
		$('a#content-prev').bind('click', function(ev){
			ev.preventDefault();
	  		if (!lock) {
				var index = $('ul#thumbs a.active').parent().prev('li').index();
				if (index != -1) {
					jQuery.history.load(index);
					$('div#nav').scroller('moveToElement', index, 'left');	
				}
			}
		});
		$('a#nav-prev').click(function(ev){
			ev.preventDefault();
			$('div#nav').scroller('moveToDirection', 'left', 3);
		});
		$('a#nav-next').click(function(ev){
			ev.preventDefault();
			$('div#nav').scroller('moveToDirection', 'right', 3);
		});			
		$(document).keypress(function(event) {
			switch(event.keyCode){
				case 37:
				  $('a#content-prev').click();
				  break;
				case 39:
				$('a#content-next').click();
				  break;
				default:
			}
		});
        $('div#nav').scroller({
			scrollWrapper:'div#nav-thumbs-container',
			scrollableArea:'ul#thumbs',
            startAtElementNumber: activeElement,
            movedToElementNumber: function(eventObj, data) {
				activeElement = data['elementNumber'];
			}
        });
	 $('ul#thumbs a').click(function(ev) {
	    ev.preventDefault();
	  	if (!lock) {
			var index = $(this).parent().index();
			jQuery.history.load(index);
		}
	});
    $.history.init(function(hash){
        if(hash == "") {
            loadPage(0);
            skip_intro = false;
        } else {
			loadPage(hash);
        }
    },
    { unescape: ",/" });
	$(window).resize();
});

$(window).resize(function() {
	var height = $(window).height();	
	var width = $(window).width();
	
     $('div#intro').css({
        height: height + 'px',
		width: width + 'px'
     });
     $('div#intro div.intro-fade').css({
        height: height + 'px',
		width: width + 'px'
     });
	nav(false);
});

function intro(){
    
    if (skip_intro) {
		$('div#nav-container').hover(
		function(){	
        	$('div#container').removeClass('nav-disabled');
			nav(true);
		},
		function(){	
			$('div#container').addClass('nav-disabled');
			nav(true);
		});	
        return false;
    }
    $('.fadein').hide();
    $('#image-loader').hide();
    $('div#intro').show();
    var delay_back = 300;
    var wait = 100;
                 
    $('div#container').removeClass('nav-disabled');
    
    $('div#intro-1').delay(wait).fadeIn(700);
    $('div#intro-2').delay(wait + 50).fadeIn(650);
    $('div#intro-3').delay(wait + 100).fadeIn(600);
    $('div#intro-4').delay(wait + 150).fadeIn(550);
    $('div#intro-5').delay(wait + 200).fadeIn(500);
    $('div#intro-6').delay(wait + 250).fadeIn(450, function(){
        $('div#intro-background').fadeOut(700);
        $('div#intro-1, div#intro-2, div#intro-3, div#intro-4, div#intro-5, div#intro-6').fadeOut(300);
        $('div#intro div.black').fadeIn(300, 'easeInCirc', function(){
            $('div#intro-7').delay(delay_back).fadeOut(200);
            $('div#intro-8').delay(delay_back).fadeOut(300);
            $('div#intro-9').delay(delay_back).fadeOut(400);
            $('div#intro-10').delay(delay_back).fadeOut(500);
            $('div#intro-11').delay(delay_back).fadeOut(600);
            $('div#intro-12').delay(delay_back).fadeOut(700, function(){
                nav(false);
                $('div#intro').fadeOut(200, function(){
                    $('.fadein').fadeIn(500, function(){

                      	$('#image-loader').fadeIn(500, 'easeInCirc');
  					   
  					   	$.timer(1000, function (timer) {
							if (!$('div#container').hasClass('nav-disabled')) {
								$('div#container').addClass('nav-disabled');
								nav(true);	
		// add hover
		$('div#nav-container').hover(
		function(){	
        	$('div#container').removeClass('nav-disabled');
			nav(true);
		},
		function(){	
			$('div#container').addClass('nav-disabled');
			nav(true);
		});							
							} else {
								timer.stop();
							}
						});
                    });
                });
            });
        });
    });
}

function getImageHeight(){
	var windowHeight = $(window).height();
	var navHeight = $('div#container').hasClass('nav-disabled') ? navDisabledHeight : navActiveHeight;
	var contentHeight = windowHeight - navHeight - 105;	
	var imageHeight = contentHeight - imgBottomMargin;
	return imageHeight;
}
function nav(animated){

    var navHeight = $('div#container').hasClass('nav-disabled') ? navDisabledHeight : navActiveHeight;
    var windowHeight = $(window).height();
    var contentHeight = windowHeight - navHeight - 105; // header
    var imageHeight = contentHeight - imgBottomMargin;
    var marginTop = 0;
	//active thumb
	if (resizeActive) {
		var imgRatio = resizeActiveRatio;
	} else {
		var imgRatio = $('img#content-image').width() / $('img#content-image').height();
	}	
	
	var newHeight = (imageHeight > 50 ? imageHeight : 50);
	
    if ($('div#content-image-container').width() < (newHeight * imgRatio)){
    	newHeight = $('div#content-image-container').width() / imgRatio;
    }
    
    var newWidth = newHeight * imgRatio;
  
 	if (resizeActiveRatio > 1) {
		var maxWidth = maxWidthHorizontal;
	} else {
		var maxWidth = maxWidthVertical;
	} 
    
    if (newWidth > maxWidth) {
    	newWidth = maxWidth;
    	newHeight = newWidth / imgRatio;
    }
    
   var marginButtons = (imageHeight - 47) / 2
    
    if (newHeight < imageHeight) {
    	marginTop = (imageHeight- newHeight) / 2;
    }
    
    
    if (animated) {
        $('div#content').stop().animate({
            height: contentHeight + 'px'
        }, navAnimateDuration, navAnimateEasing);
        $('div#nav-container').stop().animate({
            height: navHeight + 5 + 'px'
        }, navAnimateDuration, navAnimateEasing);
        
		if (resizeActive) {
	       $('div#image-loader').animate({
	       		height: newHeight+ 'px',
				width: newWidth + 'px',
				marginTop: marginTop
			}, navAnimateDuration, navAnimateEasing)
			resizeActive = false;			
		} else {
	        $('div#image-loader').stop().animate({
	            height: newHeight + 'px',
				width: newWidth + 'px',
				marginTop: marginTop
			}, navAnimateDuration, navAnimateEasing);
		}
		$('a#content-next').stop().animate({
            marginTop:  marginButtons + 'px'
        }, navAnimateDuration, navAnimateEasing);		
        $('a#content-prev').stop().animate({
            marginTop: marginButtons + 'px'
        }, navAnimateDuration, navAnimateEasing);
    }
    else {
       $('div#container').css({
            height: windowHeight + 'px'
        });
        $('div#content').css({
            height: contentHeight + 'px'
        });
        $('div#nav-container').css({
            height: navHeight + 'px'
        });
        $('div#image-loader').css({
            height:  newHeight + 'px',
			width: newWidth + 'px',
			marginTop: marginTop
        });
        $('a#content-next').css({
            marginTop: marginButtons + 'px'
        });		
        $('a#content-prev').css({
            marginTop: marginButtons + 'px'
        }); 
    }
}

function loadPage(index){
    if (lock) {
        return false;
    }
    lock = true;
    
    var element = $('ul#thumbs').children('li').eq(index).children('a');
    if ($(element).length == 0) {
        element = $('ul#thumbs').children('li').first().children('a');
        index = 0;
    }
    
    var thumb = $(element).children('img');
    url = element.attr('href');
    $('ul#thumbs a').removeClass('active');
    element.addClass('active');
    $('ul#thumbs a').not('.active').fadeTo(200, 0.5);
    element.fadeTo(300, 1.0);
    
    $('div#image-loader').addClass('active');
    
    $('a#content-prev, a#content-next').removeClass('inactive');
    
    if ($('ul#thumbs a.active').parent().index() == $('ul#thumbs').children('li').first().index()) {
        $('a#content-prev').addClass('inactive');
    }
    if ($('ul#thumbs a.active').parent().index() == $('ul#thumbs').children('li').last().index()) {
        $('a#content-next').addClass('inactive');
    }
    $('h2#title').fadeOut(300, function(){
        $('h2#title').text(element.children('img').attr('alt'));
        Cufon.refresh('h2');
    });
    
    imageLoaded = false;
    divLoaded = false;
    resizeActiveRatio = $(thumb).width() / $(thumb).height();
    
    $('div#thumb-loader').css({
        width: 0,
        opacity: 1.0
    }).show();	
	
    var newImage = new Image();
    _gaq.push(['_trackPageview', url]);
    $(newImage).attr('src', url).load(function(){
        imageLoaded = true;

        if (divLoaded) {
        	loadImage();
        }
    });
   
    var loaderTimer = 600;
    if (newImage.complete || newImage.readyState === 4) {
        imageLoaded = true;
        loaderTimer = 300;
    }
    
    $('div#thumb-loader').stop().animate({
        width: 90 + '%'
    }, loaderTimer, function(){
        if (imageLoaded) {
			finishLoader(300);
        }
    });
    $('div#image-fade').fadeOut(300, function(){
        loadImage();
    });
}

function loadImage(){
    var imageHeight = getImageHeight();
    var width = imageHeight * resizeActiveRatio;
    var newHeight = imageHeight;
    var marginTop = 0;

	if (resizeActiveRatio > 1) {
		var maxWidth = maxWidthHorizontal;
	} else {
		var maxWidth = maxWidthVertical;
	}
	
    if (width > maxWidth) {
    	width = maxWidth;
    	newHeight = width / resizeActiveRatio;
    	marginTop = (imageHeight- newHeight) / 2;
    }    
    
    
	resizeActive = true;
    if ($('div#content-image-container').width() < width) {
        newHeight = $('div#content-image-container').width() / resizeActiveRatio;
        width = $('div#content-image-container').width();
        marginTop = (imageHeight- newHeight) / 2;
    }
    
	if (imageLoaded) {
		finishLoader(400);
	}
    
    $('div#image-loader').animate({
        width: width,
        height: newHeight,
        marginTop: marginTop
    }, function(){
		divLoaded = true;
        if (imageLoaded) {
			resizeActive = false;
			$('img#content-image').attr('src', url);
			$('img#content-image').show();
			$('div#image-fade').fadeIn(300, function(){
				$('div#image-loader').removeClass('active');
			});
			$('h2#title').fadeIn(300);
			finishLoader(200);
		}
    });

}
function finishLoader(duration){
	
    $('div#thumb-loader').animate({
        width: 100 + '%'
    }, duration, function(){
        $('div#thumb-loader').fadeOut(300, function(){
            $('div#thumb-loader').css({
                width: 0
            });
			lock = false;
        });
    });
}
// Cufon
function cufonReplace(){
	Cufon.replace('h2', {
		fontFamily: 'MonarkBold'
	});
	Cufon.replace('p#contact-tel', {
		fontFamily: 'MonarkBold'
	});
	Cufon.replace('a#contact-email', {
		fontFamily: 'MonarkBold',
		hover: true
	});	
}
/*
		$(function(){		
			$('a#fade').bind('click', function(){
				$('#img1').hide();
				$('#img2').hide();
				$('#img3').hide();
				
				$('#img3').fadeIn(600, 'linear');
				$('#img1').fadeIn(300, 'linear', function(){ //easeInSine
					$('#img2').fadeIn(300, 'linear');
				});
			});
			
		$('#img2').hover(
		function(){	
			$(this).animate({
			    height: '800px'
			  });
			
		},
		function(){	
			$(this).animate({
			    height: '750px'
			  });			
		});
		});*/
