/**
 *  Alpinist Slider
 *
 *	Usage:
 *        			
 *			var a_slider = new Alpinist_slider( $('container-div') );
 *			
 *			// repeat 5 times for 5 thumbs
 *			a_slider.addThumb({
 *				img_location: "test/test1.jpg", 
 *				thumb_location: "test/thumb1.jpg", 
 *				link_url: "http://www.alpinist.com"
 *			});
 *			
 *
 *			// loops through twice, then stops on the first thumb
 *			a_slider.startRotation();
 *
 *
 *	Tested in:
 *		Firefox 3.6.3
 *		IE 8.0.6
 *		Chrome 4.1.2
 *		Safari
 *
 *	Requires:
 * 		mootools-1.2.4-core-nc.js
 *		mootools-1.2.4.2-more.js
 *
 *	Dimensions:
 *		Total:
 *			width: 728px;
 *			height: 345px;
 *			
 *		Big Image:
 *			width: 621px;
 *			height: 345px; 
 *		
 *		Thumbs:
 *			width: 87px;
 *			height: 57px;
 *	
 *
 */



var Alpinist_slider = new Class({	

	Implements: [Events, Options],
	
	options: {
		fadeTime: 700,
		selectorTime: 250
	},
	
	holder: null,
	big_img_holder: null,
	thumb_holder: null,
	thumbs: [],  // array of thumbs: Thumb (Object) {thumb_location: "", img_location: "", link_url: ""}
	             // a Thumb also contians thumb_img, but this is generated when addThumb is called
	thumb_selector: null,
	thumb_selector_fx: null,
	timer: 0,
	
	initialize: function(container, options) {	
		
		this.setOptions(options);
		
		// make big_img holder
		this.holder = new Element('div', {
			'class': 'as_holder'
		}).inject(container);
		
		// make big_img_holder holder
		this.big_img_holder = new Element('div', {
			'class': 'as_big_img_holder'
		}).inject(this.holder);
		
		// create thumb holder
		this.thumb_holder = new Element('div', {
			'class': 'as_thumb_holder'
		}).inject(this.holder);
		
		// make thumb_selector
		this.thumb_selector = new Element('div', {
			'class': 'as_thumb_selector'
		}).inject(this.thumb_holder);
		
		// add thumb_selector triangle
		new Element('div', { 'class': 'triangle' }).inject(this.thumb_selector);
		
		this.thumb_selector_fx = new Fx.Morph(this.thumb_selector, {
			duration: this.options.selectorTime,
			link: 'cancel'
		});
		
		// make rotation function, to be called periodically
		this.currentThumb = 1; // 0 was already selected
		this.itterations = 0;
		this.rotation_func = function(){
			
			// change the thumb to the current thumb
			this.changeThumb(this.thumbs[this.currentThumb]);
			
			// if that was the last thumb, go back to first thumb and record the itteration
			if (this.currentThumb + 1 > this.thumbs.length-1){
				this.itterations++;
				this.currentThumb = 0;

			} else {
				this.currentThumb ++;
				
				// if we've cycled through twice, goto first and stop
				if (this.itterations == 2 && this.currentThumb > 0){
					this.stopRotation();
				}
			}
			
		}.bind(this);
			
	},
	
	/**
	 *	thumb (Object) see usage or thumbs array
	 */
	addThumb: function(/*Object*/ thumb){
				
		this.thumbs.push(thumb);
	
		// create thumb element
		thumb.thumb_img = new Element('img', {
			'class': 'as_thumb',
			'src': thumb.thumb_location
		}).inject(this.thumb_holder);
		
		// add click action to thumb element
		thumb.thumb_img.addEvent('click', function(e){
			
			this.changeThumb(thumb);
			this.stopRotation();
			
		}.bind(this));
		
		// preload the image
		new Asset.image(thumb.img_location);
		
		// select this thumb if it's the first to be added
		if (this.thumbs.length == 1){
			
			this.changeThumb(thumb);	
		}
		
	},
	
	changeThumb: function(thumb){
		
		// get the current image
		var current = this.big_img_holder.getElement('.as_big_img');
	
		//inject the new thumb image behind the current one
		var this_big_img = new Element('img', {
			'class': 'as_big_img',
			'src': thumb.img_location
		});
		// wrap it in an anchor for the link
		new Element('a', {
			href: thumb.link_url
		}).grab(this_big_img).inject(this.big_img_holder, 'top');
		

		
		// if the other image is there, cross fade it out
		if (current != null){
			var currentFx = new Fx.Morph(current, {
				duration: this.options.fadeTime,
				onComplete: function(){
					current.destroy();
				}
			});
			
			currentFx.start({'opacity': 0});
		}
		
		// move the thumb selector
		this.thumb_selector_fx.start({
			top: thumb.thumb_img.getPosition(this.thumb_holder).y - 3, // 3 is thumb selector padding
			left: thumb.thumb_img.getPosition(this.thumb_holder).x - 3
		});
		
		
	},
	
	/**
	 * period: (Number) time in milliseconds between thumb change
	 */
	startRotation: function(period){
		
		// period default is 7 seconds
		if (period == undefined){
			period = 7000;
		}
		
		this.timer = this.rotation_func.periodical(period);
		
	},
	
	stopRotation: function(){
		$clear(this.timer);
	}
	
	
});