// multimedia.js /* * ----------------------------------------------------------------- * 'SAUTI' (c) 2005/2006, Kwame Ansong-Dwamena * ----------------------------------------------------------------- */ /* * This js file controls the multimedia display of video, audio and image thumbnails * in the bottom right sections of the main SAUTi homepage. IN FUTURE, THIS JS * FILE WILL COMMUNICATE WITH A SERVER-BASED SCRIPT TO ACCESS ALL * KINDS OF INTERESTING MULTIMEDIA ITEMS THAT ENHANCE THE IMAGE * OF SAUTI. */ var imgArr = new Array(10); // array of thumbnail images var videoDivMidPsn; // top coordinate psn of the div(id="videos"). var posy; // y-coordinate of mouse over the video div var THUMBNAIL_HEIGHT = 75; // height of each thumbnail var offset = -1 * THUMBNAIL_HEIGHT; // top offset of each thumbnail div in the video div -- 0 var t; // holds the reference to the timing function that moves the thumbnail images on every mousemove event var MID_PSN_WIDTH = 40; // the vertical-width of the middle region of the video div; when mouse is in this region, the thumbnail images do not move var dirxn = new Boolean(); // by default, this declaration sets dirxn as false var prevycoord; // this global is used to determine whether the mouse has moved upwards or downwards by comparing it to posy // Array of links to videos; each link at a particular index corresponds to a thumbnail at the same index in the imgArr. var imgLinks = new Array(); imgLinks[0] = "http://video.google.com/videoplay?docid=-6423280264998854410&q=africa+dance"; imgLinks[1] = "http://www.onlinenigeria.com/"; imgLinks[2] = "http://video.google.com/videoplay?docid=-49140864284079911&q=africa+dance"; imgLinks[3] = "http://www.youtube.com/watch?v=zAaX8Uaf7Es"; imgLinks[4] = "http://video.google.com/videoplay?docid=-2784388983786530596&q=africa+dance"; imgLinks[5] = "http://video.google.com/videoplay?docid=-186443788836310627&q=africa+dance"; imgLinks[6] = "http://video.google.com/videoplay?docid=1112212990117948132&q=africa+technology"; imgLinks[7] = "http://video.google.com/videoplay?docid=5423528636032352921&q=africa+business&hl=en"; imgLinks[8] = "http://video.google.com/videoplay?docid=585535688304906850&q=pyramids+egypt&hl=en"; imgLinks[9] = "http://video.google.com/videoplay?docid=5228407423063201430&q=madagascar+education"; // Each thumbnail image will have a short comment to the right about what the image is about. var imgComments = new Array(); imgComments[0] = "Bernard Woma, master of the Dagara gyill of Ghana, performs on his traditional xylophone."; imgComments[1] = "Stream and watch free nigerian movies online. Please not that this website has a lot of popups so ensure ensure your popup blocker is enabled before clicking this link."; imgComments[2] = "African dance and acrobatic show in Mombasa Kenya. Amazing display of skill and energy by these dancers."; imgComments[3] = "Samuel Eto'o.Three time African Footballer of the year. Watch hiim in action."; imgComments[4] = "Abdoulaye Camara, a dancer/choreographer from the West African country of Guinea, teaches and performs some native dance moves."; imgComments[5] = "Young men and women of the Twana tribe of Southern Africa perform the traditional Setapa dance."; imgComments[6] = "Conversation with Dr. Philip Emeagwali, Computer Scientist and Inventor who helped give birth to the supercomputer."; imgComments[7] = "Liberian-born Harvard Business School graduate, Monique Maddy speaks about entrepreneurship in Africa."; imgComments[8] = "Tourists riding by the great pyramids of Giza."; imgComments[9] = "Education in Madagascar: Video of a reconstructed school destroyed by cyclones in 1994."; var indexArr = new Array(0, 1, 2, 3, 4); // 4 excluded -- array stores the indices of the 4 images being displayed at any one time; actually, the 4th one is always just below the third one and is out of view /* * FOR NOW:- This function controls the display and movement of thumbnails that link to videos about africa. * This function performs the preliminary operations needed before the image thumbnails are made to move. * It preloads all the image thumbnails for the various video links. It also calculates the vertical middle position * of the video div. */ function setUpMultimedia() { preloadAllImages(); // preloads images to prevent delayed displaying of the moving images var videoDiv = document.getElementById("videos"); // video div getObjMidPsn(videoDiv); // obtain mid coord psn of video div videoDiv.innerHTML = createHTMLString(); // create innerHTMl string for initial display of images in the video div // register event handlers correctly videoDiv.onmousemove = handleMouseMove; // onmousemove event videoDiv.onmouseout = handleMouseOut; // onmouseout event if (videoDiv.captureEvents) // For Netscape 4 and above { videoDiv.captureEvents(Event.MOUSEMOVE); videoDiv.captureEvents(Event.MOUSEOUT); } } // This function preloads all image thumbnails that are displayed in the multimedia section of the SAUTI homepage. function preloadAllImages() { for (var i = 0; i < imgArr.length; i++) { var img = new Image(); img.src = "../images/thumbnail_" + i + ".gif"; // image sources imgArr[i] = img; } } /* * This functions obtains the y-coord of the center of the video div. It first finds the y-coord of the * top of the video div, and add half of the height of the div to this value to obtain the y-coord of the * center of the div. Obtaining the top y-coord is a bit tricky since there is no straightforward way * of doing that for all browsers. IE/Mozilla/Firefox gives the coord of an element relative to the html * element, whereas Opera and certain other browsers give the coord relative to the immediate parent element. * For this .js file, we are concerned with the coord relative to the html document. To do that, we have a * "while(obj = obj.offsetParent)"loop that sums the offset of each parent starting from the video div till it * gets to the html document. The loop breaks after the html element because the html element has no parent and * thus returns false for "while(obj = obj.offsetParent)". */ function getObjMidPsn(obj) { var topPos = 0; videoDivMidPsn = obj.offsetHeight / 2; // we need to add this value to the top psn coord later; we cannot wait till after the if command since the obj evaluates to null at the end of the while loop. if (obj.offsetParent) { topPos = obj.offsetTop // for IE and Mozilla-type browsers that give offsets of an element relative to the entire html document while (obj = obj.offsetParent) // for Opera-type browsers that give offsets of an element relative to the containing parent element { topPos += obj.offsetTop // increase by top offset of immediate parent } } videoDivMidPsn += topPos; // videoDivMidPsn } // This function creates indices of images to be displayed or being displayed. It's values are incremented to ensure that the display of images wraps around. function changeIndices() { for(var i = 0; i < indexArr.length; i++) { if(dirxn) // to move images up { indexArr[i]++; // increase each index by 1 if(indexArr[i] > imgLinks.length-1) indexArr[i] = 0; // reset image index if it goes beyond the number of images in the links array }else // to move images down { indexArr[i]--; // decrease each index by 1 if(indexArr[i] < 0) indexArr[i] = imgLinks.length-1; // set image index to the highest index if it goes below zero } } } /* * This function creates the innerHTML string for the video div. This innerHTML is always 4 divs that * move up or down the video div element. */ function createHTMLString() { var videoDivHTML = ""; for(var i = 0; i < indexArr.length; i++) { videoDivHTML += "
"; videoDivHTML += "" + imgComments[indexArr[i]] + "
"; } return videoDivHTML; } // This function opens the video related to a thumbnail when it is clicked function openVideo(thumb) { clearTimeout(t); } /* * This function registers the mousemove event and as such serves as the true * commencement of the moving thumbnails on the main SAUTI homepage. The * thumbnails move when the mouse is over the video div and stop when the mouse is out. * This function is called from the html document by the onmouseover javascvript command * of the video div element. */ function moveThumbnails() { if(dirxn) offset--; // decrease offset if images are moving up i.e. dirxn is true else offset++; // increase offset if images are moving down i.e. dirxn is false if(((offset * -1) >= THUMBNAIL_HEIGHT*2) || (offset >= 0)) // when offset = twice the thumbnail_image_height, it means that we have move upwards 1 image; if it equals zero, the the opposite is true { changeIndices(); // changes the indices of thumbnail images to be displayed offset = -1*THUMBNAIL_HEIGHT; // reset offset } document.getElementById("videos").innerHTML = createHTMLString(); t = setTimeout("moveThumbnails()", 1); // recall function after 1ms } /* * This functions is the actual function that detects the position of the mouse over the video div and * moves the video div accordingly. The farther the mouse if from the center of the div, the faster the * images move. When the mouse is a reasonable displacement from the center, the images basically stall. * When the mouse is below the center of the div, the images move upwards. When it's above the center, * the images move downwards. One key thing to note here is that on every 1px move of the mouse, the * mousemove event is fired which may reuslt in the browser having to execute multiple events and thus * cause roughness in the movement of the images. Thus, on every mousemove event, we have to clear the * variable t, which holds the reference the immediate previous timing function that was called to move * the thumbnail images. */ function handleMouseMove(e) { clearTimeout(t); // clears the variable t, which holds a reference to the immediate previous timing event which was executed to move the thumbnail images setDirxn(e); // determines whether to move thumbnail images in the upward or downward dirxn getMouseCoordY(e); // gets the y-coord of the mouse and stores it in the global 'posy' if((posy < videoDivMidPsn - (MID_PSN_WIDTH/2)) || (posy > videoDivMidPsn + (MID_PSN_WIDTH/2))) // if mouse is in vertical-mid region of the video div, image movement should stop moveThumbnails(); // move thumbnail images after clearing the variable t; clearing the variable t prevents the browser from having to work a lot to execute this timing function for every pixel move of the mouse } // When mouse moves out of the video div function handleMouseOut(e) { //clearTimeout(t); // ~temporary --- stop moving thumbnails when mouse moves out of the video div } /* * This function slows down and stops the moving functions onmouseout for the video div element. * This function is also called from the html document by the onmouseover javascvript command * of the video div element. */ function stopThumbnails() { } /* * Handles mouse movements on the div(id="videos"). This is a good way to ensure that almost all browsers, if not all, * provide the right coordinates for the mouse position. */ function getMouseCoordY(e) { if(!e) var e = window.event; // for Microsoft-style coordinate detection if(e.pageY) // for Netscape/Firefox-type browsers posy = e.pageY; else if(e.clientY) // for Microsoft-style browsers posy = e.clientY + document.body.scrollTop + document.getElementById("videos").scrollTop; //document.getElementById("test").value = posy; // ~debugging } /* * This function determines which dirxn to move the thumbnails and sets the boolean 'dirxn' accordingly. * If 'dirxn' is true, thumbnails move upwards, otherwise, they move downwards. Each mouse y-coordinate * is compared to the immediate next mouse y-coordinate. If the next one is bigger, then it means that the * mouse was moved downwards, which translates into the thumbnail images being moved upwards. The vice * versa applies accordingly. */ function setDirxn(e) { if(!e) var e = window.event; // for IE-style browsers if(e.pageY) prevycoord = e.pageY; // set the prevycoord value for Mozilla/Firefox-style browsers else if(e.clientY) // set the prevycoord value for IE-style browsers; quite annoying { prevycoord = e.clientY + document.body.scrollTop + document.getElementById("videos").scrollTop; } if((prevycoord != null) && (posy != null)) // if variables to be compared are not null; these variables are not initialized after declaration and thus will be null for the first case of comparison, thus the need to check for this { if(e.pageY) // for Mozilla/Firefox-style browsers { if(e.pageY > posy) dirxn = true; // comparison shows that mouse moved down, thus dirxn should be true so that images move down else if(e.pageY < posy) dirxn = false; // the opposite occurs here; this means that if the mouse moves horizontally without a change in the vertical psn, then whatever movement, whether up or down keeps running } else if(e.clientY) // for IE-style browsers; again, quite annoying { var ycoord = e.clientY + document.body.scrollTop + document.getElementById("videos").scrollTop; if(ycoord > posy) dirxn = true; // comparison shows that mouse moved down, thus dirxn should be true so that images move down else if(ycoord < posy) dirxn = false; // the opposite occurs here; this means that if the mouse moves horizontally without a change in the vertical psn, then whatever movement, whether up or down keeps running } } } //window.addEventListener("load", setUpMultimedia, false); we could have used this, but IE does not understand this, hmmm.