/*
#####################################
# Image Fade
# 12/20/06
# v.01
# v.02
# v.10 03/15/07
# v.20 03/20/07
# v.20.01 03/28/07
# v.30 04/06/07
# v.40 05/22/07
# v.40.1 05/31/07
# v.41 06/06/07
# By EJL
#####################################
*NOTE: THIS SCRIPT REQUIRES jQuery*
http://www.jquery.com

Instructions

1) Download the newest version of jQuery from www.jquery.com and include it in
   the page.
   
2) Include this script AFTER jquery.

3) Use either jquery or window.onload to detect when the page is ready. I would
   recommend jQuerys method.
   
   $(document).ready
   (
        function()
        {
            //place your code here
        }
   )
   
   This method is better because you don't have to place all the code that will
   run when the browser is ready in one spot.
   
4) You will need to set the height and width of the slide show container area. 
   You can also change the background color the images fade against
   Here are the property names and their default values
   
   table_width: 550
   table_height: 400
   table_background: 000000 //DO NOT place a # infront of the color 
   
5) Start the slideshow with this line.
   
   $("#NAME_OF_DIV_ID").slide_show(array_of_images,[time_delay_for_start],[time_delay_between_images]);
   
   Place all the images in an array and pass in the array name
   ie: 
        var images = new Array('path/image.jpg','path/image.jpg');
        $("#NAME_OF_DIV_ID").slide_show(images);
    
   You can also pass in the time delay for the show to start in milliseconds.
   So if you want it to start 5 seconds after the page loads enter 5000
   
   Same goes for time delay between images.
   
6) If you would like some copy to run along with the slide show you can pass it in with this method
   $("#NAME_OF_DIV_ID").slide_show_titles("#ID_NAME_OF_TITLE_AREA",ARRAY_OF_COPY)
   
7) If you want to wrap the slides in a url use this method
   $("#NAME_OF_DIV_ID").slide_show_urls(ARRAY_OF_URLS)
   
02/16/07
Restructured the way the images are displayed. The _layer divs have a contain
a table that is used to vertically center the image. It also has a background
color now so that smaller images will have something to fade against. Updated
the documentation 

v0.10 3/15/07
Added a previous and next method to the object. Restructured the way the start slideshow
works. Added a new method to safely access the settings for the slideshow
$("#[DIV_NAME]").setting("property","value");

Restructured the way values are returned from external methods for stop_show, and next and previous
Placed more control on the timers. Now they're cleared when the slide show is stopped

v0.20 3/20/07
I'm now using the properties passed in for the table size to properly set up the container div.
YOU MUST PASS IN THE TABLE HEIGHT AND WIDTH BEFORE STARTING THE SHOW

It can also accept copy for a slideshow title area. 

v0.20.01 3/28/07
Made a small update to the number of pictures required to start the show. It's now two. It used
to be three.

v0.30 04/06/07
Cleaned up the variables stored in jQuery.slide_show
Found a small bug when passing in urls with no titles. Needed to init the slide_div and array or it will throw an error
Removed one if depth in init_slide show.
Changed the way images are updated. Now is starts with a blank img that is populated instead of written every time.
Also added a new method.
.slide_show_urls()
Pass in an array of urls and it will wraps the slides in them

v.0.40 05/22/07
Added a image loader so I can control the size of the images shown in the slideshow
Now everything is resized for the window 
Updated the stop show method to register the request and stop when the transition has ended

v0.40.1 05/31/07
Tweaked the preloader to only load the first two images. It was taking to long for the show to start.

v0.41 06/06/07
Totally re-wrote the preloader method to work in safari. It's now a queue and works in safari
#####################################
# Future Plans
#####################################
- More effects (cross fade)
*/

function load_image(img,src)
{
    //we need to make this a queue instead of a function you feed items into
    var queue_layer = img.split(",");
    var queue_src = src.split(",");
    
    //this is the special preloader for safari
    if($.browser.safari)
    {
        //re-associate the pointer to the object in the body
        var img_large = document.getElementById('safari_preloader');
    }
    else
    {
        //create a new image obj
        var img_large = new Image;
    }
    
    img_large.onload = function()
    {
        var height = this.height;
        var width = this.width;
        
        //make sure it's not too tall
        if(height > jQuery.slide_show.table_height)
		{
            height = jQuery.slide_show.table_height;
            width *= (jQuery.slide_show.table_height/this.height);
		}
		
        //make sure the new width isn't too wide
        if(width > jQuery.slide_show.table_width)
		{
            width = jQuery.slide_show.table_width;
            height *= (jQuery.slide_show.table_width/width);
		}
        
        //place the main image on the page
        $('#'+queue_layer[0]).attr({width: width, height: height, src: this.src});
        
        //now check the queue
        //remove the first element from the array
        queue_layer.shift();
        queue_src.shift();
        
        //call the init if the first two images have loaded
        if(queue_layer.length > 0)
        {
            //load the next element
            this.src = queue_src[0];
        }
    }
    img_large.src = queue_src[0];
}


