$(document).ready(function(){

    // galeria
    $('#conGNavi ul li').hover(function(){
        $(this).addClass('hover');
    }, function(){
        $(this).removeClass('hover');
    });

    activeItem = 0;
    itemsCount = $('#conGNavi ul li').length;

    $('#conGNavi ul li').click(function(){

        clickedId = $(this).children('img.color').attr('id');

        arrayId = clickedId.split('_');
        activeItem = arrayId[1];

        var size = '458x2000';

        if($('#conGallery').attr('class') == 'bigGallery'){
            size = '766x462';
        }

        loadGalleryImage(activeItem,size);


    });

    $('#GLeft').click(function(){

        $(this).blur();

        if(activeItem > 0){
            loadGalleryImage(--activeItem,'766x462');
        }

        return false;

    });


    $('#GRight').click(function(){

        $(this).blur();

        if(activeItem < itemsCount-1){
            loadGalleryImage(++activeItem,'766x462');
        }

        return false;

    });

});

function loadGalleryImage(number,size){

        var height = $('#conGItem img').height();
        var width = $('#conGItem img').width();
        var position = $('#conGItem img').position();
        $('#conGItem .loader').css('height', height);
        $('#conGItem .loader').css('width',width);
        $('#conGItem .loader').css('top',position.top);
        $('#conGItem .loader').css('left',position.left);
        $('#conGItem').addClass('loading');

        $('#conGNavi ul li').removeClass('active');
        $('#GNaviItem_'+number).parent().addClass('active');


        var $href= '/public/images/resize/'+ size +'/i/'+$('#GNaviItem_'+number).attr('alt');


       var img = new Image();

       $(img).load(function () {

           $(this).hide();
           $('#conGItem').removeClass('loading');
           $('#conGItem img:first').remove();
           //$('#conGItem img:first').attr('style','position: absolute; top: 0; left: 0;');
           $('#conGItem').append(this);
           $(this).fadeIn('normal');
             /*
           $(this).fadeIn('normal', function(){
                   $('#conGItem img:first').remove();
                   $('#conGItem').removeClass('loading')
               }
           );*/

         })
         .error(function () {
           // notify the user that the image could not be loaded
         })
         .attr('src', $href);


}