/* == Purpose - An object to dynamically switch the content of several divs on various events. - Created to facilitate the functionality needed on the CLA Site. == Dependecies - Needs prototype USE GOOGLES PROTOTYPE, include this in the == Assumptions: - Any div id mentioned in the divArray already exists in the DOM. == Example - See DivSwitcherDemo.html for example usage. */ DivSwitcher = Class.create({ /* Expects a structure like: optionElements = [ { optionContent = '

THUMBNAIL

', playerInitialContent = '

INITIAL PLAYER CONTENT

', playerOnClickContent = '

ON CLICK PLAYER CONTENT

', infoContent = '

INFO CONTENT

' }, ... ] */ initialize:function(optionElements, optionsDivId, playerDivId, infoDivId, options) { this.optionElements = optionElements; this.optionsDivId = optionsDivId; this.playerDivId = playerDivId; this.infoDivId = infoDivId; this.onMouseOverOptionCssClassName = 'divSwitcherMouseOver'; this.onClickOptionCssClassName = 'divSwitcherOnClick'; this.addOptionObserversAndInjectIntoDom(); this.setInitialState(); }, //BEGIN event handlers optionElementMouseOver: function(event, optionJsonObject) { if(!$(optionJsonObject.optionElementDivId).hasClassName(this.onClickOptionCssClassName)) { $(optionJsonObject.optionElementDivId).addClassName(this.onMouseOverOptionCssClassName); } }, optionElementMouseOut: function(event, optionJsonObject) { $(optionJsonObject.optionElementDivId).removeClassName(this.onMouseOverOptionCssClassName); }, optionElementOnClick: function(event, optionJsonObject) { this.optionElements.each(function(x) { $(this.playerDivId).stopObserving('click', x.playerDivOnClickObserverCache); $(x.optionElementDivId).removeClassName(this.onClickOptionCssClassName); }, this); $(optionJsonObject.optionElementDivId).addClassName(this.onClickOptionCssClassName); this.changePlayerAndInfoContent(optionJsonObject); }, playerDivOnClick: function(event, optionJsonObject) { $(this.playerDivId).innerHTML = optionJsonObject.playerOnClickContent; $('divSwitcherPlayer').stopObserving(); //added to fix prob with flash video controls not working }, //END event handlers changePlayerAndInfoContent: function(optionJsonObject) { $(this.playerDivId).observe('click', optionJsonObject.playerDivOnClickObserverCache); $(this.playerDivId).innerHTML = optionJsonObject.playerInitialContent; $(this.infoDivId).innerHTML = optionJsonObject.infoContent; }, /* - helper method - creates a span, assigns it a div id, attaches some observers, and adds the content to it. - */ addOptionObserversAndInjectIntoDom: function() { count = 0; this.optionElements.each(function(x) { //assign div id count++; x.optionElementDivId = "optionElement" + count; // This is the event listener that gets bound to the player // we need to cache it so that we can remove it later with stopObserving // please see http://prototypejs.org/api/event/stopObserving for details // x.playerDivOnClickObserverCache = this.playerDivOnClick.bindAsEventListener(this, x); //create a span option = new Element('span', {id: x.optionElementDivId}).update(x.optionContent); //add observers option.observe('mouseover', this.optionElementMouseOver.bindAsEventListener(this, x)); option.observe('mouseout', this.optionElementMouseOut.bindAsEventListener(this, x)); option.observe('click', this.optionElementOnClick.bindAsEventListener(this, x)); //inject the content into the span $(this.optionsDivId).appendChild(option); }, this); }, /* - helper method - Finds the first optionElement with displayOnLoad: true, and enables this state. */ setInitialState: function() { displayOnLoadInvoked = false; this.optionElements.each(function(x) { //if an displayOnLoad is set simulate click of one of the options to enable its content if(!displayOnLoadInvoked && x.displayOnLoad) { this.optionElementOnClick(null, x); displayOnLoadInvoked = true; } }, this); } });