function preload_images()
{
    //preload the first two images
    
    if($.browser.safari)
    {
        /*
        we'll have to wrap the image in a div and then hide the div so it doesnt
        make the page any longer.
        */
        var img_obj = document.createElement('img');
        
        var hidden_div = document.createElement('div');
        hidden_div.style.height = 0;
        hidden_div.style.width = 0;
        hidden_div.style.overflow = "hidden";
    
        img_obj.id = "safari_preloader";
        img_obj.style.visibility = "hidden";
        
        //add the image to the div
        hidden_div.appendChild(img_obj);
        
        //add the div to the body
        document.body.appendChild(hidden_div);
        
        //re-associate the pointer to the image in the body
        img_obj = document.getElementById('safari_preloader');
    }
    else
    {
        //create a new image obj
        var img_obj = new Image;
    }
    
    //copy the first two elements into the queue
    var queue = new Array(jQuery.slide_show.images[0], jQuery.slide_show.images[1]);
    
    //set up some methods for the image obj
    img_obj.onerror = img_obj.onload;
    img_obj.onload = function()
    {
        if(jQuery.slide_show.images.length == 0) return;
    
        //remove the first element from the array
        queue.shift();
        
        //call the init if the first two images have loaded
        if(queue.length == 0)
        {
            jQuery.slide_show.init_slideshow();
        }
        else
        {
            //load the next element
            this.src = queue[0];
        }
    }
    
    //load the image
    img_obj.src = queue[0];
}

function init_slideshow()
{
    //make sure we have at least two images
    if(jQuery.slide_show.images.length < 2) return;
    
    //create our layers
    $("#"+jQuery.slide_show.div).html("\n<div id='gallery_layer1' style='position:absolute;z-index:2'><table border='0' bgcolor='#"+jQuery.slide_show.table_background+"' cellspacing='0' cellpadding='0' height='"+jQuery.slide_show.table_height+"' width='"+jQuery.slide_show.table_width+"'><tr><td align='center' valign='middle'><img id='gallery_image1' border='0'></div></td></tr></table></div>\n<div id='gallery_layer2' style='position:absolute;z-index:1;'><table border='0' bgcolor='#"+jQuery.slide_show.table_background+"' cellspacing='0' cellpadding='0' height='"+jQuery.slide_show.table_height+"' width='"+jQuery.slide_show.table_width+"'><tr><td align='center' valign='middle'><img id='gallery_image2' border='0'></div></td></tr></table></div>\n");
    
    load_image("gallery_image1,gallery_image2",jQuery.slide_show.images[++jQuery.slide_show.current_position]+","+jQuery.slide_show.images[++jQuery.slide_show.current_position]);
    
    //populate the first layer with an image
    //load_image('gallery_image1',jQuery.slide_show.images[++jQuery.slide_show.current_position]);
    
    //wrap the image in a url
    jQuery.slide_show.wrap_slide();
    
    //if there is a title populate the div
    jQuery.slide_show.pop_title(0);
    
    //populate the second layer with an image
    //load_image('gallery_image2',jQuery.slide_show.images[++jQuery.slide_show.current_position]);
    
    //set timeout for show to start
    jQuery.slide_show.time_out = setTimeout(function(){jQuery.slide_show.start_show();},jQuery.slide_show.wait_to_start);
}

//this is what does the fade
function start_show()
{
    //bail if the show is stopped
    if(jQuery.slide_show.stop_show) return;
    
    //image will start fading
    jQuery.slide_show.img_fading = true; 
    
    //fade the image. after it's done switch the layers
    $("#"+jQuery.slide_show.current_layer).fadeOut(jQuery.slide_show.fade_duration,
    function()
    {
        //change the image fading state
        jQuery.slide_show.img_fading = false;
        
        if($("#gallery_layer1").css("z-index") == "2")
        {
            $("#gallery_layer1").css("z-index","1");
            $("#gallery_layer2").css("z-index","2");
            jQuery.slide_show.current_layer = "gallery_layer2";//set current layer
            jQuery.slide_show.pop_layer("gallery_image1","gallery_layer1");//populate the next image
        }
        else
        {
           $("#gallery_layer1").css("z-index","2");
           $("#gallery_layer2").css("z-index","1");
           jQuery.slide_show.current_layer = "gallery_layer1";//set the current layer
           jQuery.slide_show.pop_layer("gallery_image2","gallery_layer2");//populate the one behind it
        }
        
        //bail if the slideshow has stopped
        if(jQuery.slide_show.stop_show) return;
        
        //set timeout for show to start
        jQuery.slide_show.time_out = setTimeout(function(){jQuery.slide_show.start_show();},jQuery.slide_show.wait_to_start);
    });
}

