/*
 * Franklin Lancaster, 2010
 *
 */

// JavaScript Document

//load mootools librarys
var slideViewer2 = new Class({
	Implements: [Options, Events],
	options:{
		timer:7000, 
		controls:true, 
		loop:false, 
		swipe:1500,
		assets:{
			nextButton: { up: '/images/slideViewer/nextUp.png', over: '/images/slideViewer/nextUp.png', down: '/images/slideViewer/nextUp.png' },
			backButton: { up: '/images/slideViewer/backUp.png', over: '/images/slideViewer/backUp.png', down: '/images/slideViewer/backUp.png' }
		}
	},
		
	initialize: function(parent, options){
    	this.setOptions(options);
    	$type(parent) !== 'element' ? this.parent = $(document.body) : this.parent = parent;		
    	this.build();	
    },
    
    build: function(){
    
	this.element = new Element('div', { 'styles' : { 'font-family':'Myriad Web Pro Condensed, sans-serif', 'font-size':9, 'text-transform':'uppercase', 'color':'#0079c2'} });
	this.imageHolder = new Element('div', { 'styles' : { 'position':'relative', 'left': 0} });
	this.viewWindow = new Element('div', { 'styles' : { 'width':400, 'height':300, 'border': '2px #6AACCE solid', 'overflow': 'hidden', 'position':'relative' } });
	this.captionBar = new Element('div', { 'styles' : { 'width':400, 'margin': '5px 0', 'border-top': '1px #CCC solid',  'border-bottom': '1px #CCC solid', 'padding': '2px', 'float' : 'left', 'vertical-align' : 'middle'} });
	this.caption = new Element('div', {'styles' : {'width':340, 'height':14, 'float' : 'left'} });
	this.counter = new Element('div', {'styles' : {'width':36, 'height':10, 'float' : 'left', 'text-align' : 'right'} });
	this.controls = new Element('div', {'styles' : {'width':22, 'float' : 'left', 'vertical-align' : 'middle'} });
	
	this.viewWindow.grab(this.imageHolder);
	this.element.adopt([this.viewWindow, this.captionBar]);
	this.parent.grab(this.element);
	this.captionBar.adopt([this.caption, this.counter, this.controls]);
		
	if(this.options.controls) this.addControls(); //launch control bar
    
    
    },
    
    addControls:function(){
    	
    	var me=this;	
    
    	var nextButton = this.options.assets.nextButton;
    	var backButton = this.options.assets.nextButton;
    	
		this.aNext = new Element('img', { 'src': nextButton.up, 'events' : { 'click': function(){ clearInterval(me.intervalHandle); me.showSlide(me.currentSlide+1); }, 'mouseover': function() { me.controls.aNext.src = nextButton.over; } }, 'styles' : { 'float':'right'} });
		
		this.aPrev = new Element('img', { 'src': backButton.up, 'events' : { 'click': function(){ clearInterval(me.intervalHandle); me.showSlide(me.currentSlide-1); }, 'mouseover': function() { me.controls.aPrev.src = backButton.over; } }, 'styles' : { 'float':'right'} });
	
		this.controls.adopt([this.aNext, this.aPrev]);	
	
	},
	
	removeControls: function(){
		this.controls.empty();
	},
	
	loadImages: function(imageObjects) {
	
		var me = this;
		this.captions = [];
		this.currentSlide = 0;
		this.imageHolder.empty();
		this.imageHolder.setStyles({left:0});
		this.caption.set('text', 'Loading Images...');
		
		var sources = new Array();
		imageObjects.each(function(item){ sources.push(item.location + item.filename); me.captions.push(item.caption);});
		
		this.slides = new Asset.images(sources, {
		
			onProgress: function(counter, index) {
			
				me.slides[index].setStyles({height:300, width:400});
				me.slides[index].addEvent('click', function(){ me.showSlide(me.currentSlide+1); });
				me.imageHolder.set('styles' , {'width' : me.imageHolder.getStyle('width').toInt() + me.slides[index].getStyle('width').toInt() }); 
			},
			onComplete: function(){
			
				me.imageHolder.adopt(me.slides);
				me.showSlide(me.currentSlide);
				me.intervalHandle = setInterval( function(){ me.showSlide(me.currentSlide+1); }, me.options.timer);
			}
		});
	
	},
	
	loadMovie:function(movieURL){
		
		var width = '100%';
		var height = '100%';
		
		this.movieHolder = new Element('div', {'styles':{'width':this.viewWindow.getSize().x,'height':this.viewWindow.getSize().y}});
		this.movieObj = new Element('object', {'width':width, 'height':height});
		this.params = [];
		this.params[0] = new Element('param', {'name':'movie', 'value':movieURL});
		this.params[1] = new Element('param', {'name':'allowFullScreen', 'value':true});
		this.params[2] = new Element('param', {'name':'allowscriptaccess', 'value':'always'});
		this.embed = new Element('embed', {'src':movieURL, 'type':'application/x-shockwave-flash', 'allowscriptaccess':'always', 'allowfullscreen':'true', 'width':width, 'height':height});
		
		this.movieObj.adopt([this.params, this.embed]);
		
		clearInterval(this.intervalHandle);
		
		this.imageHolder.setStyle('display','none');
		
		this.movieHolder.grab(this.movieObj);
		this.viewWindow.grab(this.movieHolder);
		
		this.fireEvent('movieLoaded', [this.movieHolder]);
	
	},
	
	showSlide: function(index){
	
		var me=this;
		
		if(this.slides[index]){
			
			this.swipe(this.currentSlide - index, function(){ me.update(); });
			this.currentSlide = index;
		}
		else if(this.options.loop){
		
			this.currentSlide = index;
			this.imageHolder.grab(this.slides[index % this.slides.length].clone());
			
			var padder = new Element('img', {'styles': {'width':this.slides[index % this.slides.length].getStyle('width').toInt(), 'height':300, 'display':'inline'}}).replaces(this.imageHolder.childNodes[0]);
			var myFx = new Fx.Tween(padder, {transition: Fx.Transitions.Sine.easeInOut, duration:this.options.swipe});
			myFx.start('width', padder.getStyle('width').toInt(), 0).chain(function(){ me.imageHolder.childNodes[0].destroy();});
			
		}
		else clearInterval(this.intervalHandle);
		
		
	},
	
	update:function(){
		this.caption.set('text', this.captions[this.currentSlide]);
		
	},
	
	swipe:function(direction, callback) {
	
		if(!callback) var callback = function(){};
	
		var currentPosition = this.imageHolder.getStyle('left').toInt();
		var targetPosition = direction.toInt()*(this.slides[this.currentSlide].getStyle('width').toInt()) + this.imageHolder.getStyle('left').toInt();

		var myFx = new Fx.Tween(this.imageHolder, {transition: Fx.Transitions.Sine.easeInOut, duration:this.options.swipe});
		myFx.start('left', currentPosition, targetPosition).chain(function(){ callback(); });

	}	
    
    
});



