/*
	Class:    	cvStepSlider
	Author:   	Crispijn Verkade
	Website:    http://crispijnverkade.nl
	Version:  	1.0
	Date:     	11/03/2009
	Built For:  MooTools 1.2.0
*/

var cvStepSlider = new Class({
	
	Implements: [Options,Events,Chain],

	options: {
		wrapper: 'portfolio_index',				//wrapper for the list elements
		list: 'items',							//select list 
		items: '#portfolio_index ul li img',	//select list elements
		itemWidth: 140,							//int pixels
		itemHeight: 105,						//int pixels
		startSlide: 1,							//slide to start
		type: 'horizontal',						//type of the slider
		step: 'item',							//step per item or per slide
		nextbutton: 'next',						//next button
		prevbutton: 'prev',						//prev button
		log: true,								//Log click actions or not?
		result: 'res',							//div to show result
		visited: [],							//Array with visited items
		preloadImages: []						//Array with preloaded images
	},
	
	initialize: function(options) {
		//set options
		this.setOptions(options);
		
		//define variables
		this.items = $$(this.options.items);
		this.wrapperHeight = 0;
		this.wrapperWidth = 0;
		this.offset = 0;
		this.slides = this.countSlides();
		this.slide = this.options.startSlide;
		this.images = this.options.preloadImages;
		this.urls = [];
		this.history = [];
		this.visited = this.options.visited;
		
		//run the functions
		this.prepare();
	},
	
	prepare: function(){
		var self = this;
		
		$(this.options.list).hide();
		if(this.options.type == 'horizontal'){
			$(this.options.list).setStyle('width', this.items.length * this.options.itemWidth);
		}
		
		$(this.options.nextbutton).addEvent('click', this.toNextPrev.bind(this,'next',[true]));
		$(this.options.prevbutton).addEvent('click', this.toNextPrev.bind(this,'prev',[true]));
		$(this.options.wrapper).addEvent('mousewheel', function(e){
			e = new Event(e).stop();
			self.toNextPrev(e.wheel < 0 ? 'next' : 'prev');
		});
		
		$(this.options.prevbutton).addEvents({
			'mouseenter' : function(){
				this.addClass('prev_hover');
			},
			'mouseleave' : function(){
				this.removeClass('prev_hover');
			}
		});
		
		$(this.options.nextbutton).addEvents({
			'mouseenter' : function(){
				this.addClass('next_hover');
			},
			'mouseleave' : function(){
				this.removeClass('next_hover');
			}
		});

		window.addEvent('backbutton', function(e){
			self.goBack(e);
		});
				
		this.items.each(function(i){
			self.urls.push(i.getParent().getAttribute ('href'));
			self.images.push(i.getAttribute('src'));
			
			if(self.visited.contains(i.getParent().getAttribute ('href'))){
				i.addClass('visited');
			}else{
				i.addEvents({
					'mouseenter' : function(){
						this.get('tween', {property: 'opacity', duration: 300}).start([.6,1]);//.addClass('item_hover');
					},
					'mouseleave' : function(){
						this.get('tween', {property: 'opacity', duration: 300}).start([1,.6]);//.removeClass('item_hover');
					},
					'click' : function(){
						i.addClass('visited');
						self.addVisited(i);
					}
				});

				i.get('tween', {property: 'opacity', duration: 300}).start([1,.6]);
			}
		});
		
		var loading = new Asset.images(self.images, {
			onComplete: function(){
				if(self.options.log == true){
					$(self.options.result).set('html','<p>All images preloaded in <strong>' + self.options.wrapper + '</strong>, start using cvStepSlider!</p>');
				}				
				
				$(self.options.wrapper).removeClass('loading');
				$(self.options.list).show();
				
				self.gotoItem();
				self.navInit();
			}
		});
		
	},
	
	goBack:function(e){		
		alert('back' + e);
	},
	
	countSlides: function(){
		this.wrapperWidth = $(this.options.wrapper).getWidth();
		
		return Math.ceil((this.items.length) / (this.wrapperWidth / this.options.itemWidth));
	},
	
	addVisited: function(e){
		this.visited.push(e.getParent().getAttribute ('href'));
		
		if(this.options.log == true){
			$(this.options.result).set('html','<p><strong>Load item: </strong>' + e.getParent().getAttribute ('href') + '</p>');
		}
		
		e.removeEvents('mouseleave');
		e.removeEvents('mouseenter');
	},
	
	gotoItem: function(){
		var url = document.location.hash.replace('#', '');
		if(url){
			var item = this.urls.indexOf('#' + url) + 1;
			this.slide = Math.ceil((item) / (this.wrapperWidth / this.options.itemWidth));
			
			this.toNextPrev(true,this.slide,item);
		}else{
			this.slide = 1;
		}
	},
	
	navInit: function(){
		if(this.slide == 1){
			$(this.options.prevbutton).addClass('non_active');
		}if(this.slide == this.slides){
			$(this.options.nextbutton).addClass('non_active');
		}else{
			$(this.options.prevbutton).removeClass('non_active');
		}
	},
	
	toNextPrev: function(direction,slide,item){
		var margin = this.options.type == 'horizontal' ? 'left' : 'top';
		
		if(!slide){
			if(this.options.type == 'horizontal'){
				var jump = this.options.step == 'slide' ? this.wrapperWidth : this.options.itemWidth;
				
				if(direction == 'next'){
					if(this.options.step == 'slide' && this.offset <= 0 && this.offset >= -(this.slides - 2) * this.wrapperWidth){
						this.offset = this.offset - jump;
					}else if(this.options.step == 'item' && this.offset <=0 && this.offset > -((this.items.length-(this.wrapperWidth / this.options.itemWidth)) * this.options.itemWidth)){
						this.offset = this.offset - jump;
					}
				}else if(direction == 'prev' && this.offset != 0){
					this.offset = this.offset + jump;
				}
			}else if(this.options.type = 'vertical'){
				var jump = this.options.step == 'slide' ? this.wrapperHeight : this.options.itemHeight;
				
				if(direction == 'next' && this.offset <= 0 && this.offset >= -(this.slides - 2) * this.options.itemHeight){
					this.offset = this.offset - jump;
				}else if(direction == 'prev' && this.offset != 0){
					this.offset = this.offset + jump;
				}
			}else{
				alert('unknown type');
			}
		}else{
			if(this.options.type == 'horizontal'){
				if(this.options.step == 'slide' == item > (this.wrapperWidth / this.options.itemWidth)){
					this.offset = -(slide.toInt() * this.wrapperWidth) + this.wrapperWidth;
				}else{
					this.offset = (item-5) * -this.options.itemWidth;
				}
			}else{
				this.offset = -(slide.toInt() * this.options.itemHeight) + this.options.itemHeight;
			}
		}
		
		this.navInit();
		var myEffect = new Fx.Tween($(this.options.list));
		myEffect.start('margin-' + margin, this.offset);
	}	
});