var JKContentTabLoop = new Class({

    isLooping: false,
    loopFunction: undefined,
	loopDelay: 10000,
	
    setLoop: function(loopFunction,delay) {
		this.loopDelay = (delay) ? delay : this.loopDelay;
        if(this.isLooping) this.stopLoop();
        this.loopFunction = loopFunction;
        return this;
    },
    startLoop: function(delay) {
		this.stopLoop();
		this.isLooping = true;
        this.loopDelay = (delay) ? delay : this.loopDelay;
        this.periodical = this.loopFunction.periodical(this.loopDelay,this);
        return this;
    },
	stopLoop: function() {
        this.isLooping = false;
        clearInterval(this.periodical);
        return this;
    }
});


var JKContentTabStructure = new Class({
	
	Implements: [Options, Events],
	options: {
		width: '900px',
		height: '500px',
		opacity: 0.5,
		id: '1',
		slideShowOptions: {
			startIndex: 0,
	    	slideInterval: 10000,
			duration: 500,
			effectName: 'fade',
			transition: 'sine:in',
			width: '900px',
			height: '500px',
			autoPlay: true,
			randomSwitch: false
		}
	},
	initialize: function(element,options) {
		this.setOptions(options);
		this.element = element;
		this.tabTitleContainer = this.element.getChildren()[0];
		this.tabTitleContainer.setStyles({ width: this.options.width });
		this.tabTitles = this.tabTitleContainer.getElement('ul').getChildren();
		this.tabContainerWrapper = this.element.getChildren()[1];
		this.tabContainer = this.tabContainerWrapper.getChildren()[0];
		this.tabContainer.setStyles({ width: this.options.width, height: this.options.height });
		this.tabContainerWrapper.setStyles({ width: this.options.width, height: this.options.height });
		this.tabs = this.tabContainer.getChildren();
		this.createSlideShow();
		this.slideShow.start();
		this.addTabEvents();
	},
	createSlideShow: function() {
		this.slideShow = new JKContentTabSlideShow(this.tabContainer, this.options.slideShowOptions);
		this.fireEvent('slideShowCreated');
		
		this.slideShow.addEffect("none", function(current, next, duration, transition, instance){ 
			current.setStyle("display","none");
			return this;
		});
		
		this.slideShow.addEffect("fade", function(current, next, duration, transition, instance){ 
			current.set("tween",{
				duration: duration, 
				transition: transition
			}).fade("out");
			return this;
		});
		
		this.slideShow.addEffect("fadeBackground", function(current, next, duration, transition, instance){
			var half = duration / 2;
			next.set("tween",{ 
				duration: half,
				transition: transition
			}).fade("hide");
			current.set("tween",{ 
				duration: half, 
				transition: transition, 
				onComplete: function(){ next.fade("in"); }
			}).fade("out");
		});
		
		this.slideShow.addEffect("slideLeft", function(current, next, duration, transition, instance){
			var distance = instance.element.getStyle("width").toInt();
			next.setStyle("left", distance);
			[next, current].each(function(slide){
				var to = slide.getStyle("left").toInt() - distance;
				slide.set("tween",{
					duration: duration, 
					transition: transition
				}).tween("left", to);
			});
			return this;
		});
		
		this.slideShow.addEffect("slideRight", function(current, next, duration, transition, instance){
			var distance = instance.element.getStyle("width").toInt();
			next.setStyle("left", -distance);
			[next, current].each(function(slide){
				var to = slide.getStyle("left").toInt() + distance;
				slide.set("tween",{
					duration: duration, 
					transition: transition
				}).tween("left", to);
			}); 
			return this;
		});
		
		this.slideShow.addEffect("slideDown", function(current, next, duration, transition, instance){
			var distance = instance.element.getStyle("height").toInt();
			next.setStyle("top", -distance);
			[next, current].each(function(slide){
				var to = slide.getStyle("top").toInt() + distance;
				slide.set("tween",{
					duration: duration, 
					transition: transition
				}).tween("top", to);
			});
			return this;
		});
		
		this.slideShow.addEffect("slideUp", function(current, next, duration, transition, instance){
			var distance = instance.element.getStyle("height").toInt();
			next.setStyle("top", distance); 
			[next, current].each(function(slide){ 
				var to = slide.getStyle("top").toInt() - distance;
				slide.set("tween",{
					duration: duration, 
					transition: transition
				}).tween("top", to);
			});
			return this;
		});
	},
	addTabEvents: function() {
		this.tabTitles.each(function(tab, index) {	
			tab.getChildren()[0].addEvent('click', function(e){
					e.stop();
					this.slideShow.pause();
					this.slideShow.show(this.slideShow.getSlide(index));
					
					this.tabTitles.each(function(tab, index) {	
						tab.getChildren()[0].removeClass('active');
						if(this.slideShow.getSlideNumber(this.slideShow.getCurrentSlide()) == index) {
							tab.getChildren()[0].addClass('active');
						}
					}.bind(this));
			}.bind(this));		
		}.bind(this));	
		this.tabTitles[this.options.slideShowOptions.startIndex].getChildren()[0].addClass('active');
	}
});