//populate the next layer with an image
function pop_layer(image,layer)
{
    //if there is a title populate the div
    jQuery.slide_show.pop_title(jQuery.slide_show.current_position);
    
    //wrap the image in a url
    jQuery.slide_show.wrap_slide();
    
    //set the images to start from the beginning once it reaches the end
    if((jQuery.slide_show.current_position+1) == jQuery.slide_show.images.length) jQuery.slide_show.current_position = -1;
    
    //populate the layer behind it with the next images
    load_image(image,jQuery.slide_show.images[++jQuery.slide_show.current_position]);
    
    //turn the layer back on
    $("#"+layer).fadeIn(0);
}

//this is used to populate the title area
function pop_title(index)
{
    //check to see if there are any titles 
    if(jQuery.slide_show.slide_show_titles.length == 0) return;
    
    $("#"+jQuery.slide_show.slide_show_titles_div).html(jQuery.slide_show.slide_show_titles[index]);
}

//this is used to wrap the current slide in a url if one exists
function wrap_slide()
{
    //check to see if there are any urls
    if(jQuery.slide_show.urls.length == 0) return;
    
    //wrap the current slide with the stated url
    if(jQuery.slide_show.current_layer == "gallery_layer1")
    {
        //check for an a tag
        if($("#gallery_image1").parent().is("td"))
        {
            $("#gallery_image1").wrap("<a href='"+jQuery.slide_show.urls[jQuery.slide_show.current_position]+"'></a>");
        }
        else
        {
            $("#gallery_image1").parent().attr("href",jQuery.slide_show.urls[jQuery.slide_show.current_position]);
        }
    }
    else
    {
        if($("#gallery_image2").parent().is("td"))
        {
            $("#gallery_image2").wrap("<a href='"+jQuery.slide_show.urls[jQuery.slide_show.current_position]+"'></a>");
        }
        else
        {
            $("#gallery_image2").parent().attr("href",jQuery.slide_show.urls[jQuery.slide_show.current_position]);   
        }
    }
}

//this will be used to stop the show
jQuery.fn.stop_show = function()
{
    //if you can stop the show, do so then return true
    if(jQuery.fn.is_stopped())
    {
        //stop any timer that's in the system
        clearTimeout(jQuery.slide_show.time_out);
        jQuery.slide_show.stop_show = true;
        return true;
    }
    
    //since it didn't stop we want to register the stop and kill it when the transition is done
    jQuery.slide_show.stop_show = true;
    
    return false;
}

//this is used to start the show up again
jQuery.fn.start_show = function()
{
    jQuery.slide_show.stop_show = false;
    jQuery.slide_show.start_show();
}

//use this to detect if the show has stopped or is still playing
jQuery.fn.is_stopped = function()
{
    //if the image is fading(true) then the show is in motion. otherwise it can be stopped
    return jQuery.slide_show.img_fading ? false : true;
}

//this will foward to the next slide
jQuery.fn.next_slide = function()
{
    //if its currently fading bail
    if(!jQuery.fn.stop_show()) return false;
    
    //if there is a title populate the div
    jQuery.slide_show.pop_title(jQuery.slide_show.current_position);
    
    if(jQuery.slide_show.current_layer == "gallery_layer1")
    {
        load_image('gallery_image1',jQuery.slide_show.images[jQuery.slide_show.current_position]);
        
        //wrap the image in a url
        jQuery.slide_show.wrap_slide();
        
        //if we're at the end wrap to the beginning
        if((jQuery.slide_show.current_position+1) == jQuery.slide_show.images.length) jQuery.slide_show.current_position = -1;
        load_image('gallery_image2',jQuery.slide_show.images[++jQuery.slide_show.current_position]);
    }
    else
    {
        load_image('gallery_image2',jQuery.slide_show.images[jQuery.slide_show.current_position]);
        
        //wrap the image in a url
        jQuery.slide_show.wrap_slide();
        
        //if we're at the end wrap to the beginning
        if((jQuery.slide_show.current_position+1) == jQuery.slide_show.images.length) jQuery.slide_show.current_position = -1;
        load_image('gallery_image1',jQuery.slide_show.images[++jQuery.slide_show.current_position]);
    }
    
    return false;
}

