﻿
/*========================================================================================================
Created:    3-13-2008
Modified:   3-17-2008

Author:     SlideShow class by John Bonfardeci - studiogio.com, 
            built upon the Prototype (http://www.prototypejs.org/) framework and 
            Scriptaculous (http://script.aculo.us/) library
            
Version:    1.0

Purpose:    Creates event based(onmouseover) slideshow with fade transitions (effects.js)

Parameters: Requires 2 parameters for instantiation - 
                ID of a div w/ slides (e.g. slideshow), ID of div w/ anchors (e.g menu) that have the 
                'rel' attribute set to the slide ID to recieve the effect

Browsers:   tested with Firefox 2.0, IE6, IE7, Safari
========================================================================================================*/

var SlideShow = Class.create();

SlideShow.prototype = {
    
    //initialize anchor onmouseover events and image stack
    initialize: function(slideshow, menu) { 
  
        //stack to hold slideshow div elements
        var slideStack = [];
        var divElements = $(slideshow).getElementsByTagName('div');
        
        //if class="slide" add div element to slideshow stack
        for (var i = 0; i < divElements.length; i++) {
            if (Element.hasClassName(divElements[i], 'slide')) {
                slideStack.push(divElements[i]);
            }
        }        
        //assign z-index value to each div element in the slideshow
        for (var i = 0; i < slideStack.length; i++) {
            slideStack[i].style.zIndex = slideStack.length - i;
        }         
        
        //assign onmouseover event to anchors in menu and read the rel attribute to get slide IDs   
        var anchors = $(menu).getElementsByTagName('a');        
        for(var i=0; i < anchors.length; i++)
        {
            if(anchors[i].getAttribute('rel') != null)
            {
                var anchor = anchors[i]; 
                anchor.onmouseover = function () {mySlideShow.transition(this, slideStack); return false;}
            }
        }            
    },
        
	transition: function(imageLink, stack) {
	var activeSlideId = imageLink.getAttribute('rel');//value will be: slide0, slide1, or slide2, ...
    var activeSlide = document.getElementById(activeSlideId);//the current div element
       
	//don't execute if it's already the top slide
	if(activeSlide.style.zIndex != stack.length){
	
	    activeSlide.style.display = "none";
        var currentSlide;
        
	    //rearrange z-index of bottom slides
	    for(var i=0;i<stack.length;i++)
	    {
	        if(stack[i] != activeSlide){
                if(stack[i].style.zIndex == stack.length)//if top slide (current)
                {	  
                    currentSlide = stack[i];                   
                    currentSlide.style.zIndex = stack.length - 1;//make current div 1 below active
                }
                else if(stack[i] != currentSlide){
                    //make other z-indexes immediately below z-index of current slide
                    stack[i].style.zIndex = stack.length % stack.length-i;//from -1 to stack.length
                }
            }
	    }
	    
	    activeSlide.style.zIndex = stack.length;//make active div the top one	            	    
        new Effect.Appear(activeSlide, {duration:1, from:0, to:1.0});//now apply effect
    }
    
    //test mode-----------------------------------------------------------------------------
    //var lblMsg = document.getElementById('lblMsg');
    //lblMsg.innerHTML = stack[2].getAttribute('ID') + " z-index: " + stack[2].style.zIndex + "; " + stack[1].getAttribute('ID') + " z-index: " + stack[1].style.zIndex + "; " + stack[0].getAttribute('ID') + " z-index: " + stack[0].style.zIndex;    
    //--------------------------------------------------------------------------------------
    
	}  
}
	
function initSlideShow() { mySlideShow = new SlideShow('slideshow', 'topnav'); }
Event.observe(window, 'load', initSlideShow, false);	

//================================================================================================




