/*------------------------- */ /* Video lightbox */ /* V1.3 by Chris Knight */ /* 23/06/08 */ /*------------------------- */ /* Used to display Flash videos in the style of lightbox - fade in and out - uses scriptaculous, prototype and effects libraries*/ var copyText = new Array(); function setCopytext(copyText){ copytext = copyText; } function getCopytext(){ return copytext; } /*Startup - Define flash player properties, then create video links and attach event listeners to them (which will run the flash player)*/ function setUpPlayer(copyText, mediaServer, linkLocation){ mediaServerLocation = mediaServer; setCopytext(copyText); setVideoLinks(linkLocation); } function textHide(){ var hideText = document.getElementsByClassName("hideText_DyBox"); for(var i = 0; i < hideText.length; i++){ hideText[i].className = hideText[i].className + " hide"; } } function getBodyWidth(){ var bodyWidth; if (document.body && typeof document.body.clientWidth!='undefined') { bodyWidth = document.body.clientWidth; }else{ bodyWidth = "974px"; } return bodyWidth; } /*Creates a flash player object*/ function FlashPlayer(width, height, vidWidth, vidHeight, fullscreen, skipTime, allowscriptaccess, allowFullScreen, uiBarColour, uiBarBufferColor){ this.width = width; this.height = height; this.vidWidth = vidWidth; this.vidHeight = vidHeight; this.fullscreen = fullscreen; this.skipTime = skipTime; this.allowscriptaccess = allowscriptaccess; this.allowFullScreen = allowFullScreen; this.uiBarColour = uiBarColour; this.uiBarBufferColor = uiBarBufferColor; this.pageWidth = getBodyWidth(); } /*Creates a text holder object*/ function textPlayer(width, height){ this.width = width; this.height = height; this.pageWidth = getBodyWidth(); } function defineFlashPlayer(flashPlayerProperties){ var so = new SWFObject(mediaServerLocation + "/images_resize_sites/swf/video/flvPlayer.swf", "flv", flashPlayerProperties.width, flashPlayerProperties.height, "8", "#000000"); so.addVariable("viewHeight", flashPlayerProperties.vidHeight); so.addVariable("viewWidth", flashPlayerProperties.vidWidth); so.addVariable("fullscreen", flashPlayerProperties.fullscreen); so.addVariable("skipTime",flashPlayerProperties.skipTime); so.addVariable("uiBarTimeColor", flashPlayerProperties.uiBarColour); so.addVariable("uiBarBufferColor", flashPlayerProperties.uiBarBufferColor); so.addParam("menu", "false"); /*Disables the menu on the flash video when you right click it*/ so.addParam("allowscriptaccess",flashPlayerProperties.allowscriptaccess); so.addParam("allowFullScreen",flashPlayerProperties.allowFullScreen); return so; } function defineSWFPlayer(flashPlayerProperties, videoName){ var so = new SWFObject(videoName, "swf", flashPlayerProperties.width, flashPlayerProperties.height, "8", "#000000"); so.addVariable("viewHeight", flashPlayerProperties.vidHeight); so.addVariable("viewWidth", flashPlayerProperties.vidWidth); so.addParam("menu", "false"); //Disables the menu on the flash video when you right click it return so; } /*Creates a video link for each occurrance of a product(css class) on the page*/ function setVideoLinks(linkLocation){ var copyText = ""; if(linkLocation.length > 0){ for(var i = 0; i < linkLocation.length; i++){ if($(linkLocation[i])){ if($(linkLocation[i]).getElementsByClassName("addDyBoxLink")){ var links = $(linkLocation[i]).getElementsByClassName("addDyBoxLink"); var ignoreCertainIds = $("heroItem"); for(var j = 0; j < links.length; j++){ if(links[j] != ignoreCertainIds){ copyText = getCopytext(); if(hasFlashVersion(8) || copyText[j][3].toLowerCase() =="textbox") { textHide(); createVideoLink(links[j], copyText, j, linkLocation[i]); } } } } } } }else{ if(document.getElementsByClassName("addDyBoxLink")){ var links = document.getElementsByClassName("addDyBoxLink"); var ignoreCertainIds = $("heroItem"); for(var k = 0; k < links.length; k++){ if(links[k] != ignoreCertainIds){ copyText = getCopytext(); if(hasFlashVersion(8) || copyText[k][3].toLowerCase() =="textbox") { textHide(); createVideoLink(links[k], copyText, k, ""); } } } } } } /*Creates an image link for starting the flash video*/ /*(currentFlashPlayer = Object holding Flash player height, width, control settings etc. videoObject = Represents an instance of a div.product. contentDisplayProperties = Object instance holding content player / container details - height, width etc. Used in conjunction with currentFlashPlayer variable. copyText = copy text derived from the asp page that is calling technology.js. i = Used to help determine which)*/ function createVideoLink(videoObject, copyText, i, linkLocation){ var videoAnchor, videoTxt, videoImg, videoObjectParent, videoSectionP, videoSectionP_Text, videoDiv, videoAnchor, linkName, loadFlashPlayer_Bind var childPos = 0; if(copyText[i][3].toLowerCase() == ""){ copyText[i][3] = "text"; } if(linkLocation == ""){ linkLocation = "Content"; } if(copyText[i][3].toLowerCase() != "image"){ videoAnchor = document.createElement("a"); videoAnchor.setAttribute("href", "javascript:void(0)"); videoAnchor.className = "videoLink clear"; videoAnchor.id = "videoLink_" + linkLocation + "_" + i; if(copyText[i][3].toLowerCase() == "text" || copyText[i][3].toLowerCase() == "textbox"){ videoAnchor.className = videoAnchor.className + " textLink"; videoAnchor.setAttribute("title", copyText[i][1]); videoTxt = document.createTextNode(copyText[i][0]); videoAnchor.appendChild(videoTxt); }else if(copyText[i][3].toLowerCase() == "button"){ videoAnchor.setAttribute("title", copyText[i][1]); videoImg = document.createElement("img"); videoImg.setAttribute("src", copyText[i][0]); videoImg.setAttribute("alt", copyText[i][1]); videoImg.setAttribute("id", "videoLinkImg" + i); videoAnchor.appendChild(videoImg); } if(videoObject.parentNode){ videoObjectParent = videoObject.parentNode; videoObjectParent.insertBefore(videoAnchor, videoObject.nextSibling); } }else{ var videoSectionDiv = document.createElement("div"); videoSectionDiv.className = "videoSection clear"; videoSectionDiv.setAttribute("id", "videoDiv_" + linkLocation + "_" + i); videoSectionDiv.className = "videoSection clear"; if(copyText[i][0] != ""){ videoSectionP = document.createElement("p"); videoSectionP.className = "greyText"; videoSectionP_Text = document.createTextNode(copyText[i][0]) } videoDiv = document.createElement("div"); videoDiv.className = "flashcontent"; videoDiv.setAttribute("id", "video" + i); videoAnchor = document.createElement("a"); videoAnchor.setAttribute("href", "javascript:void(0)"); videoAnchor.className = "videoLink"; videoAnchor.id = "videoLink_" + linkLocation + "_" + i; videoImg = document.createElement("img"); videoImg.setAttribute("src", copyText[i][1]); videoImg.setAttribute("alt", copyText[i][6]); videoImg.setAttribute("id", "videoLinkImg" + i); Event.observe(videoAnchor,"mouseover",function() { imageRollover(videoImg, copyText[i][1])}); Event.observe(videoAnchor,"mouseout",function() { imageRollout(videoImg, copyText[i][1])}); videoAnchor.appendChild(videoImg); videoDiv.appendChild(videoAnchor); if(copyText[i][0] != ""){ videoSectionP.appendChild(videoSectionP_Text); videoSectionDiv.appendChild(videoSectionP); } videoSectionDiv.appendChild(videoDiv); if(videoObject.parentNode){ videoObjectParent = videoObject.parentNode; videoObjectParent.insertBefore(videoSectionDiv, videoObject.nextSibling); } } linkName = videoAnchor.id; loadFlashPlayer_Bind = loadFlashPlayer.bindAsEventListener(this, copyText, i); Event.observe(linkName ,"click", loadFlashPlayer_Bind); } function loadFlashPlayer(event, copyText, linkId){ var linkName, loadFlashPlayer_Bind, linkNames; linkNames = document.getElementsByClassName("videoLink"); for(var i = 0; i < linkNames.length; i++){ linkName = linkNames[i].id; loadFlashPlayer_Bind = loadFlashPlayer.bindAsEventListener(this, copyText, i); Event.stopObserving(linkName ,"click", loadFlashPlayer_Bind); } loadFlashPlayerVideo(copyText[linkId][2], copyText[linkId][3], copyText[linkId][4], copyText[linkId][5], copyText[linkId][7], copyText[linkId][8], copyText[linkId][9]); } function imageRollover(videoImg, videoImageArray){ videoImageArray = videoImageArray.replace(".jpg","_Yellow.jpg"); videoImg.src = videoImageArray; } function imageRollout(videoImg, videoImageArray){ videoImageArray = videoImageArray.replace("_Yellow.jpg",".jpg"); videoImg.src = videoImageArray; } function createDyBoxOverlay(){ var bodyContainer = document.getElementsByTagName("body")[0]; var dyBoxContainer = document.createElement("div"); dyBoxContainer.setAttribute("id", "dyBox_overlay"); dyBoxContainer.setAttribute("class", "dyBox_AllowClose"); bodyContainer.appendChild(dyBoxContainer); } function buildContainers(linkType, playerHeight, contentDisplayProperties, win){ if(!$("dyBox_overlay")){ createDyBoxOverlay(); createBlackBackground(linkType, playerHeight); } if(!$("lightbox_Content")){ createContentOverlay(linkType, contentDisplayProperties, win); } } function createContentOverlay(linkType, contentDisplayProperties, win){ var containerContent, bodyContainer; if(linkType.toLowerCase() == "textbox"){ containerContent = createPlayerContainer(contentDisplayProperties, linkType); containerContent.style.left = (-(getDyBoxOffset(contentDisplayProperties, win)) + ((win[0] - contentDisplayProperties.width) / 2)) + "px"; }else{ containerContent = createPlayerContainer(contentDisplayProperties, linkType); containerContent.style.left = (-(getDyBoxOffset(contentDisplayProperties, win)) + ((win[0] - contentDisplayProperties.width) / 2)) + "px"; } bodyContainer = document.getElementsByTagName("body")[0]; bodyContainer.appendChild(containerContent); } /*Loads the flash player with the relevant video*/ function loadFlashPlayerVideo(videoName, linkType, uiAvailable, bufferTime, playerWidth, playerHeight, copyTextCategory){ var playerHeightUI, currentFlashPlayer, win, contentDisplayProperties; win = this.windowDimensions(); playerHeightUI = playerHeight; /*only useful when the text player is to be used - the copytext held by bufferTime and videoAnchorId in this scenario is different to if the flash player is to be used*/ if(linkType.toLowerCase() == "textbox"){ contentDisplayProperties = new textPlayer(playerWidth, playerHeight); }else{ if(uiAvailable.toLowerCase() =="true"){ playerHeightUI = parseInt(playerHeight) + 26; } contentDisplayProperties = new FlashPlayer(playerWidth, playerHeightUI, playerWidth, playerHeight,"true",2,"always","true", "#666666", "#333333"); } buildContainers(linkType, playerHeight, contentDisplayProperties, win); $("lightbox_Content").style.display = "none"; $("dyBox_overlay").style.display = "none"; $("lightbox_Flash").style.backgroundColor = "#000000"; /*Get width of page and work out how much to offset div to the left, so that the entire page is faded rather than just the body section (window - flash size then divide by two to get the left over space either side of flash player. Then divide by two to know where the 0px boundary is within the browser.*/ if(linkType.toLowerCase() == "textbox"){ $("dyBox_overlay").style.left = -(getDyBoxOffset(contentDisplayProperties, win)) + "px"; }else{ $("dyBox_overlay").style.left = getDyBoxOffset(contentDisplayProperties, win) + "px"; } $("closeFlash").className = "dyBox_AllowClose"; $("dyBox_overlay").className = "dyBox_AllowClose clear"; /*Allows dyBox to display within the entire browser screen rather than just being confined to the body tag size*/ $("dyBox_overlay").style.width = win[0] + "px"; if(linkType.toLowerCase() == "textbox"){ this.putCenter("lightbox_Content", contentDisplayProperties); Event.observe(this,"resize",function() {this.putCenter("lightbox_Content", contentDisplayProperties);}) }else{ if(videoName.lastIndexOf(".swf") != -1){ currentFlashPlayer = defineSWFPlayer(contentDisplayProperties, videoName); //alert(videoName); }else{ currentFlashPlayer = defineFlashPlayer(contentDisplayProperties); //alert(videoName); currentFlashPlayer.addVariable("file", videoName); currentFlashPlayer.addVariable("uiEnabled", uiAvailable); currentFlashPlayer.addVariable("buffer", bufferTime); } this.putCenter("lightbox_Content", contentDisplayProperties); Event.observe(this,"resize",function() {this.putCenter("lightbox_Content", contentDisplayProperties);}) } if (bufferTime = ""){ bufferTime = 4; } if (uiEnabled = ""){ uiEnabled = "true"; } if($("flv")){ Event.observe($("lightbox_Flash"),"click", disableVideoPlayerSelect); } if($("swf")){ Event.observe($("lightbox_Flash"),"click", disableVideoPlayerSelect); } /*Check for Firefox on Mac, if so then don't fade in and out of player - distorts flash controls*/ if((osType().toLowerCase() == "mac") && (identifyBrowser().toLowerCase() == "mozilla")){ if(linkType.toLowerCase() == "textbox"){ createTextBox(copyTextCategory); }else{ noFlashMessage() currentFlashPlayer.write("lightbox_Flash"); } if(typeof sIFR == "function"){if(document.getElementsByClassName("sIFR-flash")){var flashTitles = document.getElementsByClassName("sIFR-flash");for(var i = 0; i < flashTitles.length; i++){var abc = flashTitles[i];flashTitles[i].style.visibility = "hidden";}}}; $("dyBox_overlay").style.display = "block"; $("lightbox_Content").style.display = "block"; $("closeFlash").style.display = "block"; $("lightbox_Flash").style.display = "block"; allowPlayerClose(); }else{ /*Fades in the dyBox_overlay div, which has a black colour background, and the flash video / text div.*/ if(linkType.toLowerCase() == "textbox"){ new Effect.Appear($("dyBox_overlay"), {duration: 0.5, from: 0.0, to: 0.9, afterFinish:function(){if($("dyBox_overlay").style.display != "none"){createTextBox(copyTextCategory); $("lightbox_Flash").style.display = "block"; $("closeFlash").style.display = "block"; new Effect.Appear($("lightbox_Content"), {duration: 0.5, from: 0.0, to: 1.0, afterFinish:function(){allowPlayerClose();}})}}}); }else{ displayBackground(currentFlashPlayer); } } } function displayBackground(currentFlashPlayer){ new Effect.Appear($("dyBox_overlay"), {duration: 0.25, from: 0.0, to: 0.85, afterFinish:function(){if($("dyBox_overlay").style.display != "none"){if(typeof sIFR == "function"){if(document.getElementsByClassName("sIFR-flash")){var flashTitles = document.getElementsByClassName("sIFR-flash");for(var i = 0; i < flashTitles.length; i++){var abc = flashTitles[i];flashTitles[i].style.visibility = "hidden";}}};displayContent(currentFlashPlayer)}}}); } function displayContent(currentFlashPlayer){ noFlashMessage(); $("closeFlash").style.display = "block"; $("lightbox_Flash").style.display = "block"; new Effect.Appear($("lightbox_Content"), {duration: 0.5, from: 0.0, to: 1.0,afterFinish:function(){currentFlashPlayer.write("lightbox_Flash"); allowPlayerClose();}}); } function noFlashMessage(){ var noFlashTag, noFlashText; noFlashTag = document.createElement("p"); noFlashTag.id = "dyBox_noFlashText"; noFlashText = document.createTextNode("Flash Player version 8 or above is required to view the video. Please download this from the relevant website."); noFlashTag.appendChild(noFlashText); } function createTextBox(copyTextCategory){ var data, ajaxResults; data = "copyTextCategory=" + copyTextCategory; ajaxResults = new Ajax.Updater("lightbox_Flash", "../library/dyBoxTextContent.asp", {parameters:data}); $("lightbox_Flash").className = "textBox clear"; } function allowPlayerClose(){ if(($("dyBox_overlay").style.display = "block") && ($("lightbox_Content").style.display = "block")){ Event.observe($("dyBox_overlay"),"click", closeLightboxContainer); Event.observe($("closeFlash"),"click", closeLightboxContainer); } } /*Stops Mac users from closing the video player by clicking on the player - It stopped users from being able to use the control panel*/ function disableVideoPlayerSelect(argEvent){ //Event.stopObserving($("flv"),"click",closeLightboxContainer); Event.stop(argEvent); } function getDyBoxOffset(contentDisplayProperties, win){ var offset; //+10px is to avoid a scrollbar appearing at the bottom of the page, when the video player loads up offset = (((win[0] - contentDisplayProperties.pageWidth) / 2) + 10); return offset; } function createPlayerContainer(contentDisplayProperties, linkType){ var containerContent, closeButton, closeButtonText, spanTag, spanTagText, contentContainer containerContent = document.createElement("div"); containerContent.setAttribute("id", "lightbox_Content"); containerContent.setAttribute("class", "clear"); closeButton = document.createElement("a"); closeButtonText = document.createTextNode("close - X"); spanTag = document.createElement("span"); spanTag.setAttribute("class", "other"); spanTagText = document.createTextNode("close "); closeButton.setAttribute("href", "javascript:void(0)"); closeButton.setAttribute("id", "closeFlash"); /*Sets the width of the close block to be the same as thew flash video window*/ if(linkType.toLowerCase() != "textbox"){ closeButton.style.width = contentDisplayProperties.width + "px"; } contentContainer = document.createElement("div"); contentContainer.setAttribute("id", "lightbox_Flash"); contentContainer.setAttribute("class", "clear"); contentContainer.style.width = contentDisplayProperties.width + "px"; contentContainer.style.height = contentDisplayProperties.height + "px"; closeButton.appendChild(closeButtonText); containerContent.appendChild(closeButton); containerContent.appendChild(contentContainer); Event.observe(contentDisplayProperties,"click",disableVideoPlayerSelect); return containerContent; } /*Creates the transparent background when a video link is pressed*/ function createBlackBackground(linkType, playerHeight){ var windowHeight, win; win = window.windowDimensions(); if (document.body && document.body.clientHeight) { // Explorer 6 Strict Mode windowHeight = document.body.clientHeight; if (windowHeight < win[1]){ windowHeight = win[1]; } } overlay = $("dyBox_overlay"); overlay.style.backgroundImage = "url(../images/dyBox/black-90.png)"; overlay.style.opacity = "0.8"; overlay.style.filter = "alpha(opacity=80)"; overlay.style.backgroundRepeat = "repeat"; if(document.body.offsetHeight){ if(document.body.offsetHeight < (1.5 * playerHeight)){ overlay.style.height = (1.5 * parseInt(playerHeight)) + "px"; }else{ overlay.style.height = document.body.offsetHeight + "px"; } }else{ overlay.style.height = "1400px"; } //overlay.style.height = windowHeight + "px"; overlay.style.width = "100%"; } /*Places an item in the center of the screen*/ function putCenter(item, contentDisplayProperties) { var xy, win, scrollValue, playerPadding, topPos, leftPos, leftOffset; item = $(item); xy = item.getDimensions(); win = this.windowDimensions(); scrollValue = this.scrollOffset(); leftOffset = getDyBoxOffset(contentDisplayProperties, win); if(item.id == "lightbox_Content"){ if(win[0] < contentDisplayProperties.pageWidth){ leftPos = ((win[0] - contentDisplayProperties.width) / 2); }else{ leftPos = -(getDyBoxOffset(contentDisplayProperties, win)) + ((win[0] - contentDisplayProperties.width) / 2); } }else{ leftPos = ((win[0] - contentDisplayProperties.width) / 2); } topPos = (((win[1] - contentDisplayProperties.height) / 2) + scrollValue[1]); if(topPos < 0){ topPos = 0; } if(leftPos < 0){ leftPos = 0; } item.style.left = leftPos + "px"; item.style.top = topPos + "px"; item.style.position = "absolute"; updateDyBoxSize(contentDisplayProperties, win); } function updateDyBoxSize(contentDisplayProperties, win){ if(win[0] < contentDisplayProperties.pageWidth){ win[0] = contentDisplayProperties.pageWidth; $("dyBox_overlay").style.left = "0px"; } else{ $("dyBox_overlay").style.left = "-" + getDyBoxOffset(contentDisplayProperties, win) + "px"; } $("dyBox_overlay").style.width = win[0] + "px"; } function windowDimensions() { var x, y; if (self.innerHeight) { // all except Explorer x = self.innerWidth; y = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode x = document.documentElement.clientWidth; y = document.documentElement.clientHeight; } else if (document.body) { // other Explorers x = document.body.clientWidth; y = document.body.clientHeight; } if (!x) x = 0; if (!y) y = 0; arrayWindowSize = new Array(x,y); return arrayWindowSize; } function scrollOffset() { var x, y; if (self.pageYOffset) { // all except Explorer x = self.pageXOffset; y = self.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict x = document.documentElement.scrollLeft; y = document.documentElement.scrollTop; } else if (document.body) { // all other Explorers x = document.body.scrollLeft; y = document.body.scrollTop; } if (!x) x = 0; if (!y) y = 0; arrayScrollOffset = new Array(x,y); return arrayScrollOffset; } function closeLightboxContainer(event){ var linkNames = ""; var linkName = ""; var i; if(typeof sIFR == "function"){ if(document.getElementsByClassName("sIFR-flash")){ var flashTitles = document.getElementsByClassName("sIFR-flash"); for(var i = 0; i < flashTitles.length; i++){ var abc = flashTitles[i]; flashTitles[i].style.visibility = "visible"; } } } var element = Event.element(event); if(Element.hasClassName(element,"dyBox_AllowClose")){ $("lightbox_Flash").style.display = "none"; $("closeFlash").style.display = "none"; if((osType().toLowerCase() == "mac") && (identifyBrowser().toLowerCase() == "mozilla")){ unloadFlashPlayerVideo(); }else{ new Effect.Fade($("dyBox_overlay"), {duration: 0.5, afterFinish:function(){}}) new Effect.Fade($("lightbox_Content"), {duration: 0.5, afterFinish:function(){unloadFlashPlayerVideo();}}) } linkNames = document.getElementsByClassName("videoLink"); for(i = 0; i < linkNames.length; i++){ linkName = linkNames[i].id; //Event.observe(linkName ,"click", loadFlashPlayer); } } } //Stops the flash player from playing function unloadFlashPlayerVideo(){ var linkNames, i; $("lightbox_Content").style.display = "none"; $("dyBox_overlay").style.display = "none"; Event.stopObserving($("dyBox_overlay"),"click",closeLightboxContainer); Event.stopObserving($("closeFlash"),"click",closeLightboxContainer); if($("lightbox_Flash").hasChildNodes()){ $("lightbox_Flash").removeChild($("lightbox_Flash").firstChild); } }