// JScript File
String.prototype.replaceAll=function(s1, s2) {return this.split(s1).join(s2)}

var ClipThumbList =
{
    // ---------------------------------------------------------------------
    // member
    // ---------------------------------------------------------------------
    imageCount: 0,
    currentImage: 1,
    counter: 0,
    imagesToShow: 0,
    ajaxLoaderUrl: null,
    isSliding: false,
    clipId: 0,
    leftArrowID: null,
    rightArrowID: null,
    elementID: null,
    previousClipId: null,
    thumbsReloaded: false,
    currentPlayButtonID: null,
    startupClips: null,
    isFirstStartupClip: true,

    // ---------------------------------------------------------------------
    // Constructor
    // ---------------------------------------------------------------------
    initialize: function()
    {
    },

    // ---------------------------------------------------------------------
    // Operations
    // ---------------------------------------------------------------------

    // ---------------------------------------------------------------------
    // sets ajaxrequest for loading player template
    // ---------------------------------------------------------------------
    LoadPlayer: function(clipID, clipChannelID)
    {
        if (this.clipId == clipID)
        {
            return false;
        }
        var ajaxRequest = new SmartAjax();
        ajaxRequest.serviceId = "ClipService";
        ajaxRequest.url = this.ajaxLoaderUrl;
        ajaxRequest.appendRequest("command", "LoadPlayer");
        ajaxRequest.appendRequest("clipID", clipID);
        ajaxRequest.onResponse = this._onLoadPlayerResponse.bind(this);
        ajaxRequest.sendRequest();
        this.clipId = clipID;

        // ---------------------------------------------------------------------
        // check for current loaded channel, if its not the clip's channel, than 
        // reload the clipthumblist
        var curChannel = clipInterface.get("currentChannel");

        // check whether to reload clip-navigation
        if (curChannel != clipChannelID && curChannel != null && clipChannelID != -1)
        {
            ChannelNaviButton.LoadFooterThumbs(clipChannelID);
            this.thumbsReloaded = true;
        }
        return false;
    },

    // ---------------------------------------------------------------------
    // reacts on ajaxresponse, fills playerholderdiv with playertemplate
    // ---------------------------------------------------------------------
    _onLoadPlayerResponse: function(argAjaxObj)
    {
        // check for error
        if (argAjaxObj.error == null)
        {
            // ---------------------------------------------------------------------
            // update playerdiv with ajaxresponse after timeout, to make sure sliding
            // and shadow effect is being processed nicely
            var string = argAjaxObj.response.split("__maSeparator__");
            // get maincontainer in which to render player
            var playerdiv = $('player_maincontainer');
            if (string.length > 1)
            {
                var clipname = $("clipname_cliptitle");
                setTimeout(this._updatePlayerDiv.bind(this, playerdiv, string[0]), 1200);
                clipname.innerHTML = string[1];
                var html = string[1].replaceAll(" ", "");
                clipname.title = html;
            }
            else
            {
                setTimeout(this._updatePlayerDiv.bind(this, playerdiv, string[0]), 1200);
            }

            // ---------------------------------------------------------------------
            // write current clipId into clip_interfac (comminterface)            
            clipInterface.add('clipId', this.clipId);
            clipInterface.add('videoPlayed', "true");
            // ---------------------------------------------------------------------
            // if there is no infotext, make floattickerframe invisible
            var infotext = $('cliptickerframetxt');
            if (infotext != null)
            {
                if (infotext.innerHTML == "")
                {
                    infotext.parentElement.style.visibility = 'hidden';
                }
            }

            // ---------------------------------------------------------------------
            // check wether thumblist was fresh loaded, if so, set timeout to wait until
            // "element" in dropshadow function is in dom. otherwise eval _DropShadow 
            // immediatly
            if (this.thumbsReloaded)
            {
                setTimeout(this._DropShadow.bind(this), 1200);
            }
            else
            {
                this._DropShadow();
            }
        }
        // on error, inform user
        else
        {
            alert(argAjaxObj.error);
        }
    },

    // ---------------------------------------------------------------------
    // gets picture element by clipId and applys shadow as well as makes 
    // it sliding out of the list
    // ---------------------------------------------------------------------
    _DropShadow: function()
    {
        if (!ChannelNaviButton.clipsFullyLoaded)
        {
            setTimeout(this._DropShadow.bind(this), 50);
            return;
        }

        // get backgroundImage element
        var backgroundImage = $("clipBackgroundImage" + this.clipId);

        // check for backgroundImage
        if (backgroundImage != null)
        {
            // iteration
            for (var i = 0; i < 6; i++)
            {
                // set increasing timout to achieve sliding effect
                setTimeout(this._applyShadow.bind(this, i, backgroundImage), 30 * i);
            }

            // set index
            setTimeout(this._setIndex.bind(this, backgroundImage, 5), 35);

            // get caption element
            var caption = $("clipCaption" + this.clipId);

            // check for caption element
            if (caption != null)
            {
                // hide caption
                caption.style.visibility = "hidden";
            }

            // get clipReflectionImage
            var clipReflectionImage = $("clipReflectionImage" + this.clipId);

            // check for clipReflectionImage
            if (clipReflectionImage != null)
            {
                // hide clipReflectionImage
                clipReflectionImage.style.visibility = "hidden";
            }

            // check for previous element
            if (this.previousClipId != null)
            {
                // get prevBackgroundImage
                var prevBackgroundImage = $("clipBackgroundImage" + this.previousClipId);

                // release shadow
                Shadower.deshadow(prevBackgroundImage);
                prevBackgroundImage.style.zIndex = 0;
                prevBackgroundImage.style.marginTop = "0px";
                prevBackgroundImage.style.position = "absolute";

                // get previousCaption
                var prevCaption = $("clipCaption" + this.previousClipId);

                // make previousCaption visible
                prevCaption.style.visibility = "visible";
            }

            // remember element
            this.previousClipId = this.clipId;

            // set thumbsRelaoded to false
            this.thumbsReloaded = false;
        }
    },

    // ---------------------------------------------------------------------
    // applys a growing shadow to specified element an increases marginTop
    // ---------------------------------------------------------------------
    _applyShadow: function(argCounter, argElement)
    {
        // set margin
        argElement.style.marginTop = argCounter + "px";

        // set shadow        
        Shadower.shadow(argElement,
        {
            distance: 5 + argCounter,
            angle: 130,
            opacity: 0.4,
            nestedShadows: 2,
            color: '#000000'
        }
        );
    },

    // ---------------------------------------------------------------------
    // updates specified element with given content (playerdiv / ajaxresponse)
    // via prototype's "update"-methode
    // ---------------------------------------------------------------------
    _updatePlayerDiv: function(argElement, argContent)
    {
        argElement.update(argContent);
    },

    // ---------------------------------------------------------------------
    // sets zindex to specified element
    // ---------------------------------------------------------------------
    _setIndex: function(argElement, argIndex)
    {
        argElement.style.zIndex = argIndex;
    },

    // ---------------------------------------------------------------------
    // moves thumblist in adequate direction
    // ---------------------------------------------------------------------
    onMoveThumbs: function(direction)
    {
        // get current number of images displayed in box
        var list = $('clipNavigation');
        var array = list.getElementsByClassName("clip");
        // within clipNavigation there are for each clip-entry 2 elements with className "clip"
        // so the imageCount is array.length / 2;
        this.imageCount = array.length/2;
        
        var list_table = $('clipList');
        // if imagecount < 7, we don't need to operate
        if (this.imageCount > 7)
        {
            // check whether already sliding
            if (this.isSliding)
            {
                return false;
            }
            // box has to slide leftwards
            if (direction == 'left')
            {
                // get images currently not shown in imagebox
                this.imagesToShow = this.imageCount - 7;

                // check for counter
                if (this.counter < this.imagesToShow)
                {
                    //  set sliding flag
                    this.isSliding = true;
                    new Effect.MoveBy(list_table, 0, -105, { mode: 'relative', duration: 0.5, afterFinish: this._onSlideFinish.bind(this) });
                    this.counter++;
                    this.currentImage++;
                }

                // check wether counter is maximal    
                if (this.counter == this.imagesToShow)
                {
                    // hide the right arrow
                    var rightArrow = $(this.rightArrowID);
                    rightArrow.style.visibility = "hidden";
                }
                // when thumbs are moved left, show left arrow
                var leftArrow = $(this.leftArrowID);
                leftArrow.style.visibility = "visible";
            }
            // box has to slide rightwards
            else
            {   // check wether there have already been rightwards-slides
                if (this.currentImage > 1)
                {
                    //  set sliding flag
                    this.isSliding = true;
                    new Effect.MoveBy(list_table, 0, 105, { mode: 'relative', duration: 0.5, afterFinish: this._onSlideFinish.bind(this) });
                    this.currentImage--;
                    this.counter--;
                }

                // check if we are at the first image agein
                if (this.currentImage == 1)
                {
                    // hide left arrow
                    var leftArrow = $(this.leftArrowID);
                    leftArrow.style.visibility = "hidden";
                }
                // standard: make right arrow visible
                var rightArrow = $(this.rightArrowID);
                rightArrow.style.visibility = "visible";
            }
        }
        return false;
    },

    // ---------------------------------------------------------------------
    // resets intern counters
    // ---------------------------------------------------------------------
    onReset: function()
    {
        this.counter = 0;
        this.currentImage = 1;
        this.previousClipId = null;
    },

    // ---------------------------------------------------------------------
    // resets slidingflag
    // ---------------------------------------------------------------------
    _onSlideFinish: function()
    {
        this.isSliding = false;
    },

    /// ------------------------------------------
    /// Loads startupPlayer with specified clipID
    /// ------------------------------------------
    LoadStartUpPlayer: function(clipIDs)
    {
        // remember clipIDS
        this.startupClips = clipIDs;

        // create new ajaxrequest
        var ajaxRequest = new SmartAjax();
        ajaxRequest.serviceId = "ClipService";
        ajaxRequest.url = this.ajaxLoaderUrl;
        ajaxRequest.appendRequest("command", "GetPlayer");
        if (this.startupClips.length > 1)
        {
            ajaxRequest.appendRequest("clipID", this.startupClips[0]);
        }
        else
        {
            ajaxRequest.appendRequest("clipID", this.startupClips);
        }
        // remove first item
        this.startupClips.shift();

        ajaxRequest.onResponse = this._onGetPlayerResponse.bind(this);
        ajaxRequest.sendRequest();
        if (this.isFirstStartupClip == true) this.isFirstStartupClip = false;
    },

    /// ------------------------------------------
    /// handles response for player request (startup player)
    /// ------------------------------------------
    _onGetPlayerResponse: function(argAjaxObj)
    {
        // check for error
        if (argAjaxObj.error == null)
        {
            this.InitStartupPlayer(argAjaxObj.response);
        }
    },

    /// ------------------------------------------
    /// Loads startupplayer from specific html
    /// ------------------------------------------
    InitStartupPlayer: function(innerHtml)
    {
        /// -------------------------------------------------
        // create new div element to display player; also check for previous element
        /// -------------------------------------------------        
        var startupscreen = $('player_maincontainer');

        var div = $('startupplayerdiv');
        if (div == null)
        {
            div = new Element('div');
            div.id = "startupplayerdiv";
            div.style.zIndex = 1000;
            div.style.backgroundColor = "transparent";
            div.style.display = "none";
            div.style.height = "384";
            div.style.width = "550px";
            div.style.position = "absolute";
            div.style.overflow = "hidden";

            // fade out the startupscreen
            Effect.SlideUp('startup_screen');
            Effect.SlideUp('startup_ticker');

            // insert element into DOM              
            Element.insert(startupscreen, { top: div });
            // update div
            div.update(innerHtml);

            // init effects
            setTimeout("Effect.BlindDown('startupplayerdiv', { duration:2.0})", 1000);
        }
        else
        {
            div.update(innerHtml);
        }
    },

    BlindElementUp: function()
    {
        var element = $('startupplayerdiv');
        if (element != null)
        {
            if (this.startupClips.length > 0 && this.isFirstStatupClip && this.startupClips[0] != -1)
            {
                Effect.BlindUp(element, { duration: 2.0, afterFinish: this.loadNextClip.bind(this) });
            }
            else if (this.isFirstStatupClip)
            {
                Effect.BlindUp(element, { duration: 2.0, afterFinish: this.BlindDownStartScreen.bind(this) });
            }
            else if (this.startupClips.length > 0 && this.startupClips[0] != -1)
            {
                this.loadNextClip();
            }
            else
            {
                Effect.BlindUp(element, { duration: 2.0, afterFinish: this.BlindDownStartScreen.bind(this) });
            }
        }
    },

    loadNextClip: function()
    {
        if (this.startupClips.length > 0)
        {
            this.LoadStartUpPlayer(this.startupClips);
        }
    },

    BlindDownStartScreen: function()
    {
        var element1 = $('startup_screen');
        var element2 = $('startup_ticker');
        if (element1 != null && element2 != null)
        {
            Effect.BlindDown('startup_screen');
            Effect.BlindDown('startup_ticker', { afterFinish: this.RemoveElement.bind(this) });
        }
    },


    RemoveElement: function()
    {
        var element = $('startupplayerdiv');
        if (element != null)
        {
            // temp remove object. 
            Element.remove('startupplayerdiv');
        }
    }
};