//////////////////////////////////////////////////////////





function slideViewer(parent, options){

	var defaults = {timer:7000, controls:true, loop:false, swipe:1500};
	
	if(!options) var options = {};
	if(!options.timer) options.timer = defaults.timer;
	if(options.controls===undefined) options.controls = defaults.controls;
	if(options.loop===undefined) options.loop = defaults.loop;
	if(options.swipe===undefined) options.swipe = defaults.swipe;
	
	var me = this;
	var nextButton = { up: '/images/slideViewer/nextUp.png', over: '/images/slideViewer/nextUp.png', down: '/images/slideViewer/nextUp.png' };
	var backButton = { up: '/images/slideViewer/backUp.png', over: '/images/slideViewer/backUp.png', down: '/images/slideViewer/backUp.png' };

	// build visual object layout
	var container = new Element('div', { 'styles' : { 'font-family':'Myriad Web Pro Condensed, sans-serif', 'font-size':9, 'text-transform':'uppercase', 'color':'#0079c2'} });
	var imageHolder = new Element('div', { 'styles' : { 'position':'relative', 'left': 0} });
	var viewWindow = new Element('div', { 'styles' : { 'width':400, 'height':300, 'border': '2px #6AACCE solid', 'overflow': 'hidden', 'position':'relative' } });
	var captionBar = new Element('div', { 'styles' : { 'width':400, 'margin': '5px 0', 'border-top': '1px #CCC solid',  'border-bottom': '1px #CCC solid', 'padding': '2px', 'float' : 'left', 'vertical-align' : 'middle'} });
	var caption = new Element('div', {'styles' : {'width':340, 'height':14, 'float' : 'left'} });
	var counter = new Element('div', {'styles' : {'width':36, 'height':10, 'float' : 'left', 'text-align' : 'right'} });
	var controls = new Element('div', {'styles' : {'width':22, 'float' : 'left', 'vertical-align' : 'middle'} });
	
	this.intervalHandle;
	
	this.currentSlide;
	this.slides;
	this.captions;

	this.initialize = function(){
			
		viewWindow.grab(imageHolder);
		container.adopt([viewWindow, captionBar]);
		parent.grab(container);
		captionBar.adopt([caption, counter, controls]);
		
		if(options.controls) me.controls.init(); //launch control bar
	
	};
	
	this.loadImages = function(imageObjects) {
	
		//reset the viewer
		me.captions = [];
		me.currentSlide = 0;
		imageHolder.empty();
		imageHolder.setStyles({left:0});
		caption.set('text', 'Loading Images...');
		
		var sources = new Array();
		imageObjects.each(function(item){ sources.push(item.location + item.filename); me.captions.push(item.caption);});
		
		me.slides = new Asset.images(sources, {
		
			onProgress: function(counter, index) {
			
				me.slides[index].setStyles({height:300, width:400});
				me.slides[index].addEvent('click', function(){ me.showSlide(me.currentSlide+1); });
				imageHolder.set('styles' , {'width' : imageHolder.getStyle('width').toInt() + me.slides[index].getStyle('width').toInt() }); 
			},
			onComplete: function(){
			
				imageHolder.adopt(me.slides);
				me.showSlide(me.currentSlide);
				me.intervalHandle = setInterval( function(){ me.showSlide(me.currentSlide+1); }, options.timer);
			}
		});
		
	
	
	};
	
	this.controls = {
	
		aNext: new Element('img', { 'src': nextButton.up, 'events' : { 'click': function(){ clearInterval(me.intervalHandle); me.showSlide(me.currentSlide+1); }, 'mouseover': function() { me.controls.aNext.src = nextButton.over; } }, 'styles' : { 'float':'right'} }),
		
		aPrev: new Element('img', { 'src': backButton.up, 'events' : { 'click': function(){ clearInterval(me.intervalHandle); me.showSlide(me.currentSlide-1); }, 'mouseover': function() { me.controls.aPrev.src = backButton.over; } }, 'styles' : { 'float':'right'} }),
	
		init: function() { controls.adopt([this.aNext, this.aPrev]); },
		
		remove: function(){ controls.empty();}
	
	
	};
	
	this.showSlide = function(index){
		
		if(me.slides[index]){
			
			me.swipe(me.currentSlide - index, me.update);
			//me.currentSlide++;
		
			me.currentSlide = index;
		}
		else if(options.loop){
		
			me.currentSlide = index;
			//alert(me.slides[index % me.slides.length]);			
			//normalise the number by dividing by the actual number of slides and taking the remainder
			//replace the first image with an empty div of the same size
			//imageHolder.grab(new Element('div', {'styles': {'width':me.slides[0].getStyle('width').toInt(), 'height':300, 'display':'inline'}}), 'top');
			imageHolder.grab(me.slides[index % me.slides.length].clone());
			
			var padder = new Element('img', {'styles': {'width':me.slides[index % me.slides.length].getStyle('width').toInt(), 'height':300, 'display':'inline'}}).replaces(imageHolder.childNodes[0]);
			var myFx = new Fx.Tween(padder, {transition: Fx.Transitions.Sine.easeInOut, duration:options.swipe});
			myFx.start('width', padder.getStyle('width').toInt(), 0).chain(function(){ imageHolder.childNodes[0].destroy();});
			
			//add the new image to the end of the element
			
			//shrink the blank div
			
			//clearInterval(me.intervalHandle);
			//setTimeout(function(){ me.showSlide(me.currentSlide+1); }, options.timer);
			
			//imageHolder.set('styles' , {'width' : imageHolder.getStyle('width').toInt() + me.slides[0].getStyle('width').toInt() });
			//imageHolder.grab(me.slides[0].clone());
			//var test = me.slides[0].dispose();
			//me.swipe(me.currentSlide - index, me.update);
			
		}
		else clearInterval(me.intervalHandle);
		
		
	};
	
	this.update = function(){
		/*
		if(me.slides.length > 1) counter.set('text', (me.currentSlide + 1) + ' of ' + me.slides.length);
		else { counter.set('text', ''); me.controls.remove(); }*/
		caption.set('text', me.captions[me.currentSlide]);
		
	};
	
	this.swipe2 = function(direction, callback) {
	
		if(!callback) var callback = function(){};
	
		var currentPosition = imageHolder.getStyle('left').toInt();
		var targetPosition = direction.toInt()*(me.slides[me.currentSlide].getStyle('width').toInt()) + imageHolder.getStyle('left').toInt();

		var myFx = new Fx.Tween(imageHolder, {transition: Fx.Transitions.Sine.easeInOut});
		myFx.start('width', currentPosition, targetPosition).chain(function(){ callback(); });
		
		

	};

	this.swipe = function(direction, callback) {
	
		if(!callback) var callback = function(){};
	
		var currentPosition = imageHolder.getStyle('left').toInt();
		var targetPosition = direction.toInt()*(me.slides[me.currentSlide].getStyle('width').toInt()) + imageHolder.getStyle('left').toInt();

		var myFx = new Fx.Tween(imageHolder, {transition: Fx.Transitions.Sine.easeInOut, duration:options.swipe});
		myFx.start('left', currentPosition, targetPosition).chain(function(){ callback(); });
		
		

	};
}