/**
 * Slideshow. Works in all major browsers.
 * (Tested in IE, Firefox, Safari, Opera)
 *
 * Version:  1.0 - July, 2006
 * Author:   Edward Akerboom
 * Company:  Tremani, Delft
 * Website:  http://www.tremani.nl/
 */

var fade_interval    = 500;       // msecs
var slide_delay      = 5000;      // msecs
var is_fading        = false;
var slideshow_images = new Array();
var slideshow_index  = 0;
var slideshow_runs   = true;

// detect browser
// based on: http://www.quirksmode.org/js/detect.html
var ie      = false;
var mozilla = false;
var safari  = false;
var opera   = false;

if (isBrowser('safari'))           safari  = true;
else if (isBrowser('opera'))       opera   = true;
else if (isBrowser('msie'))        ie      = true;
else if (!isBrowser('compatible')) mozilla = true;

function cycleImages(element, first, second) {
	var current = element.getAttribute("src");
	
	if (current.indexOf(first)>-1) {
		element.setAttribute("src", second);
	} else {
		element.setAttribute("src", first);
	}
}

function isBrowser(string) {
        useragent = navigator.userAgent.toLowerCase();
	place = useragent.indexOf(string) + 1;
	return place;
}

function setOpacity(elementID, opacity) {
        // adopted from DOJO toolkit, http://dojotoolkit.org/
        var element = document.getElementById(elementID);
        
	if(ie){
		element.style.filter = "Alpha(Opacity="+opacity*100+")";
	}else if(mozilla){
		element.style.opacity = opacity;
		element.style.MozOpacity = opacity;
	}else if(safari){
		element.style.opacity = opacity;
		element.style.KhtmlOpacity = opacity;
	}else{
		element.style.opacity = opacity;
	}
}

function endFade() {
        // Make sure the image on top ('image1') is the one that is visible to the user
        var image1 = document.getElementById("mediaplayer_image_1");
        var image2 = document.getElementById("mediaplayer_image_2");
        
        // make image1 identical to image2
        image1.setAttribute("src", image2.getAttribute("src"));
        
        // un-hide image1
        setOpacity(image1.getAttribute("id"), 1);
        
        // idem for the descriptions
        var description1 = document.getElementById("mediaplayer_description_1");
        var description2 = document.getElementById("mediaplayer_description_2");
        description1.innerHTML = description2.innerHTML;
        setOpacity(description1.getAttribute("id"), 1);

        // indicate that the fade is no longer in progress
        is_fading=false
}

function fade(element) {
        // The fade is obtained by scheduling a number of setOpacity() calls.
        // These eventually make the image on top (image1) invisible, thus showing only image2.
        var steps    = 20;
        var interval = fade_interval;
        
        // check if a fade is in progress
        if (is_fading) {
                // yes - reschedule this call after the one that is currently in progress
                // this is done to prevent 'flickering'
                if (typeof(element)=="string") {
                        id = element;
                } else {
                        id = element.getAttribute("id");
                }
                
                window.setTimeout("fade('" + id + "')", interval / 4);
                return; // wait ...
        }

        // the fade is now in progress
        is_fading = true;
        
        // grab the element that initiated the fade
        if (typeof(element)=="string") {
                // we have been provided with the ID of an element
                // grab the accompanying element
                element = document.getElementById(element);
        }
        
        // initialize the image that is to be shown
        var image_src = element.getAttribute("href");
        var image = document.getElementById("mediaplayer_image_2");
        image.setAttribute("src", image_src);
        
        // initialize the description that is to be shown
        var description_src = element.nextSibling;
        while (description_src && description_src.nodeName == "#text") {
                description_src = description_src.nextSibling;
        }
        if (description_src.tagName=="DIV") {
                description_src = description_src.innerHTML;
        } else {
                description_src = "";
        }
        
        var description = document.getElementById("mediaplayer_description_2");
        description.innerHTML = description_src;
        
        // highlight thumbnail of current image
        highlightCurrent();
        
        // fade the image that is currently shown, so that the image that is below is eventually shown
        for (var i=0; i<=steps; i++) {
                var opacity = 1 - (1 / steps) * i;
                var delay   = (interval / steps) * i;
                window.setTimeout("setOpacity('mediaplayer_image_1', " + opacity + ");", delay);
                window.setTimeout("setOpacity('mediaplayer_description_1', " + opacity + ");", delay);
        }
        
        // make sure the image that is shown is on top - after the fade
        id = element.getAttribute("id");
        delay   = (interval / steps) * (i+1);
        window.setTimeout("endFade();", delay);
}

