// JScript File String.prototype.replaceAll=function(s1, s2) {return this.split(s1).join(s2)} var ChannelNaviButton = { // --------------------------------------------------------------------- // member // --------------------------------------------------------------------- isAlreadyVisible: false, ajaxLoaderUrl: null, channelsToShow: 0, currentChannel: 1, channelCount: 0, counter: 0, isSliding: false, timeBeforeRequest: 0, timeAfterRequest: 0, timeout: 0, _bUpperArrowOver: null, _bUpperArrowOut: null, _bBottomArrowOver: null, _bBottomArrowOut: null, upperArrowIsObserved: false, bottomArrowIsObserved: true, currentChannelID: 0, clipsFullyLoaded: false, // --------------------------------------------------------------------- // --------------------------------------------------------------------- // Constructor // --------------------------------------------------------------------- initialize: function() { }, // --------------------------------------------------------------------- // Operations // --------------------------------------------------------------------- // --------------------------------------------------------------------- // sets ajaxrequest for loading thumbnails // --------------------------------------------------------------------- LoadFooterThumbs: function(navigationID) { if (navigationID != this.currentChannelID) { var ajaxRequest = new SmartAjax(); ajaxRequest.serviceId = "ClipService"; ajaxRequest.url = this.ajaxLoaderUrl; ajaxRequest.appendRequest("command", "LoadFooterThumbs"); ajaxRequest.appendRequest("channelID", navigationID); ajaxRequest.onResponse = this._onLoadFooterResponse.bind(this); // get current time var time = new Date(); this.timeBeforeRequest = time.getTime(); // get currentChannelID this.currentChannelID = navigationID; this.clipsFullyLoaded = false; // send request ajaxRequest.sendRequest(); } }, // --------------------------------------------------------------------- // checks for ajaxresponse and for evtl already existing thumblist element // if there has been no ajax error, the function _afterToggleAppear will // be invoked // --------------------------------------------------------------------- _onLoadFooterResponse: function(argAjaxObj) { // get time var time = new Date(); this.timeAfterRequest = time.getTime(); // get elapsed time var dTime = this.timeAfterRequest - this.timeBeforeRequest; // calculate timeout via deltatime this.timeout = 3.125 * dTime + 200; // check for error if (argAjaxObj.error == null) { // get clipList var clipList = $('clipList'); var y = null; if (clipList != null) y = clipList.getElementsByClassName('clipBackgroundImage'); // check for object if (y != null) { // object exists, fade it out Effect.Fade('clipList', { duration: 0.5, afterFinish: this._afterToggleAppear.bind(this, argAjaxObj) }); } else { // object does not exist, call _afterToggleAppear immediatly this._afterToggleAppear(argAjaxObj); } clipInterface.add("currentChannel", this.currentChannelID); } else { // error appeared alert(argAjaxObj.error); } }, // --------------------------------------------------------------------- // loads content form ajaxresponse into currentplayer; // afterwards makes clipthumb table come into view // --------------------------------------------------------------------- _afterToggleAppear: function(argAjaxObj) { // get elements to update var list = $('clipthumbs_span'); var nameplaceholder = $('channel_name_thumblist'); // split ajaxresponse to get channel name var elements = argAjaxObj.response.split("__maSeparator__") if (elements.length > 1) { // update list and nameplaceholder list.update(elements[0]); nameplaceholder.update(elements[1]); } // no separator found, just update thumbnaillist else { list.update(argAjaxObj.response); } // get all thumbnails var array = list.getElementsByClassName('reflectImage'); if (document.all && !window.opera) { this._addReflection(array); } else { setTimeout(this._addReflection.bind(this, array), this.timeout); } // get object to show var y = $('clipList'); // "has to be hidden, to appear" y.hide(); // make element appear Effect.Appear('clipList', { duration: 0.5 }); // reset counters of clipview ClipThumbList.onReset(); }, // --------------------------------------------------------------------- // add reflection to images // --------------------------------------------------------------------- _addReflection: function(array) { // iterate throught image list var n = array.length; for (var i = 0; i < n; i++) { // set position relative array[i].style.position = "relative"; // add reflection to all images Reflection.add(array[i], { height: 1 / 3, opacity: 1 / 3 }); } this.clipsFullyLoaded = true; }, // --------------------------------------------------------------------- // is fired when channels have to be moved (click on upper or bottom arrow) // --------------------------------------------------------------------- onMoveChannels: function(direction) { // get current number of channels in box var list = $('channel_holder'); var array = list.getElementsByClassName("channel_item"); this.channelCount = array.length; var list_ul = $('channel_list'); // if channelcount < 10, we don't need to operate if (this.channelCount > 10) { if (this.isSliding) { return false; } // box has to slide upwards if (direction == 'up') { // get images currently not shown in channelbox this.channelsToShow = this.channelCount - 10; // check for counter if (this.counter < this.channelsToShow) { this.isSliding = true; new Effect.MoveBy(list_ul, -27, 0, { mode: 'relative', duration: 0.5, afterFinish: this._onSlideFinish.bind(this) }); this.counter++; this.currentChannel++; } // check wether end of list is reached if (this.counter == this.channelsToShow) { // stop eventobserving Event.stopObserving('channelbutton_down_arrow', "mouseover", this._bBottomArrowOver); Event.stopObserving('channelbutton_down_arrow', "mouseout", this._bBottomArrowOut); // set flag this.bottomArrowIsObserved = false; // get arrow var arrow = $('channelbutton_down_arrow'); if (arrow) { // set inactive class arrow.className = "channelbutton_down_inactive"; if (arrow.onmouseout) { // disable standard events arrow.onmouseout = null; arrow.onmouseover = null; } } } // check for upperArrow flag if (!this.upperArrowIsObserved) { // remember event this._bUpperArrowOver = this._UpperArrowOver.bindAsEventListener(this); this._bUpperArrowOut = this._UpperArrowOut.bindAsEventListener(this); // observe Event.observe('channelbutton_up_arrow', "mouseover", this._bUpperArrowOver); Event.observe('channelbutton_up_arrow', "mouseout", this._bUpperArrowOut); // set flag this.upperArrowIsObserved = true; } // get arrow var arrow = $('channelbutton_up_arrow'); if (arrow) { // set classname arrow.className = "channelbutton_up"; } } // box has to slide downwards else { // check wether there have already been downward-slides if (this.currentChannel > 1) { this.isSliding = true; new Effect.MoveBy(list_ul, 27, 0, { mode: 'relative', duration: 0.5, afterFinish: this._onSlideFinish.bind(this) }); this.currentChannel--; this.counter--; } // check wether beginning is reached again if (this.currentChannel == 1) { // stop eventobserving Event.stopObserving('channelbutton_up_arrow', "mouseover", this._bUpperArrowOver); Event.stopObserving('channelbutton_up_arrow', "mouseout", this._bUpperArrowOut); // set flag this.upperArrowIsObserved = false; // get arrow var arrow = $('channelbutton_up_arrow'); if (arrow) { // set classname arrow.className = "channelbutton_up_inactive"; } } // check for bottom arrow flag if (!this.bottomArrowIsObserved) { // remember event this._bBottomArrowOver = this._BottomArrowOver.bindAsEventListener(this); this._bBottomArrowOut = this._BottomArrowOut.bindAsEventListener(this); // observe events Event.observe('channelbutton_down_arrow', "mouseover", this._bBottomArrowOver); Event.observe('channelbutton_down_arrow', "mouseout", this._bBottomArrowOut); // set flag this.bottomArrowIsObserved = true; } //get arrow var arrow = $('channelbutton_down_arrow'); if (arrow) { // set classname arrow.className = "channelbutton_down"; } } } return false; }, // --------------------------------------------------------------------- // is fired when sliding is finished // --------------------------------------------------------------------- _onSlideFinish: function() { this.isSliding = false; }, // --------------------------------------------------------------------- // event handler methods // --------------------------------------------------------------------- _UpperArrowOut: function(e) { var element = Event.element(e); element.className = "channelbutton_up"; }, _UpperArrowOver: function(e) { var element = Event.element(e); element.className = "channelbutton_up_active"; }, _BottomArrowOut: function(e) { var element = Event.element(e); element.className = "channelbutton_down"; }, _BottomArrowOver: function(e) { var element = Event.element(e); element.className = "channelbutton_down_active"; } };