/**
 * Created by JetBrains PhpStorm.
 * User: garethablett
 * Date: 24/11/2011
 * Time: 16:04
 * To change this template use File | Settings | File Templates.
 */
window.addEvent('domready', function() {

        new xFade({
				target : $( 'xfade' ),
				duration : 2000,
                time : 5000
			});


});

var xFade = new Class({

	settings : {
		children : [],
		length : null,
		target : null,
		time : 5000,
		duration : 1000
	},

	current : 0,
	firstRun : true,
    timer : null,

	initialize : function( options )
	{

		// APPLY THE SETTINGS PARSED IN

		for( var o in options )
			this.settings[o] = options[o];

		// THE TARGET REQUIRES A POSITION OF RELATIVE

		/*this.settings.target.setStyles({
			position : 'absolute',
			overflow : 'hidden'
		});*/
        if ($('yellowtag')) {
        $('yellowtag').setStyle('cursor','pointer');
        $('yellowtag').addEvent('click',function(e){
           
           clearTimeout(this.timer);
           var currentElement = this.settings.children[this.current];
           new Fx.Morph( currentElement, {
			    duration : this.settings.duration
		        }).start({
			        opacity : 0
		        });
            var nextElement = this.settings.children[3];
            this.current = 3;
            new Fx.Morph( nextElement, {
                duration : this.settings.duration
                }).start({
                    opacity : 1
                });
            this.timer = this.animate.delay( this.settings.time, this );
        }.bind(this));
        $('bluetag').setStyle('cursor','pointer');
        $('bluetag').addEvent('click',function(e){
           
           clearTimeout(this.timer);
           var currentElement = this.settings.children[this.current];
           new Fx.Morph( currentElement, {
			    duration : this.settings.duration
		        }).start({
			        opacity : 0
		        });
            var nextElement = this.settings.children[2];
            this.current = 2;
            new Fx.Morph( nextElement, {
                duration : this.settings.duration
                }).start({
                    opacity : 1
                });
            this.timer = this.animate.delay( this.settings.time, this );
        }.bind(this));
        $('pinktag').setStyle('cursor','pointer');
        $('pinktag').addEvent('click',function(e){
           
           clearTimeout(this.timer);
           var currentElement = this.settings.children[this.current];
           new Fx.Morph( currentElement, {
			    duration : this.settings.duration
		        }).start({
			        opacity : 0
		        });
            var nextElement = this.settings.children[1];
            this.current = 1;
            new Fx.Morph( nextElement, {
                duration : this.settings.duration
                }).start({
                    opacity : 1
                });
            this.timer = this.animate.delay( this.settings.time, this );
        }.bind(this));
        $('greentag').setStyle('cursor','pointer');
        $('greentag').addEvent('click',function(e){
           
           clearTimeout(this.timer);
           var currentElement = this.settings.children[this.current];
           new Fx.Morph( currentElement, {
			    duration : this.settings.duration
		        }).start({
			        opacity : 0
		        });
            var nextElement = this.settings.children[0];
            this.current = 0;
            new Fx.Morph( nextElement, {
                duration : this.settings.duration
                }).start({
                    opacity : 1
                });
            this.timer = this.animate.delay( this.settings.time, this );
        }.bind(this));
        }
		// GET child elements INSIDE ELEMENT
        if ( this.settings.target ) {
		    this.settings.children = this.settings.target.getChildren();
        }
		// COUNT

		this.settings.length = this.settings.children.length;

		$each( this.settings.children, function( item, index )
		{

			// GIVE EACH ITEM A POSITION OF ABSOLUTE AND TOP / LEFT

			item.setStyles({
				position : 'absolute',
				top : 0,
				left : 0,
				opacity : ( !index ? 100 : 0 )
			})

		})

		this.timer = this.animate.apply( this ).delay( this.settings.time, this );

	},

	animate : function()
	{

		if( this.firstRun )
		{
			this.firstRun = false;
			return this.animate.bind( this );
		}

		// SET UP THE ELEMENTS

		var currentElement = this.settings.children[this.current];
		var nextElement = this.settings.children[( this.current == this.settings.length - 1 ? 0 : ( this.current + 1 ) )];

		// ANIMATE THEM

		new Fx.Morph( currentElement, {
			duration : this.settings.duration
		}).start({
			opacity : 0
		});

		new Fx.Morph( nextElement, {
			duration : this.settings.duration
		}).start({
			opacity : 1
		});

		// RESET CURRENT

		if( this.current == this.settings.length - 1 )
			this.current = 0;
		else
			this.current++;

		// RERUN

		this.timer = this.animate.delay( this.settings.time, this );

	}

})