var Goji_Out="http://www.pourte.se/images/Goji_Out.png";
var Goji_Over="http://www.pourte.se/images/Goji_Over.png";

var Jordgubb_Out="http://www.pourte.se/images/Jordgubb_Out.png";
var Jordgubb_Over="http://www.pourte.se/images/Jordgubb_Over.png";

var Kaktus_Out="http://www.pourte.se/images/Kaktus_Out.png";
var Kaktus_Over="http://www.pourte.se/images/Kaktus_Over.png";

var Mango_Out="http://www.pourte.se/images/Mango_Out.png";
var Mango_Over="http://www.pourte.se/images/Mango_Over.png";

var descId;
var active = false;

var time = 200;
var isIE = false;

function init()
{   

    if(document.images)
    {
        var img1 = new Image();
        img1.src = "http://www.pourte.se/images/Goji_Over.png";
        
        var img2 = new Image();
        img2.src = "http://www.pourte.se/images/Jordgubb_Over.png";
        
        var img3 = new Image();
        img3.src = "http://www.pourte.se/images/Kaktus_Over.png";
        
        var img4 = new Image();
        img4.src = "http://www.pourte.se/images/Mango_Over.png";
    }
    
    if($.browser.msie)
    {
        time = 1;
        isIE = true;
    }
    
    $('.product').click(function () { 
        
        if(!active){
            active = true;
            var clickedId = this.id;
            
            var srcOut = getOutImage(this.id);    
            $(this).css('backgroundImage','url(' + srcOut +')');
            
            if(!isIE)
            {
                $(descId).fadeOut(time);
                $('#products').fadeOut(time, function() {                
                    showProduct(clickedId);
                }); 
            }
            else
            {
                $(descId).css('display' , 'none');
                $('#products').css('display', 'none');
                showProduct(clickedId); 
            }    
        
        }
    });
    
    
    $('.product').mouseover(function() {
        var srcOver = getOverImage(this.id);
        $(this).css('backgroundImage','url(' + srcOver +')');
        if(!isIE)
        {
            $(descId).stop(true, true).fadeIn(time);
        }
        else
        {
            $(descId).css('display', 'inline');   
        }
   });
   
    $('.product').mouseout(function() {
        var srcOut = getOutImage(this.id);
        $(this).css('backgroundImage','url(' + srcOut +')');
        
        if(!isIE)
        {
            $(descId).fadeOut(time); 
        }
        else
        {
            $(descId).css('display' , 'none');   
        }

   }); 
}

function getOverImage(id)
{
    var img;
    
    switch(id)
    {
        case 'product01':
          img = Goji_Over;
          descId = '#p01'; 
        break;
        case 'product02':
          img = Jordgubb_Over;
          descId = '#p02'; 
        break;
        case 'product03':
          img = Kaktus_Over;
          descId = '#p03';  
        break;
        case 'product04':
          img = Mango_Over;
          descId = '#p04'; 
        break;    
    }
    
    return img;
}

function getOutImage(id)
{
    var img;
    
    switch(id)
    {
        case 'product01':
          img = Goji_Out;
          descId = '#p01'; 
        break;
        case 'product02':
          img = Jordgubb_Out;
          descId = '#p02';
        break;
        case 'product03':
          img = Kaktus_Out;
          descId = '#p03'; 
        break;
        case 'product04':
          img = Mango_Out;
          descId = '#p04';
        break;    
    }
    
    return img;
}


function showProduct(id)
{   

    var o;
    switch(id)
    {
        case 'product01':
          o = '#productZoom01'; 
        break;
        case 'product02':
          o = '#productZoom02';
        break;
        case 'product03':
          o = '#productZoom03'; 
        break;
        case 'product04':
          o = '#productZoom04';
        break;    
    }
    
        
    if(!isIE)
    {
        $(o).fadeIn(time, function(){
            document.onclick = function()
            {
                $(o).fadeOut(time, function() {
                    $('#products').fadeIn(time, function(){
                        document.onclick= null;
                        active = false; 
                    } );
                }); 
            }
        });
    }
    else
    {
        $(o).css('display' , 'block');
        interval = setInterval(function() { addClick(o); }, 10);
    }
}


function addClick(o)
{
    //alert('hej');
    clearInterval(interval);
    
    document.onclick = function()
    {            
        $(o).css('display' , 'none');
        $('#products').css('display', 'block');
        document.onclick= null;
        active = false; 
    }
}