$().ready(function(){

    $('.gallery').each(function(){
        var $this = $(this);
        var $thumbs = $this.children('.thumbnails');
        var $primary = $this.children('.primary');
        var $viewport = $thumbs.children('.viewport');

        $thumbs.find('li').click(function(){
            var id = this.id.substr(this.id.lastIndexOf('-')+1);
            $.getJSON(Ctrl.Config.baseUrl + '/media/thumbnail/format/json/id/'+ id +'/width/' + $primary.width() + '/height/' + $primary.height() + '/crop/0', function(json) {
                var newImg = $(json.tag).hide().appendTo($primary).fadeIn(600);
                newImg.load(function(){
                    $primary.find('img:first').fadeOut(600, function(){ $primary.find('img:first').remove(); });
                });

            });
        });
        
             $viewport.css({height: $thumbs.height(), overflow: 'hidden'}).jScrollPane({
                scrollbarWidth: 10,
                showArrows: true,
                dragMinHeight: 38,
                dragMaxHeight: 38,
                trackPadding: 12
            });
    
            
    });
    
});