var animationSpeedHighlight = 400;
var animationSpeedDeHighlight = 200;
var animationSpeedFade = 200;
var animationDelay = 80;

var image1WidthStart = 150, image1WidthEnd = 190;
var image1TopStart = 10, image1TopEnd = 20;
var image1LeftStart = 10, image1LeftEnd = 10;

var image2WidthStart = 150, image2WidthEnd = 220;
var image2TopStart = -290, image2TopEnd = -280;
var image2LeftStart = 170, image2LeftEnd = 145;

var image3WidthStart = 150, image3WidthEnd = 220;
var image3TopStart = -590, image3TopEnd = -580;
var image3LeftStart = 330, image3LeftEnd = 305;

var image4WidthStart = 150, image4WidthEnd = 220;
var image4TopStart = -890, image4TopEnd = -880;
var image4LeftStart = 490, image4LeftEnd = 440;

var imageAnimated = false;
var intervalIDOpacity;
var intervalIDHighlight;

$(document).ready(function(){	
	$('.shadow1, .shadow2, .shadow3, .shadow4').hide(); // temporär versteckt
		
    $('.moreLink').hide();
	$('.homePopup2').hide();
    
    $('.homeImage1').hover(function(e){
		$this = $(this);
		intervalIDHighlight = setTimeout('highlightImage($this, image1WidthEnd, image1TopEnd, image1LeftEnd, 1);', animationDelay);
        stopPropag(e);
        
    }, function(e){
		clearInterval(intervalIDHighlight);
        stopPropag(e);
        deHighlightImage($(this), image1WidthStart, image1TopStart, image1LeftStart, 1);
    });
    
    $('.homeImage2').hover(function(e){
		$this = $(this);
		intervalIDHighlight = setTimeout('highlightImage($this, image2WidthEnd, image2TopEnd, image2LeftEnd, 2);', animationDelay);
        stopPropag(e);
    }, function(e){
		clearInterval(intervalIDHighlight);
        stopPropag(e);
        deHighlightImage($(this), image2WidthStart, image2TopStart, image2LeftStart, 2);
    });
    
    $('.homeImage3').hover(function(e){
		$this = $(this);
		intervalIDHighlight = setTimeout('highlightImage($this, image3WidthEnd, image3TopEnd, image3LeftEnd, 3);', animationDelay);
        stopPropag(e);
    }, function(e){
		clearInterval(intervalIDHighlight);
        stopPropag(e);
        deHighlightImage($(this), image3WidthStart, image3TopStart, image3LeftStart, 3);
    });
    
    $('.homeImage4').hover(function(e){
		$this = $(this);
		intervalIDHighlight = setTimeout('highlightImage($this, image4WidthEnd, image4TopEnd, image4LeftEnd, 4);', animationDelay);
        stopPropag(e);
    }, function(e){
		clearInterval(intervalIDHighlight);
        stopPropag(e);
        deHighlightImage($(this), image4WidthStart, image4TopStart, image4LeftStart, 4);
    });
	
	$('.label1').hover(function(e){
		$this = $('.homeImage1');
		intervalIDHighlight = setTimeout('highlightImage($this, image1WidthEnd, image1TopEnd, image1LeftEnd, 1);', animationDelay);
        stopPropag(e);
        
    }, function(e){
		clearInterval(intervalIDHighlight);
        stopPropag(e);
        deHighlightImage($('.homeImage1'), image1WidthStart, image1TopStart, image1LeftStart, 1);
    });
    
    $('.label2').hover(function(e){
		$this = $('.homeImage2');
		intervalIDHighlight = setTimeout('highlightImage($this, image2WidthEnd, image2TopEnd, image2LeftEnd, 2);', animationDelay);
        stopPropag(e);
    }, function(e){
		clearInterval(intervalIDHighlight);
        stopPropag(e);
        deHighlightImage($('.homeImage2'), image2WidthStart, image2TopStart, image2LeftStart, 2);
    });
    
    $('.label3').hover(function(e){
		$this = $('.homeImage3');
		intervalIDHighlight = setTimeout('highlightImage($this, image3WidthEnd, image3TopEnd, image3LeftEnd, 3);', animationDelay);
        stopPropag(e);
    }, function(e){
		clearInterval(intervalIDHighlight);
        stopPropag(e);
        deHighlightImage($('.homeImage3'), image3WidthStart, image3TopStart, image3LeftStart, 3);
    });
    
    $('.label4').hover(function(e){
		$this = $('.homeImage4');
		intervalIDHighlight = setTimeout('highlightImage($this, image4WidthEnd, image4TopEnd, image4LeftEnd, 4);', animationDelay);
        stopPropag(e);
    }, function(e){
		clearInterval(intervalIDHighlight);
        stopPropag(e);
        deHighlightImage($('.homeImage4'), image4WidthStart, image4TopStart, image4LeftStart, 4);
    });
});


