var len1=0;
var mar=0;
$(document).ready(function(){
    
    
    len1 = $('#smallpics ul li').length*257-2*257;

    $("#car a").on('hover',function(){
        addcarinfo(this);
    });
    
    
    $("#car a").bind('mouseout',function(){
      
        $(".sminfo").remove();
       
    })
    
    
    $('#smallpics ul li a').on('click',function(e){
       
       var bigimg = $(this).data('big');
       $("#ocbigpic").css('background-image','url('+bigimg+')');
       
        e.preventDefault();
    });
    
//    $('#smallpics ul li a').on('mousedown',function(e){
//        var delta;
//        $(this).on('mousemove',function(mm){
//            delta = e.clientX -mm.clientX;
//            $('#smallpics ul').css('margin-left','-'+delta+'px');
//        });
//    });
//    
//    $('#smallpics ul li a').on('mouseup',function(){
//       $(this).off('mousemove');
//    });


    $("#pagright").on('click',function(){
        mar -=257;
        if(mar<-len1)mar = -len1;
        //console.log(mar,-len1)
        slide();
    });
    
    $("#pagleft").on('click',function(){
        mar +=257;
        if(mar>0)mar=0;
        slide();
       // console.log(mar,-len1)
    });
    
    
});


function addcarinfo(elem){
    var lef =$(elem).position().left+($(elem).width()+10)/2-269/2;
    
    $("#car").append('<div class="sminfo" style="left:'+lef+'px;"><h6>'+$(elem).data('header')+'</h6><p>'+$(elem).data('text')+'</p><div class="smprice">'+$(elem).data('price')+'</div></div>');
    $('.sminfo').fadeIn('slow');
    
}



function slide(){
    $('#smallpics ul').animate({marginLeft:mar},500);
}