$(document).ready(function(){

    

    var pItemPadding = 40;//отступ между элементами

    var pBigItemPadding = 108; //отступ от большой картинки

    var pSmallWidth = 430;//размер маленьких элементов

    var pBigWidth = 541;//размер больших элементов

    

    var pDefaultItem = 7; // номер картинки, отображаемой по-умолчанию

    

    var oListContainer = $('#portfolio-list');

    var oList = oListContainer.find('.portfolio-item');

    var cItems = oList.size();

    var i;

    var currItem;

    //Определяем какой элемент будет текущим по умолчанию. в данный момент - третий

    $(oList[pDefaultItem-1]).addClass('curr');

    

    

    fillPositions();

        

    

    $('.left-but').click(function(){

        $(oList).removeClass('curr');

        currId = currItem.substring(3)-0;

        $('#pi-'+(currId-1)).addClass('curr');

        $('#portfolio-description').fadeOut('fast', fillPositions);

        //fillPositions();

        return false;

    });

    $('.right-but').click(function(){

        $(oList).removeClass('curr');

        currId = currItem.substring(3)-0;

        $('#pi-'+(currId+1)).addClass('curr');

        $('#portfolio-description').fadeOut('fast', fillPositions);

        //fillPositions();

        

        return false;

    });

    

    

    

    //function

    function fillPositions(){

        var bigImgPosition = $('.portfolio-position.big');

        for(i=0; i<cItems; i++){

            var oItem = $(oList[i]);

            

            if(oItem.hasClass('curr')){

                currItem = oItem.attr('id');

                bigImgPosition.html('<div class="portfolio-img-cont">'+oItem.html()+'</div>');

                var portfolioImgCont = bigImgPosition.find('.portfolio-img-cont');

          //      if(portfolioImgCont.height() > bigImgPosition.height()){

                    portfolioImgCont.draggable({

                        axis: "y",

                        snap: true,
						stop: function(){
                            var thisPosition = $(this).position();  
                            var thisHeight = $(this).outerHeight(); 
                            var thisWidth = $(this).outerWidth(); 
                            var screenHeight = $('.portfolio-position.big').height();
                            var screenWidth = $('.portfolio-position.big').width();                        
                            if(thisPosition.top > 0) $(this).css('top', 0+'px');
                            if(thisPosition.top < 0-(thisHeight-screenHeight)) $(this).css('top', (0 - (thisHeight-screenHeight))+'px');
                            if(thisPosition.left > 0) $(this).css('left', 0+'px');
                            if(thisPosition.left < 0-(thisWidth-screenWidth)) $(this).css('left', (0 - (thisWidth-screenWidth))+'px');
                        }

                    });

           //     }

                

                $('#portfolio-description').html(oItem.find('.portfolio-item-descr').html()).fadeIn();

                

                

                if(i-1 >= 0){

                    $('#p-2').html('<div class="portfolio-img-cont">'+$(oList[i-1]).html()+'</div>'); 

                }

                else{

                    $('#p-2').empty();

                }

                if((i-2) >= 0){

                    $('#p-1').html('<div class="portfolio-img-cont">'+$(oList[i-2]).html()+'</div>'); 

                }

                else{

                    $('#p-1').empty();

                }

                if(i+1 < cItems){

                    $('#p-4').html('<div class="portfolio-img-cont">'+$(oList[i+1]).html()+'</div>'); 

                }

                else{

                    $('#p-4').empty();

                }

                if(i+2 < cItems){

                    $('#p-5').html('<div class="portfolio-img-cont">'+$(oList[i+2]).html()+'</div>'); 

                }

                else{

                    $('#p-5').empty();

                }

                $('.portfolio-img-cont').fadeIn();

            }

        }

    }

    //end function

    

    

});