/*
       name : dl.js
       author : Sobia Ali
       modified by : Sobia Ali [02/27/2009]
       (c) Copyright 2008 AOL LLC
       ///////////////////////////
       ///////////////////////////		
       dependencies : mootools 1.2.1
       ///////////////////////////
       ///////////////////////////
 */
var DL = new Class({
	Implements: [Options, Events],
	
	options : {
		fadeDelay : 1200,
		slideContentDelay : 1200,
		slideDelay : 6400,
		slideHeight : "275px",
		slideWidth : "440px",
		slideContentHeight : "66px"
	},
	
	initialize: function (parentDiv, options) {
		this.setOptions(options);
		this.dlData = [];
		this.slideImage = [];	
		this.autoPlay = true;
		this.playing = false;
		this.currentIndex = 0;
		this.maxIndex = 0;	
		this.parentDiv = parentDiv;
		this.sliderOpacity = "0.5";
		this.dlSlideDiv = ".dlSlide";							
		this.collectSlideData();			
		this.constructDLImages();
		this.constructSlideContent();
		this.constructSlideCredit();
		this.constructSlideButtons ();		
		this.parentDiv.style.display="block";
		this.doPlay();
	},		
		
	collectSlideData : function() {
		var dlData = [];
		var slideDivs = this.parentDiv.getElements(this.dlSlideDiv);
		for(var i=0; i<slideDivs.length; i++) {				
				dlData[i] = {						
				transition: this.transitionType,
				image: slideDivs[i].getElements("img")[0].getProperty('src'),	
				title: slideDivs[i].getElement('h2').get('text'),
				subTitle: slideDivs[i].getElement('h3').get('text'),
				action: slideDivs[i].getElement('div.slideAction').get('html'),
				credit: slideDivs[i].getElement('div.slideCredit').get('text')					
			};					
		}				
		this.dlData = dlData; 
		slideDivs.destroy();						
	},
        
	constructDLImages : function() {	
		this.maxIndex = this.dlData.length;		
		for(var i=0; i<this.dlData.length; i++) {		
			var slideImageDiv = new Element('div', {					
					styles : {
						'opacity' :'0',
						'position' :'absolute',
						'width' : this.options.slideWidth,
						'height' : this.options.slideHeight,
						'backgroundImage' : "url('" + this.dlData[i].image + "')"					
					}
				}).inject(this.parentDiv);
			slideImage = new Fx.Morph(slideImageDiv, {
				duration: this.options.fadeDelay, 
				transition: Fx.Transitions.linear,
				onComplete: function(){
					this.loadedImage = true}
				});		
			this.slideImage[i] = slideImage;
		}
		this.slideImage[0].set({opacity: 1})
	},
	
	constructSlideContent: function() {
		this.slideContentDiv = new Element('div', {
				'class' : 'slideContent',
				styles : {'opacity' : 0}
			}).inject(this.parentDiv);
		var slideContentOpacity = new Element('div', {
				'class' : 'slideContentOpacity',
				'opacity' : this.sliderOpacity		
			}).inject(this.slideContentDiv);
		this.slideTitle = new Element('h2').inject(this.slideContentDiv);
		this.slideSubTitle = new Element('h3').inject(this.slideContentDiv);
		this.slideAction = new Element('div', {
			'class' : 'slideAction'
			}).inject(this.slideContentDiv);
		this.slideContent = new Fx.Morph(this.slideContentDiv);
	},	
	
	constructSlideCredit : function () {
		this.slideCreditDiv = new Element('div', {
			'class' : 'slideCredit'
			}).inject(this.parentDiv);
		this.slideCredit = new Fx.Morph(this.slideCreditDiv);
	},
	
	constructSlideButtons: function () {
		var slideButtons = new Element('div', {
			'class' : 'slideButtons'		
			}).inject(this.parentDiv);		
		this.previousButton = new Element('h5', {
				'class' : 'previous',
				'html'	: 'previous',
				events	: {
					click : this.previous.bind(this)
				}
			}).inject(slideButtons);
		this.previousAddEvent = function () {
			this.previousButton.addEvent('click', this.previous.bind(this));
			this.previousButton.set('class', 'previous');		
		}
		this.previousRemoveEvent = function () {
			this.previousButton.removeEvents('click');
			this.previousButton.set('class', 'grayPrevious');		
		}
		this.pauseButton = new Element('h5', {
				'class' : 'pause',
				'html' : 'pause',
				events	: {
					click : this.pause.bind(this)
				}
			}).inject(slideButtons);
		this.nextButton = new Element('h5', {
				'class' : 'next',
				'html' : 'next',
				events	: {
					click : this.next.bind(this)
				}
			}).inject(slideButtons);
		this.nextAddEvent = function () {
			this.nextButton.addEvent('click', this.next.bind(this));
			this.nextButton.set('class', 'next');		
		}
		this.nextRemoveEvent = function () {
			this.nextButton.removeEvents('click');
			this.nextButton.set('class', 'grayNext');			
		}
	},
	
	doPlay: function() {
		this.nextDelay = this.next.delay(this.options.slideDelay, this);
		this.contentDelay = this.showSlideContent.delay((this.options.slideContentDelay), this);
		this.playing = true;
	},	

	next: function() {
		if (this.pauseButton.get('class', 'play')) {this.pauseButton.set('class', 'pause');};	
		this.nextRemoveEvent(); 
		this.nextIndex = this.currentIndex+1;
		if (this.nextIndex >= this.maxIndex) {this.nextIndex = 0;}		
		this.clearAutoPlay();
		this.hideSlideContent().chain(this.changeSlide(this.nextIndex));
	},
	previous: function() {
		if (this.pauseButton.get('class', 'play')) {this.pauseButton.set('class', 'pause');};
		this.previousRemoveEvent(); 
		this.nextIndex = this.currentIndex-1;		
		if (this.nextIndex <= -1) {this.nextIndex = this.maxIndex - 1;};
		this.clearAutoPlay();
		this.hideSlideContent().chain(this.changeSlide(this.nextIndex));
	},
	
	changeSlide: function(newIndex) {
		if (this.currentIndex != newIndex) {
			this.slideImage[this.currentIndex].start({
					opacity: 0
				});
			this.slideImage[newIndex].start({
					opacity: 1
				});
			this.currentIndex = newIndex;
		}

		this.doPlay();
	},
	
	pause: function(){
		if(this.playing){
			this.clearAutoPlay();
			this.pauseButton.set('class', 'play');
			this.playing = false;
			return;
		}
		if(!(this.playing)){
			this.pauseButton.set('class', 'pause');
			this.playing = true;
			this.next();
			return;
		}
	},
	
	clearAutoPlay: function() {
		$clear(this.nextDelay);
		$clear(this.contentDelay);
	},

	showSlideContent: function() {
		this.slideContent.cancel();
		this.slideTitle.set('text', this.dlData[this.currentIndex].title);
		this.slideSubTitle.set('text', this.dlData[this.currentIndex].subTitle);
		this.slideAction.set('html', this.dlData[this.currentIndex].action);
		this.slideContent.start({
				'opacity': 1,
				'height': [0, this.options.slideContentHeight]
			});
		this.showSlideCredit.delay(this.options.slideContentDelay, this);
		return this.slideContent;
	},
	
	hideSlideContent: function() {
		this.slideContent.start({
				'opacity': 0
			});
		this.hideSlideCredit()
		return this.slideContent;
	},
	
	showSlideCredit: function () {
		this.slideCreditDiv.set('text', this.dlData[this.currentIndex].credit);
		this.slideCredit.start({
				'opacity': 1
			});
		this.nextAddEvent();//re-add the next button events  
		this.previousAddEvent();//re-add the previous button events
	}, 
	
	hideSlideCredit : function () {
		this.slideCredit.start({
				'opacity': 0
			});	
	}
});