var jvinterval = null;
var jvflow = null;

window.addEvent('domready', function(){
	//makeScrollbar($('gallery'), $('myImageFlow-navigation').getElement('.scrollbar'), $('myImageFlow-navigation').getElement('.item-scrollbar'));
	
    jvflow = new ImageFlow();
    
    if(jvflow.options.autoplay){
        
        jvinterval = setInterval('jv_autoplay()', 3000);
    }
      
});


function jv_autoplay(){
  if(jvflow.options.direction=='next'){
    $('next').fireEvent('click');  
    
  }else{
    $('prev').fireEvent('click');
  }  
  
  
}
var ImageFlow = new Class({

	options:{				
		delay: 5000,
		duration: 700,
		transition: Fx.Transitions.Sine.easeInOut,
		forceEffect: 1,
		fx: 'fade',
        autoplay:true,
        direction:'next',
        totIncrement: 0,
        increment: 93
	},
	
	initialize: function(selector, options){
		this.setOptions(options);
		this.setup();
       
        
	},
    	
	jv_autoplay: function(){
	   var options = this.options;
       
       if(options.autoplay){
            if(options.direction=='next'){
                var maxRightIncrement	= options.increment*(-5);		
        		var fx = new Fx.Style('gallery', 'margin-left', {
        					duration: 900,
        					transition: Fx.Transitions.Back.easeInOut,
        					wait: true
        		});
        		/////
        		 $('gallery').setAttribute('margin-left',30);
        		 if(options.totIncrement>maxRightIncrement){
        			 options.totIncrement = options.totIncrement-options.increment;
        	    	fx.stop();
        			fx.start(options.totIncrement);
        		}	
            }else{
                if(totIncrement<0){
			     //clearInterval(jvinterval);
				totIncrement = totIncrement+increment;
				fx.stop();
				fx.start(totIncrement);
			}	
            }
    			
    	   //////	
       }
       
	},
    
	setup: function(){
		var that = this;
		var myImage = $('myImage');
        
        var imgtotal = 0;
        var sttImg = 0;
        var arrImg = Array();
        
		if(!myImage) return;
		var previewImage = myImage.getElement('.myImage-content img');
		previewImage.fx = new Fx.Styles(previewImage, {
			duration: that.options.duration,
			transition: that.options.transition,
			property: 'opacity',
			wait: false
		}).set({opacity: 1});
		
        var previewCaption = myImage.getElement('.myImage-captions p');
		previewCaption.fx = new Fx.Styles(previewCaption, {
			duration: that.options.duration,
			transition: that.options.transition,
			property: 'opacity',
			wait: false
		}).set({opacity: 1});
        
		var gallery = $('gallery');
		var aTags = gallery.getElements('a');
		if(!aTags.length) return;
		
		aTags.each(function(aLink){
             imgtotal++;
             
             arrImg[imgtotal] = aLink;
			 aLink.removeEvent('click').addEvent('click', function(e){
			    
				new Event(e).stop();	
				previewCaption.fx.clearChain();				
				previewImage.fx.start({opacity: 0.3});
				previewCaption.fx.start({opacity: 0.3}).chain(function(){
					previewImage.setProperty('src', aLink.getProperty('href'));
					previewCaption.setHTML(aLink.getProperty('title'));
					previewImage.fx.start({opacity: 1});
					previewCaption.fx.start({opacity: 1})	
				});				
			});
		});
        
        
		var totIncrement		= 0;
		var increment			= 105;
		
        var posImg = 1;
        var imgshow = 1; // number of image show in slide thumbnail
        
        var maxRightIncrement	= increment*(-1)*(imgtotal-imgshow);	
        	
		var fx = new Fx.Style('gallery', 'margin-left', {
					duration: 900,
					transition: Fx.Transitions.Back.easeInOut,
					wait: true
		});
		var prev = $('prev');
		prev.addEvent('click',function(e){
		 
			if(totIncrement<0){
			     
                 posImg--;
                 
                 previewCaption.fx.clearChain();				
				previewImage.fx.start({opacity: 0.3});
				previewCaption.fx.start({opacity: 0.3}).chain(function(){
					previewImage.setProperty('src', arrImg[posImg]);
					
					previewImage.fx.start({opacity: 1});
					previewCaption.fx.start({opacity: 1})	
				});	
                 
				totIncrement = totIncrement+increment;
				fx.stop();
				fx.start(totIncrement);
                 that.options.direction = 'prev';
			}else{
			      that.options.direction = 'next';
			}
          		
		});
		var next = $('next');
		next.addEvent('click',function(e){
		      
			 $('gallery').setAttribute('margin-left',30);
             
                if(totIncrement>maxRightIncrement){
                    
                    posImg++;
                    
    				previewCaption.fx.clearChain();				
    				previewImage.fx.start({opacity: 0.3});
    				previewCaption.fx.start({opacity: 0.3}).chain(function(){
    					previewImage.setProperty('src', arrImg[posImg]);
    					
    					previewImage.fx.start({opacity: 1});
    					previewCaption.fx.start({opacity: 1})	
    				});	
                    
                    
    				totIncrement = totIncrement-increment;
    		    	fx.stop();
    				fx.start(totIncrement);
                    that.options.direction = 'next';
    			}else{
    			     that.options.direction = 'prev';
    			}	
             		 	
		});
        
        
	}
});
ImageFlow.implement(new Options);
ImageFlow.implement(new Events);



function makeScrollbar(content, scrollbar, handle){	
	var steps = content.getSize().scrollSize.y - content.getSize().size.y;	
	var slider = new Slider(scrollbar, handle, {	
		steps: steps,
		mode: 'horizontal',
		onChange: function(step){			
			content.scrollTo(0,step);
		}
	}).set(0);
	$$(content, scrollbar).removeEvent('mousewheel').addEvent('mousewheel', function(e){	
		e = new Event(e).stop();		
		slider.set(slider.step - e.wheel * 30);					
	});
	$(document.body).removeEvent('mouseleave').addEvent('mouseleave', function(){slider.drag.stop()});
}