/*jslint evil: true, laxbreak: true */
/*global $clear Browser Class Events Fx Options Update document */
// Create the class object
// Playerlist3 class
var UpdatePlaylist3 = new Class({
    Implements: [Options, Events],

    options:
	{
	    objRootElement: {},
	    videoClips: {},
	    arrClipsData: {},
	    currentPlayingClip: null,
	    previouslyPlayedClip: null,
	    color: ''
	},

    initialize: function(options) {
        this.setOptions(options);

        // Bind this to the functions called from outside
        this.bound = {
            resetStart: this.resetStart.bind(this)
			,setupEvents: this.setupEvents.bind(this)
			,clearMarkedClips: this.clearMarkedClips.bind(this)
			,markCurrentPlayingClip: this.markCurrentPlayingClip.bind(this)
        };
    },

    resetStart: function() {
        this.options.videoClips = this.options.objRootElement.getElements('ul li.updatePlaylist3ListItemHolder');
        // If the cliplist is empty for some reason, stop everything to prevent javascript errors
        if (this.options.videoClips.length === 0) {
            return;
        }
		
        this.options.arrClipsData = JSON.decode(this.options.objRootElement.getElement('.updatePlaylist3JSON').get('html'), true);
        this.options.color = this.options.videoClips[0].getStyle('backgroundColor');

        this.bound.setupEvents();

        Update.RegisterClipClearedEvent(this.options.objRootElement, this.bound.clearMarkedClips);
    }, //End resetStart

    setupEvents: function() {
        this.options.videoClips.each(function(videoClip, i) {
            videoClip.thumbMorph = new Fx.Morph(videoClip, { duration: 200 });

            videoClip.addEvents({
                'mouseover': function(e) {
                    if (!Browser.Engine.trident) {
                        videoClip.thumbMorph.cancel();
                        videoClip.thumbMorph.start({ 'background-color': '#00b0ea' });
                    }
                    else {
                        videoClip.setStyle('background-color', '#00b0ea');
                    }
                } .bind(this),
                'mouseleave': function() {
                    if (!Browser.Engine.trident) {
                        videoClip.thumbMorph.cancel();
                        videoClip.thumbMorph.start({ backgroundColor: this.options.color });
                    }
                    else {
                        videoClip.setStyle('background-color', this.options.color);
                    }
                } .bind(this),
                'click': function(e) {
                    this.options.currentPlayingClip = videoClip;
                    Update.LoadClip(this.options.arrClipsData[i], this.bound.markCurrentPlayingClip, false);
                } .bind(this)
            });

        } .bind(this));
    },  //End setupEvents


    clearMarkedClips: function() {
        if (typeof this.options.previouslyPlayedClip === 'undefined' || this.options.previouslyPlayedClip === null) {
			return;
		}

		var previouslyPlayedThumb = this.options.previouslyPlayedClip.getElement("div.updatePlaylist3ListItem img.updatePlaylist3Thumb");
		if (previouslyPlayedThumb !== null) {
            previouslyPlayedThumb.setStyle('border', 'none');
            previouslyPlayedThumb.setStyle('margin-top', '0px');
            previouslyPlayedThumb.setStyle('margin-left', '0px');

            // Unmarked so clear it
            this.options.previouslyPlayedClip = null;
        }
    }, //End clearMarkedClips

    markCurrentPlayingClip: function() {
		var currentPlayingThumb = this.options.currentPlayingClip.getElement("img.updatePlaylist3Thumb");
        if (currentPlayingThumb !== null) {
            currentPlayingThumb.setStyle('border', '1px solid #00b0ea');
            currentPlayingThumb.setStyle('margin-top', '-1px');
            currentPlayingThumb.setStyle('margin-left', '-1px');
        }
        
		this.options.previouslyPlayedClip = this.options.currentPlayingClip;
    } //End markCurrentPlayingClip
});
var objUpdatePlaylist3;

var previouslyPlayedClip;

function initPlaylist3() {
    var oRootElement = document.getElement("div.updatePlaylist3Holder");
	var ajaxPanel = oRootElement.getElement('.DR_AJAX_Extensions_AJAXPanel');
    objUpdatePlaylist3 = new UpdatePlaylist3({ objRootElement: oRootElement });
	
	Update.LoadCliplistContents(ajaxPanel, objUpdatePlaylist3.bound.resetStart, document.getElement('.cliplist3TabLink').getProperty('href'));
}