var JKContentTabSlideShow = new Class({
	effect:  Array,
	Implements: [JKContentTabLoop, Options, Events],
	options: {
		startIndex: 0,
	    slideInterval: 10000,
		duration: 500,
		effectName: 'fade',
		transition: 'sine:in',
		autoPlay: true,
		randomSwitch: false
	},
	initialize: function(element,options){	
		this.setOptions(options);
        this.element = element;
        this.slides = this.element.getChildren();
        this.current = this.slides[this.options.startIndex];
		this.slides.each(function(slide, index) {
			slide.setStyles({'position': 'absolute', 'z-index': 0, 'display': 'block', 'left': 0, 'right': 0, 'visibility': 'visible', 'opacity': 1});
            if(index != this.options.startIndex) slide.setStyles({'display': 'none'});
        }, this);
    },
	start: function() {
		this.show(this.current);
		this.setLoop(this.cycleForward, this.options.slideInterval);
        if(this.options.autoPlay) this.startLoop();
	},
	show: function(slide) {
        this.fireEvent('showBegin');
        if(slide != this.current) {
            var current = this.current.setStyles({'position': 'absolute', 'z-index': 1, 'display': 'block', 'left': 0, 'right': 0, 'visibility': 'visible', 'opacity': 1});
            var next = slide.setStyles({'position': 'absolute', 'z-index': 0, 'display': 'block', 'left': 0, 'right': 0, 'visibility': 'visible', 'opacity': 1});
            this.effect[this.options.effectName](current, next, this.options.duration, this.options.transition, this);
            (function() { 
                current.setStyles({'display': 'none'});
                this.fireEvent('showComplete');
            }).bind(this).delay(this.options.duration);
            this.current = next;
        } else {
			this.fireEvent('showComplete');
		}
        return this;
    },
	getSlide: function(index) {
		return this.slides[index];
	},
	getSlideNumber: function(slide) {
		for(var i=0; i < this.slides.length; i++) {
			if(slide == this.slides[i]) return i;	
		}
	},
	getSlides: function() {
		return this.slides;
	},
	getCurrentSlide: function() {
        return this.current;
    },
    getNextSlide: function() {
        return (this.current.getNext()) ? this.current.getNext() : this.slides[0];
    },
    getPreviousSlide: function() {
        return (this.current.getPrevious()) ? this.current.getPrevious() : this.slides.getLast();
    },
	getTransition: function() {
		return this.options.transition;
	},
    cycleForward: function() {
		this.fireEvent('cycleForward');
		if(this.options.randomSwitch) this.show(this.slides[parseInt(Math.random() * (this.slides.length))]);
		else this.show(this.getNextSlide());
        return this;
    },
    cycleBackward: function(){
		this.fireEvent('cycleBackward');
        if(this.options.randomSwitch) this.show(this.slides[parseInt(Math.random() * (this.slides.length))]);
		else this.show(this.getPreviousSlide());
        return this;
    },
    play: function() {
		this.fireEvent('play');
        this.startLoop();
        return this;
    },
    pause: function(){
		this.fireEvent('pause');
        this.stopLoop();
        return this;
    },
    reverse: function() {
        var loopFunction = (this.loopMethod == this.cycleForward) ? this.cycleBackward : this.cycleForward;
        this.setLoop(loopFunction, this.options.slideInterval);
        this.fireEvent('reverse');
        return this;
    },
	addEffect: function(name, fn) {
        this.effect[name] = fn;
    }	
}); //end Class