var Gallery = {
     init: function(){       
       this.setscroll();
       this.setclick();
       this.gotoframe();
     },
     setscroll: function(){
          $('#displayBox').serialScroll({
           target:'#images',
           items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
           onBefore:function( e, elem, $pane, $items, pos ){
              e.preventDefault();
              if( this.blur )
                 this.blur();
           },
           onAfter:function( elem ){
             //'this' is the element being scrolled ($pane) not jqueryfied
           }
          });
          $('#displayBox_list').serialScroll({
            target:'#images2',
            items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
            prev:'img.prev',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
            next:'img.next',// Selector to the 'next' button (absolute too)
            axis:'xy',// The default is 'y' scroll on both ways
            start:0,
            cycle:true,
            duration:700,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
            force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
            onBefore:function( e, elem, $pane, $items, pos ){
               e.preventDefault();
               if( this.blur )
                 this.blur();
            },
            onAfter:function( elem ){
             //'this' is the element being scrolled ($pane) not jqueryfied
            }
         });
     },
     setclick: function(){
        $('.view_larger').click(function() { 
            $.blockUI({ 
                overlayCSS: { 
                    backgroundColor: '#113600', 
                    cursor:'default', 
                    opacity: '0.75', 
                    zIndex:'8999'
                },
                css: { 
                    top: '0',
		    left: '20%',
                    margin: '50px auto',
                    width: '642px',
                    height: '475px',
                    cursor: 'default',
                    border: 'none',
		    zIndex: '9000'
                },
                message: $('div#displayBox')
            });
	    $('.close_btn').ifixpng();
	    $('.close_btn').click(function(){ $.unblockUI(); });
            $('.blockOverlay').attr('title','Click pentru a debloca').click(function(){ $.unblockUI();});
        });
        $('.view_larger2').click(function() {
            $.blockUI({
                overlayCSS: { 
                    backgroundColor: '#113600', 
                    cursor:'default', 
                    opacity: '0.75', 
                    zIndex:'8999'
                },
                css: {
                    top: '0',
                    left: '20%',
                    margin: '50px auto',
                    width: '642px',
                    height: '475px',
                    cursor: 'default',
                    border: 'none',
                    zIndex: '9000'
                },
                message: $('div#displayBox2')
            });
            $('.close_btn').ifixpng();
            $('.close_btn').click(function(){ $.unblockUI(); });
            $('.blockOverlay').attr('title','Click pentru a debloca').click(function(){ $.unblockUI();});
        });
        $('.view_larger_list').click(function() {
            $.blockUI({
                overlayCSS: { 
                    backgroundColor: '#113600', 
                    cursor:'default', 
                    opacity: '0.75', 
                    zIndex:'8999'
                },
                css: {
                    top: '0',
                    left: '20%',
                    margin: '50px auto',
                    width: '642px',
                    height: '475px',
                    cursor: 'default',
                    border: 'none',
                    zIndex: '9000'
                },
                message: $('div#displayBox_list')
            });
            $('.close_btn').ifixpng();
            $('.close_btn').click(function(){$.unblockUI();});
            $('.blockOverlay').attr('title','Click pentru a debloca').click(function(){$.unblockUI();});
         });
       },     
       gotoframe:function(){
          $('.view_larger_list').click(function(i) {
            $('#images2').trigger('goto',[$(".view_larger_list").index(this)]);
          });
       }        
}

$().ready(function(){
    Gallery.init();
});