var highlightImage = function($imgCont, imgWidth, imgTop, imgLeft, imgNr){
    clearInterval(intervalIDOpacity);
    if (imageAnimated == false) {
        imageAnimated = true;
        var newWidth = imgWidth + "px";
        var newTop = imgTop + "px";
        var newLeft = imgLeft + "px";
        var $childImage = $imgCont.find(":nth-child(1)").find(":nth-child(1)");
        var $childReflect = $imgCont.find(":nth-child(1)").find(":nth-child(2)");
        
        $imgCont.css('opacity', 1);
        //$('.moreLink:eq(' + (imgNr - 1) + ')').fadeIn(animationDelay);
        switch (imgNr) {
            case 1:
                $('.homeImage2, .homeImage3, .homeImage4').fadeTo(animationSpeedFade, 0.3);
                $('.homeImage1').fadeTo(animationSpeedFade, 1);
				if (jQuery.support.opacity == true) {
					$('.shadow' + imgNr).stop().animate({
						width: imgWidth + 20,
						top: imgTop - 1210,
						left: imgLeft - 10
//						,opacity: "1"
					}, animationSpeedHighlight);
				}
                break;
            case 2:
                $('.homeImage1, .homeImage3, .homeImage4').fadeTo(animationSpeedFade, 0.3);
                $('.homeImage2').fadeTo(animationSpeedFade, 1);
				if (jQuery.support.opacity == true) {
					$('.shadow' + imgNr).stop().animate({
						width: imgWidth + 20,
						top: imgTop - 1200,
						left: imgLeft - 10
//						,opacity: "1"
					}, animationSpeedHighlight);
				}
//                stretchLabel();
				$('.homePopup2').fadeIn(animationDelay);
                break;
            case 3:
                $('.homeImage1, .homeImage2, .homeImage4').fadeTo(animationSpeedFade, 0.3);
                $('.homeImage3').fadeTo(animationSpeedFade, 1);
				if (jQuery.support.opacity == true) {
					$('.shadow' + imgNr).stop().animate({
						width: imgWidth + 20,
						top: imgTop - 1190,
						left: imgLeft - 10
//						,opacity: "1"
					}, animationSpeedHighlight);
				}
                break;
            case 4:
                $('.homeImage1, .homeImage2, .homeImage3').fadeTo(animationSpeedFade, 0.3);
                $('.homeImage4').fadeTo(animationSpeedFade, 1);
				if (jQuery.support.opacity == true) {
					$('.shadow' + imgNr).stop().animate({
						width: imgWidth + 20,
						top: imgTop - 1180,
						left: imgLeft - 10
//						,opacity: "1"
					}, animationSpeedHighlight);
				}
                break;
            default:
                break;
        }
/*		
        $imgCont.stop().animate({
            width: newWidth,
            top: newTop,
            left: newLeft
        }, animationSpeedHighlight).css("z-index", 100);
        
        $childImage.stop().animate({
            marginLeft: "0px"
        }, animationSpeedHighlight);
        
        $childReflect.stop().animate({
            marginLeft: "0px"
        }, animationSpeedHighlight);
*/
        $('.label' + imgNr + ' a').css('color', '#84aaff');
    }
}

var deHighlightImage = function($imgCont, imgWidth, imgTop, imgLeft, imgNr){
    clearInterval(intervalIDHighlight);
    if (imageAnimated == true) {
        var newWidth = imgWidth + "px";
        var newTop = imgTop + "px";
        var newLeft = imgLeft + "px";
        var $childImage = $imgCont.find(":nth-child(1)").find(":nth-child(1)");
        var $childReflect = $imgCont.find(":nth-child(1)").find(":nth-child(2)");
        
        //$('.moreLink:eq(' + (imgNr - 1) + ')').fadeOut(animationDelay);
        intervalIDOpacity = setTimeout('setOpacityTo1()', 500);
        
        switch (imgNr) {
            case 1:
				if (jQuery.support.opacity == true) {
					$('.shadow' + imgNr).stop().animate({
						width: imgWidth + 20,
						top: imgTop - 1210,
						left: imgLeft - 10,
						opacity: "0"
					}, animationSpeedDeHighlight);
				}
                break;
            case 2:
				if (jQuery.support.opacity == true) {
					$('.shadow' + imgNr).stop().animate({
						width: imgWidth + 20,
						top: imgTop - 1200,
						left: imgLeft - 10,
						opacity: "0"
					}, animationSpeedDeHighlight);
				}
//                deStretchLabel();
				$('.homePopup2').fadeOut(animationDelay);
                break;
            case 3:
				if (jQuery.support.opacity == true) {
					$('.shadow' + imgNr).stop().animate({
						width: imgWidth + 20,
						top: imgTop - 1190,
						left: imgLeft - 10,
						opacity: "0"
					}, animationSpeedDeHighlight);
				}
                break;
            case 4:
				if (jQuery.support.opacity == true) {
					$('.shadow' + imgNr).stop().animate({
						width: imgWidth + 20,
						top: imgTop - 1180,
						left: imgLeft - 10,
						opacity: "0"
					}, animationSpeedDeHighlight);
				}
                break;
            default:
                break;
        }
/*        
        $imgCont.stop().animate({
            width: newWidth,
            top: newTop,
            left: newLeft
        }, animationSpeedDeHighlight).css("z-index", 10);
        
        $childImage.stop().animate({
            marginLeft: "-50px"
        }, animationSpeedDeHighlight);
        
        $childReflect.stop().animate({
            marginLeft: "-50px"
        }, animationSpeedDeHighlight);
*/        
        $('.label' + imgNr + ' a').css('color', '#cccccc');
        imageAnimated = false;
    }
}
var stretchLabel = function(){
    $('.labelBG1').stop().animate({
        width: "325px"
    }, animationSpeedHighlight);
    $('.labelBG2').stop().animate({
        width: "485px"
    }, animationSpeedHighlight);
}
var deStretchLabel = function(){
    $('.labelBG1').stop().animate({
        width: "300px"
    }, animationSpeedDeHighlight);
    $('.labelBG2').stop().animate({
        width: "460px"
    }, animationSpeedDeHighlight);
}
var stopPropag = function(e){
    if (e.stopPropagation) {
        e.stopPropagation();
    } //For 'Good' browsers
    else {
        e.cancelBubble = true;
    } //For IE
}
var setOpacityTo1 = function(){
    $('.homeImage1, .homeImage2, .homeImage3, .homeImage4').fadeTo(animationSpeedFade, 1);
}