function nextSlide() {
       // displays the next slide
       if ((slideshow_index + 1) < slideshow_images.length) {
                // there are slides remaining
                slideshow_index++;
        } else {
                slideshow_index = 0;
        }
        
        fade(slideshow_images[slideshow_index]);
}

function previousSlide() {
       // displays the previous slide
        if ((slideshow_index - 1) >= 0) {
                // there are slides remaining
                slideshow_index--;
        } else {
                slideshow_index = slideshow_images.length - 1;
        }
        
        fade(slideshow_images[slideshow_index]);
}

function pauseResumeSlideshow() {
        // if the slideshow if running, pause it
        // if the slideshow is pausing, resume it
        slideshow_runs = !slideshow_runs;
}

function highlightCurrent() {
        // highlight the currently displayed image
        for (var i=0; i<slideshow_images.length; i++) {
                var image = slideshow_images[i];
                
                if (i==slideshow_index) {
                        image.className = "mediaplayer current";
                } else {
                        image.className = "mediaplayer";
                }
        }
}

function onClick(event) {
        // this function is attached to the onclick handler of the images that are displayed
        if (!event) {
                var event = window.event;
        }
        
        // obtain element that was clicked
        if (event.target) {
                var element = event.target;
        } else if (event.srcElement) {
                var element = event.srcElement;
        }
        
        if (element.nodeType == 3) {
                // defeat Safari bug
                element = element.parentNode;
        }
        
        // obtain 'A' element
        if (element.tagName!="A") {
                element = element.parentNode;
        }
        
        // cancel further event processing
        event.cancelBubble = true;
        if (event.stopPropagation) {
                event.stopPropagation();
        }
        
        // fade that image
        fade(element);
        
        // obtain the index of that image, and update the fade_index accordingly
        var index = element.getAttribute("name");
        slideshow_index = parseInt(index);
        
        // highlight the currently selected image
        highlightCurrent();
        
        // 'return false' to make sure the user does not navigate
        return false;
}

function slideTicker() {
        // display the next slide, if the slideshow is running
        if (slideshow_runs) {
                nextSlide();
        }

        // schedule a next 'tick'
        window.setTimeout("slideTicker()", slide_delay * slideshow_images.length);
}

function startSlideshow() {
        // Starts a slideshow, displaying the images linked to in the block-level-element with id "media"
        var element = document.getElementById("media");

        // Initialize slideshow variables
        slideshow_index  = -1;
        slideshow_runs   = true;
        
        // Get all 'A'-tags that are children of the provided element
        tmp_slideshow_images = element.getElementsByTagName("A");

        // Process each obtained 'A'-tag
        var index = 0;
        for (var i=0; i<tmp_slideshow_images.length; i++) {
                var image = tmp_slideshow_images[i];
                
                if (image.className=='mediaplayer') {
                        // This link refers to an image that needs to be displayed
                
                        // Give this tag an 'onclick' event
                        image.onclick = onClick;
                        if (image.captureEvents) {
                                image.captureEvents(Event.CLICK);
                        }
                           
                        // Give this tag a unique id (a requirement of the 'fade' function)
                        image.setAttribute("id", "slideshow_image_" + index);
                        
                        // store the imagenumber in the 'name' field
                        image.setAttribute("name", "" + index);
                        
                        // Schedule a 'slideTicker()' event at the proper time
                        window.setTimeout("slideTicker()", slide_delay * (index + 1));
                        
                        // add this image to the list of images in our slideshow
                        slideshow_images[index] = image;
                        
                        // increase index
                        index++;
                }
        }

        // show first slide        
        nextSlide();
}