//this will move to the previous slide
jQuery.fn.prev_slide = function()
{
    //if its currently fading bail
    if(!jQuery.fn.stop_show()) return false;
    
    //this is the logic for moving backwards and finding the correct current position
    jQuery.slide_show.current_position -= (jQuery.slide_show.current_position == 1 || jQuery.slide_show.current_position == 0) ? -(jQuery.slide_show.images.length - 2) : 2; 
    
    //if there is a title populate the div
    jQuery.slide_show.pop_title(jQuery.slide_show.current_position);
    
    if(jQuery.slide_show.current_layer == "gallery_layer1")
    {
        load_image('gallery_image1',jQuery.slide_show.images[jQuery.slide_show.current_position]);
        
        //wrap the image in a url
        jQuery.slide_show.wrap_slide();
        
        //if we're at the end wrap to the beginning
        if((jQuery.slide_show.current_position+1) == jQuery.slide_show.images.length) jQuery.slide_show.current_position = -1;
        load_image('gallery_image2',jQuery.slide_show.images[++jQuery.slide_show.current_position]);
    }
    else
    {
        load_image('gallery_image2',jQuery.slide_show.images[jQuery.slide_show.current_position]);
        
        //wrap the image in a url
        jQuery.slide_show.wrap_slide();
        
        //if we're at the end wrap to the beginning
        if((jQuery.slide_show.current_position+1) == jQuery.slide_show.images.length) jQuery.slide_show.current_position = -1;
        load_image('gallery_image1',jQuery.slide_show.images[++jQuery.slide_show.current_position]);
    }

    return false;
}

//this is a safe way for people to change the settings for the slideshow
jQuery.fn.setting = function(name, prop)
{
    eval("jQuery.slide_show." + name + "= '" + prop+"'");
}

//this is where we pass in any copy that might be with the slideshow
jQuery.fn.slide_show_titles = function(div,copy)
{
    jQuery.slide_show.slide_show_titles_div = div;
    jQuery.slide_show.slide_show_titles = copy;
}

//this is where we can pass in a url to wrap the image in
jQuery.fn.slide_show_urls = function(urls)
{
    jQuery.slide_show.urls = urls;
}


//stored slideshow variables
jQuery.slide_show = 
{
    init_slideshow: init_slideshow /*function*/
    ,start_show: start_show /*function*/
    ,pop_layer: pop_layer /*function*/
    ,pop_title: pop_title /*function*/
    ,wrap_slide: wrap_slide /*function*/
    ,preload_images: preload_images /*function*/
    
    ,images: new Array() /*this is where the images are stored*/
    ,current_position: -1 /*current position in image array*/
    ,current_layer: "gallery_layer1" /*the first layer we use*/
    ,img_fading: false /*states wither the images currrently fading*/
    ,stop_show: false /*states wither the show is stopped or not*/
    ,time_out:0 /*this controls the timeout*/
    
    ,slide_show_titles_div: "" /*holds the name of the div to be populated with the copy*/
    ,slide_show_titles: "" /*array of titles*/
    ,urls: "" /*array of urls*/
    ,table_width: 550 /*table width, dbls as div width*/
    ,table_height: 400 /*table height, dbls as div height*/
    ,table_background: "000000" /*table background color*/
}

jQuery.fn.slide_show = function(pictures,wait,fade)
{
    this.each
    (
        function()
        {
            //set up the proper css for the container
            $("#"+this.id).css("position","relative");
            $("#"+this.id).css("height",jQuery.slide_show.table_height+"px");
            $("#"+this.id).css("width",jQuery.slide_show.table_width+"px");
            
            //this if for IE
            if($.browser.msie)
            {
                $("#"+this.id).css("overflow","hidden");
                $("#"+this.id).css("overflow-x","hidden");
                $("#"+this.id).css("overflow-y","hidden");
            }
                                    
            jQuery.slide_show.current_position = -1;
            jQuery.slide_show.stop_show = false;
            
            jQuery.slide_show.div = this.id;
            
            jQuery.slide_show.images = pictures;
            
            jQuery.slide_show.wait_to_start = (wait ? wait : 3000);
            jQuery.slide_show.fade_duration = (fade ? fade : 5000);
            
            //preload the images. once it's done the show will start
            jQuery.slide_show.preload_images();
        }
    );
}