$(document).ready(function(){
    var curWidth=$('.gRazd').width();  //Default width
    var curImg=$("#main_img").attr('src');

    /* Hover animation */
    $('.gRazd').hover(
        function(){
        $(this).attr('rel','sel');
        var w=$(this).children().width();  
        $(".gRazd[rel!=sel] img").animate({opacity: 0}, 200);
        $(this).animate({width: w}, 300);
    },
        function(){
        $(this).removeAttr('rel'); 
        $(this).animate({width: curWidth}, 300);
        $(".gRazd img").animate({opacity: 1}, 200);
    }); 
    
    /* Image change */
    $(".gRazd img").click(function(){
        var link=$(this).attr('rel');
        var idn=$(this).parent().parent().index(); 
        id='#gGallery'+(idn+1);
        $("#gContent").hide();
        $("#gColors").hide();
        $("#gClose").show();
        $(id).show();
        $("#main_img").attr('src',link);    
    });
    
    /* Image change into gallery and into #gColors */
    $(".gGals img.gPhoto, #gColors img").click(function(){
        var link=$(this).attr('rel');
        $("#main_img").attr('src',link);    
    });
    
    /*Fix for IE hover class*/
    $(".gRazd img.gPhoto, img.gPhoto").hover(function(){
        $(this).addClass("gPhoto sel");       
    },
        function(){
        $(this).removeClass("sel"); 
    });
    
    /* Close button */
    $("#gClose").click(function(){
        $("#main_img").attr('src',curImg);
        $("#gClose").hide();
        $(".gGals").hide();
        $("#gContent").show();
        $("#gColors").show();    
    });
    
    
});
