$(function() {
    var leviSuzen = false;
    var srednjiSuzen = false;
    var desniSuzen = false;
    var leviSakriven = false;
    var srednjiSakriven = false;
    var desniSakriven = false;
    $("#k-srednja").hover(highlightS,highlightS);
    $("#k-leva").hover(highlightL,highlightL);
    $("#k-desna").hover(highlightD,highlightD);

    $("#k-srednja").click(function() {
        if(!leviSuzen && !leviSakriven){
            suziLevi();
            $(this).fadeOut(500);
            srednjiSakriven = true;
            $("#telefoni").fadeIn(500);
            suziDesni();
        }
        else if(srednjiSuzen && leviSakriven){
            $("#k-leva").fadeIn(500);
            leviSakriven = false;
            $("#racunari").fadeOut(500);
            siriSrednjiSaDesna();
            siriDesni();
        }
        else if(srednjiSuzen && leviSuzen){
            siriLevi();
            $("#k-desna").fadeIn(500);
            desniSakriven = false;
            $("#internet").fadeOut(500);
            siriSredjniSaLeva();
        }
    });
    
    $("#k-leva").click(function() {
        if(leviSuzen && srednjiSakriven){
            siriLevi();
            $("#k-srednja").fadeIn(500);
            srednjiSakriven = false;
            $("#telefoni").fadeOut(500);
            siriDesni();
        }
        else if(leviSuzen && srednjiSuzen){
            siriLevi();
            $("#k-desna").fadeIn(500);
            desniSakriven = false;
            $("#internet").fadeOut(500);
            siriSredjniSaLeva();
        }
        else {
            suziDesni();
            $("#k-leva").fadeOut(500);
            leviSakriven = true;
            suziSrednjiDesno();
            $("#racunari").fadeIn(500);
        }
    });
    
    $("#k-desna").click(function() {
        if(desniSuzen && srednjiSakriven){
            siriDesni();
            $("#k-srednja").fadeIn(500);
            srednjiSakriven = false;
            $("#telefoni").fadeOut(500);
            siriLevi();
        }
        else if(desniSuzen && leviSakriven){
            $("#k-leva").fadeIn(500);
            leviSakriven = false;
            $("#racunari").fadeOut(500);
            siriSrednjiSaDesna();
            siriDesni();
        }
        
        else if(!desniSuzen){
            suziLevi();
            $("#k-desna").fadeOut(500);
            desniSakriven = true;
            $("#internet").fadeIn(500);
            suziSrednjiLevo();
        }
    });
    
    $("#refs").fancybox({
				'overlayOpacity'	: '0.8',
				'width'				: 400,
				'height'			: 300,
				'autoScale'			: false,
				'autoDimensions'	: false,
				'transitionIn'		: 'elastic',
				'transitionOut'		: 'elastic',
				'type'				: 'iframe'
			});
    
    
    function siriLevi (){
        $("#k-leva").animate({ 
            width: "250px",
            left: "45px"
        }, 500);
        $("#k-leva img").animate({ 
            width: "250px", 
            height: "250px",
            opacity: "1"
        }, 500);
        setTimeout (function(){
            $("#k-leva p").fadeIn(500);
        },300);
        leviSuzen = false;
    }
    
    function suziLevi (){
        $("#k-leva").animate({ 
            width: "20px",
            left: "15px"
        }, 500);
        $("#k-leva img").animate({ 
            width: "10px", 
            height: "250px",
            opacity: "0.4"
        }, 500);
        $("#k-leva p").fadeOut(300);
        leviSuzen = true;
    }
    function siriDesni (){
        $("#k-desna").animate({ 
            width: "250px",
            right: "45px"
        }, 500);
        $("#k-desna img").animate({ 
            width: "250px", 
            height: "250px",
            opacity: "1"
        }, 500);
        setTimeout (function(){
            $("#k-desna p").fadeIn(500);
        },300);
        desniSuzen = false;
    }
    
    function suziDesni (){
        $("#k-desna").animate({ 
            width: "20px",
            right: "15px"
        }, 500);
        $("#k-desna img").animate({ 
            width: "10px", 
            height: "250px",
            opacity: "0.4"
        }, 500);
        $("#k-desna p").fadeOut(300);
        desniSuzen = true;
    }
    
    function siriSrednjiSaDesna (){
        $("#k-srednja").animate({ 
            width: "250px",
            left: "350px"
        }, 500);
        $("#k-srednja img").animate({ 
            width: "250px", 
            height: "250px",
            opacity: "1"
        }, 500);
        setTimeout (function(){
            $("#k-srednja p").fadeIn(500);
        },300);
        srednjiSuzen = false;
    }
    
    function suziSrednjiDesno (){
        $("#k-srednja").animate({ 
            width: "20px",
            left: "865px"
        }, 500);
        $("#k-srednja img").animate({ 
            width: "10px", 
            height: "250px",
            opacity: "0.4"
        }, 500);
        $("#k-srednja p").fadeOut(300);
        srednjiSuzen = true;
    }
    function suziSrednjiLevo (){
        $("#k-srednja").animate({ 
            width: "20px",
            left: "65px"
        }, 500);
        $("#k-srednja img").animate({ 
            width: "10px", 
            height: "250px",
            opacity: "0.4"
        }, 500);
        $("#k-srednja p").fadeOut(300);
        srednjiSuzen = true;
    }
    
    function siriSredjniSaLeva (){
        $("#k-srednja").animate({ 
            width: "250px",
            left: "350px"
        }, 500);
        $("#k-srednja img").animate({ 
            width: "250px", 
            height: "250px",
            opacity: "1"
        }, 500);
        setTimeout (function(){
            $("#k-srednja p").fadeIn(500);
        },300);
        srednjiSuzen = false;
    }
    
    function highlightS(evt) {
        $("#k-srednja").toggleClass("kockaHover");
    }
    function highlightL(evt) {
        $("#k-leva").toggleClass("kockaHover");
    }
    function highlightD(evt) {
        $("#k-desna").toggleClass("kockaHover");
    }
    
});