///////////////////////////
// JOWE SLIDE 0.2
///////////////////////////
window.addEvent('domready', function() {
	
	// Keylistener
	Element.Events.keyright = {
		base: 'keyup',
		condition: function(e){
			return e.key=='right';
		}
	};
	
	Element.Events.keyleft = {
		base: 'keyup',
		condition: function(e){
			return e.key=='left';
		}
	};
	
	// Lagra variablar i varje div kallad .imgHolder
	$$('.imgHolder').each(function(myVerticalSlideEx) {
		var vertSlideId = myVerticalSlideEx.id.split('_')[1];
		var myVerticalSlide = new Fx.Slide(myVerticalSlideEx);
	});
	// Generella variablar
	var currSlide = 0;
	var totalSlide = 25;
	
	$$('.slideImages').each(function(slideImage) {
		// Variablar
		var i = 1;
		var slot_ = 0;
		var images = slideImage.getElements('img');
		slideImage.store('length_', images.length);
		// Animation
		var myTransition = new Fx.Transition(Fx.Transitions.Quad);
		var scroll = new Fx.Tween(slideImage, {
			duration: 200,
			transition: myTransition.easeOut
		});
		var slide = new Fx.Tween($('navslider-slider'), {
			duration: 200,
			transition: myTransition.easeOut
		});
		
		// Slider
			var mySlide = new Slider($('navslider-area'), $('navslider-slider'), {  
    	    steps: -25,  
    	    wheel: 1,  
    	    onChange: function(step){
   				scroll.start('margin-left', step * 970 + 'px');
   				slot_ = step;
    			$('slot-label').set('html',slot_);
    			currSlide = String(slot_*-1)+"/"+totalSlide;
   				$('navslider-label').set('html',currSlide);
        	}
    	}).set(0);
		
		// Drag funktion
		new Drag(slideImage, {
			snap: 0,
			preventDefault: true,
			limit: {
				x: [-((images.length - 1) * 970), 0],
				y: [0, 0]
			},
			modifiers: {
				x: 'margin-left',
				y: 'margin-top'
			},
			onStart: function(e){
				slideImage.store('start_', e.getStyle('margin-left').toInt());
			},
			onComplete: function(e){
				margin = e.getStyle('margin-left').toInt();
				length_ = slideImage.retrieve('length_').toInt();
				start_ = slideImage.retrieve('start_').toInt();
				slot_ = (margin / 970).toInt();

				if(start_ > margin) slot_--;
				if(slot_ > 0) slot_ = 0;
				if(slot_ < -(length_ - 1)) slot_ = -(length_ - 1);
    			scroll.start('margin-left', slot_ * 970 + 'px');
    			mySlide.set(slot_);
    			$('slot-label').set('html',slot_);
    			currSlide = String(slot_*-1)+"/"+totalSlide;
   				$('navslider-label').set('html',currSlide);
			}
		});
		
		//Klick funktion
		/*$('home').addEvent('click', function(event) {
			slot_ = 0;
			event = new Event(event).stop();
			mySlide.set(slot_);
    		$('slot-label').set('html',slot_);
    		currSlide = String(slot_*-1)+"/"+totalSlide;
   			$('navslider-label').set('html',currSlide);
		});*/
		
		// Right
		window.addEvent('keyright', function(event) {
			if( slot_ > ((images.length-1) * -1)) {
				slot_--;
				event = new Event(event).stop();
	    		scroll.start('margin-left', slot_ * 970 + 'px');
	    		mySlide.set(slot_);
    			$('slot-label').set('html',slot_);
    			currSlide = String(slot_*-1)+"/"+totalSlide;
   				$('navslider-label').set('html',currSlide);
			}
		});
		
		// Left
		window.addEvent('keyleft', function(event) {
			if( slot_ < 0) {
				slot_++;
				event = new Event(event).stop();
	    		scroll.start('margin-left', slot_ * 970 + 'px');
	    		mySlide.set(slot_);
    			$('slot-label').set('html',slot_);
    			currSlide = String(slot_*-1)+"/"+totalSlide;
   				$('navslider-label').set('html',currSlide);
			}
		}); 
    
	});	
});