/*
       name : dl.js
       author : Sobia Ali
       modified by : Sobia Ali [02/27/2009]
       (c) Copyright 2008 AOL LLC
       ///////////////////////////
       ///////////////////////////		
       dependencies : mootools 1.2.1
       ///////////////////////////
       ///////////////////////////
 */
Function.prototype.debounce = function (threshold, execAsap) {
 
    var func = this, timeout;
 
    return function debounced () {
        var obj = this, args = arguments;
        function delayed () {
            if (!execAsap)
                func.apply(obj, args);
            timeout = null; 
        };
 
        if (timeout)
            clearTimeout(timeout);
        else if (execAsap)
            func.apply(obj, args);
 
        timeout = setTimeout(delayed, threshold || 100); 
    };
 
}
var DL = new Class({
	Implements: [Options, Events, Chain],
	
	options : {
		fadeDelay : 600,
		slideDelay : 2400,
		slideHeight : "275px",
		slideWidth : "440px",
		slideContentHeight : "66px"
	},
	
	initialize: function (parentDiv, options) {
		this.setOptions(options);
		this.dlData = [];
		this.slideContent = [];
		this.slideDrawer = [];	
		this.slideCredit = [];
		this.autoPlay = true;
		this.currentIndex = 0;		
		this.maxIndex = 0;	
		this.playing = false;
		this.parentDiv = parentDiv;
		this.sliderOpacity = "0.5";
		this.dlSlideDiv = ".dlSlide";							
		this.collectSlideData();					
		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] = {						
				img : slideDivs[i].getElements("img")[0].getProperty('src'),
				link : slideDivs[i].getElement('div.slideAction').getElements('a')[0].href,				
				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.constructSlideContent(dlData[i], i);			
		};				
		this.maxIndex = dlData.length;			
		slideDivs.destroy();				
	},

	constructSlideContent : function(dataObj, iter) {								
		this.slide = new Element('div', {					
			'class' :'slide',
			'id' : 'dl' + iter

		}).inject(this.parentDiv);
		this.slideImageDiv = new Element('div', {
			'class' : 'slideImageDiv',
			'opacity' : 0
		}).inject(this.slide);
		var slideImgA = new Element('a', {
			'href' : dataObj.link
		}).inject(this.slideImageDiv);
		var slideImg = new Element('img', {
			'src': dataObj.img
		}).inject(slideImgA);		
		this.slideContentDiv = new Element('div', {
			'class' : 'slideContent'
		}).inject(this.slide);
		var slideContentOpacity = new Element('div', {
			'class' : 'slideContentOpacity',
			'opacity' : this.sliderOpacity		
		}).inject(this.slideContentDiv);
		this.slideTitle = new Element('h2', {
			'html' : dataObj.title
		}).inject(this.slideContentDiv);
		this.slideSubTitle = new Element('h3',{
			'html' : dataObj.subTitle
		}).inject(this.slideContentDiv);
		this.slideAction = new Element('div', {
			'class' : 'slideAction',
			'html' : dataObj.action
		}).inject(this.slideContentDiv);
		this.slideCreditDiv = new Element('div', {
			'class' : 'slideCredit',
			'opacity' : 0,
			'html' : dataObj.credit
		}).inject(this.slide);
		
		this.slideContent[iter] = new Fx.Morph(this.slideImageDiv, {
			transition: Fx.Transitions.linear,
			duration : this.options.fadeDelay
		});
		this.slideDrawer[iter] = new Fx.Morph(this.slideContentDiv, {
			transition: Fx.Transitions.linear,
			duration : this.options.fadeDelay
		});
		this.slideCredit[iter] = new Fx.Morph(this.slideCreditDiv, {
			transition: Fx.Transitions.linear,
			duration : 0
		});
		this.slideDrawer[0].start({
    	'height': [0, '66px'],
    	'display': 'block'
		});
		this.slideContent[this.currentIndex].start({'opacity': 1});
		this.slideCredit[this.currentIndex].start({'opacity': 1});
	},		
	
	constructSlideButtons: function () {
		var slideButtons = new Element('div', {
			'class' : 'slideButtons'		
		}).inject(this.parentDiv);		

		var nextPhoto = function (){
			this.noFx = true; 
			this.next();
		}.bind(this).debounce(250);
		
		var prevPhoto = function (){
			this.noFx = true; 
			this.previous();
		}.bind(this).debounce(250);
		
		this.previousButton = new Element('h5', {
			'class' : 'previous',
			'html'	: 'previous',
			events	: {
				click : prevPhoto
			}
		}).inject(slideButtons);

		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 : nextPhoto
			}
		}).inject(slideButtons);
	},
	
	doPlay: function(noFx) {
		this.nextDelay = this.next.delay(this.options.slideDelay, this);	
		this.noFx = false;
		this.playing = true;	
	},	

	next: function() {		
		if (this.pauseButton.get('class', 'play')) {this.pauseButton.set('class', 'pause');};	
		this.nextIndex = this.currentIndex+1;
		if (this.nextIndex >= this.maxIndex) {this.nextIndex = 0;}		
		$clear(this.nextDelay);
		this.changeSlide(this.nextIndex);		
	},

	previous: function() {
		if (this.pauseButton.get('class', 'play')) {this.pauseButton.set('class', 'pause');};
		this.nextIndex = this.currentIndex-1;		
		if (this.nextIndex <= -1) {this.nextIndex = this.maxIndex - 1;};
		$clear(this.nextDelay);
		this.changeSlide(this.nextIndex);			
	},
	
	changeSlide: function(newIndex) {
		this.loop = true;
		if (this.currentIndex != newIndex) {
			if (this.noFx){
				this.slideContent[this.currentIndex].cancel();
				this.slideDrawer[this.currentIndex].cancel();
				this.slideContent[this.currentIndex].options.duration=0;
				this.slideContent[newIndex].options.duration=0;
				this.slideDrawer[this.currentIndex].options.duration=0;
				this.slideDrawer[newIndex].options.duration=0;
			} else {
				this.slideContent[this.currentIndex].options.duration=this.options.fadeDelay;
				this.slideContent[newIndex].options.duration=this.options.fadeDelay;
				this.slideDrawer[this.currentIndex].options.duration=this.options.fadeDelay;
				this.slideDrawer[newIndex].options.duration=this.options.fadeDelay;	
			}
			this.slideContent[this.currentIndex].start({'opacity': 0});
			this.slideDrawer[this.currentIndex].start({
    			'height': ['66px', '0'],
    			'display': 'none'
			});
			this.slideCredit[this.currentIndex].start({'opacity': 0});
			
			this.slideContent[newIndex].start({'opacity': 1});		
			this.slideDrawer[newIndex].start({
    			'height': [0, '66px'],
    			'display': 'block'
			});	
			this.slideCredit[newIndex].start({'opacity': 1});
			$('dl' + this.currentIndex).style.zIndex = 1; 
			$('dl' + this.nextIndex).style.zIndex = 9 ; 		
			this.currentIndex = newIndex;			
		}			
		this.doPlay();
		this.loop = false;
	},
	
	pause: function(){
		if(this.playing){
			$clear(this.nextDelay);
			this.pauseButton.set('class', 'play');
			this.playing = false;
			return;
		}
		if(!(this.playing)){
			$clear(this.nextDelay);
			this.pauseButton.set('class', 'pause');
			this.playing = true;
			this.next();
			return;
		}
	}

});