var HomeSlideShow = new Class({
    initialize: function(containerId, myOptions) {
        // global vars
        this.myElements = $(containerId).getElements(myOptions.items);
        this.canClick = true;

        if (this.myElements.length > 0) {
            this.currentIndex = 0;
            this.initPeople(containerId);

            ($type(myOptions.frameDelay)) ? this.frameDelay = myOptions.frameDelay : this.frameDelay = 5000;
            ($type(myOptions.loop)) ? this.loop = myOptions.loop : this.loop = false;

            this.myTimer = this.fadeOut.delay(this.frameDelay, this, this.myElements[this.currentIndex]);

            this.initClickEvents();
        }
    },
    initClickEvents: function() {
        this.myElements.each(function(myElement, i) {
            myElement.addEvent('click', function(event) {
                if (this.canClick) {
                    event.stop();

                    this.myElements.each(function(myTmpElement, j) {
                        var thumb = myTmpElement.getElement('img');
                        var thumbArry = thumb.src.split("_on.gif");
                        if (thumbArry.length > 1) {
                            thumb.src = thumbArry[0] + ".gif";
                        }
                        myTmpElement.removeClass('active');
                    } .bind(this));

                    myElement.addClass('active');
                    var thumb = myElement.getElement('img');
                    var thumbArry = thumb.src.split(".gif");
                    thumb.src = thumbArry[0] + "_on.gif";

                    this.myTimer = $clear(this.myTimer); //Cancels timer.

                    this.myPeople.each(function(myItem, j) {
                        (i != j) ? myItem.setStyle('opacity', 0) : myItem.setStyle('opacity', 1);
                    } .bind(this));

                    // start the timer again
                    this.currentIndex = i;
                    this.myTimer = this.fadeOut.delay(5000, this, this.myElements[this.currentIndex]);
                }
            } .bind(this));
        } .bind(this));
    },
    initPeople: function(containerId) {
        //copy markup from list to container
        this.myPeople = this.myElements.getElements('.speaker');
        this.zIndex = this.myPeople.length;
        this.myPeople.each(function(myItem, index) {
            myItem.setStyle('zIndex', this.zIndex);
            myItem.setStyle('opacity', 0);
            this.zIndex--;
            myItem.inject('mainimage', 'bottom');
        } .bind(this));

        this.myPeople[this.currentIndex].setStyle('opacity', 1);
        this.myPeople = $('mainimage').getElements('.speaker');

        this.zIndex = this.myPeople.length + 1;
    },
    fadeIn: function(elm) {
        var myEffect = new Fx.Morph(elm, {
            duration: '400',
            transition: Fx.Transitions.Sine.easeOut,
            onStart: function() {
                this.myPeople[this.currentIndex].fade(0);
                (this.loop && this.currentIndex == (this.myElements.length - 1)) ? this.currentIndex = 0 : this.currentIndex++;
                this.myPeople[this.currentIndex].setStyle('zIndex', this.zIndex);
                this.zIndex++;
                this.myPeople[this.currentIndex].fade(1);

                var thumb = this.myElements[this.currentIndex].getElement('img');
                var thumbArry = thumb.src.split(".gif");
                thumb.src = thumbArry[0] + "_on.gif";

                this.myElements[this.currentIndex].addClass('active');
            } .bind(this),
            onComplete: function() {
                this.myTimer = this.fadeOut.delay(this.frameDelay, this, this.myElements[this.currentIndex]);
                this.canClick = true;
            } .bind(this)
        }).start({ 'opacity': [0, 1] }); ;
    },
    fadeOut: function(elm) {
        var myEffect = new Fx.Morph(elm, {
            duration: '400',
            transition: Fx.Transitions.Sine.easeOut,
            onStart: function() {
                this.canClick = false;
            } .bind(this),
            onComplete: function() {
                var thumb = elm.getElement('img');
                var thumbArry = thumb.src.split("_on.gif");
                thumb.src = thumbArry[0] + ".gif";
                elm.removeClass('active');
                this.fadeIn(elm);
            } .bind(this)
        }).start({ 'opacity': [1, 0] }); ;
        //elm.fade(0);
    }
}); 
var Slideshow=new Class({Implements:[Options],options:{hasFade:true,loop:true,showNav:false,frameDelay:4000,items:"li",height:400,width:400,duration:"normal",version:"1.2.03"},initialize:function(a,b){this.container=$(a);this.setOptions(b);this.container.setStyles({position:"relative",overflow:"hidden",height:this.options.height,width:this.options.width});this.myElements=this.container.getElements(this.options.items);if(this.myElements.length>1){this.currentIndex=0;this.zIndex=this.myElements.length;this.initElements();this.myElements[this.currentIndex].setStyle("visibility","visible");this.myTimer=this.goTo.delay(this.options.frameDelay,this,this.myElements[this.currentIndex])}},initElements:function(){var a=this.zIndex;this.myElements.each(function(b){b.setStyles({zIndex:a,visibility:"hidden",position:"absolute",top:0,left:0,height:this.options.height,width:this.options.width});a--}.bind(this))},goTo:function(a){(this.currentIndex==(this.myElements.length-1)&&this.options.loop)?this.currentIndex=0:this.currentIndex++;this.zIndex++;var b=this.myElements[this.currentIndex];if($type(b)){b.setStyle("z-index",this.zIndex);if(this.options.hasFade){b.setStyle("opacity",0);new Fx.Tween(b,{transition:Fx.Transitions.Sine.easeOut,duration:this.options.duration,onStart:function(){if(this.options.showNav&&$type(this.onTransStart)=="function"){this.onTransStart()}}.bind(this),onComplete:function(){this.myTimer=this.goTo.delay(this.options.frameDelay,this,b)}.bind(this)}).start("opacity",0,1)}else{this.myElements[this.currentIndex].setStyle("visibility","visible");if(this.options.showNav&&$type(this.onTransStart)=="function"){this.onTransStart()}this.myTimer=this.goTo.delay(this.options.frameDelay,this,b)}}}});
var ComplexSlideshow=new Class({Implements:[Options],Extends:Slideshow,options:{showNav:true},initialize:function(a,b){this.setOptions(b);this.parent(a,b);if(this.options.showNav&&this.myElements.length>0){this.initNav()}},initNav:function(){this.navContainer=new Element("ul",{"class":"mt-nav",styles:{position:"absolute",zIndex:2000000}}).inject(this.container);this.navContainerItems=new Array();this.myElements.each(function(b,c){var a=new Element("li",{styles:{"list-style":"none","float":"left",marginRight:2}}).inject(this.navContainer);var d=new Element("a",{styles:{cursor:"pointer"}}).inject(a);this.navContainerItems.push(a);if(c==0){a.addClass("active")}d.addEvent("click",function(e){$clear(this.myTimer);this.zIndex++;this.currentIndex=c;this.clearNavItems();this.navContainerItems[c].addClass("active");this.myElements[c].setStyles({zIndex:this.zIndex,visibility:"visible"});this.myTimer=this.goTo.delay(this.options.frameDelay*3,this,this.myElements[this.currentIndex])}.bind(this))}.bind(this))},onTransStart:function(){this.clearNavItems();this.navContainerItems[this.currentIndex].addClass("active")},clearNavItems:function(){this.navContainerItems.each(function(a,b){if(a.hasClass("active")){a.removeClass("active");return}}.bind(this))}});

var mySlideShow;
window.addEvent('domready', function() {
//    mySlideShow = new HomeSlideShow('speakers', {
//        items: 'li',
//        loop: true
//    });
 	var myComplexSlideShow = new ComplexSlideshow('randomPromo', {
		items: 'img',
		width: 290,
		height: 170
	});  
    
});