/*
#####################################
# 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
# 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. 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

#####################################
# Future Plans
#####################################
- More effects
*/
function init_slideshow()
{
    //make sure we have at least two images
    if(jQuery.slide_show.images.length < 2) return;
    
    //preload all the images
    for(var item in jQuery.slide_show.images)
    {
        var preFetchImg = document.createElement('img');
        preFetchImg.src = jQuery.slide_show.images[item];
    }
    
    //create our layers
    $("#"+jQuery.slide_show.div).html("\n<div id='_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='_image1' border='0'></div></td></tr></table></div>\n<div id='_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='_image2' border='0'></div></td></tr></table></div>\n");
    
    //populate the first layer with an image
    $("#_image1").attr("src",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();
    
    //populate the second layer with an image
    $("#_image2").attr("src",jQuery.slide_show.images[++jQuery.slide_show.current_position]);
}

//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($("#_layer1").css("z-index") == "2")
        {
            $("#_layer1").css("z-index","1");
            $("#_layer2").css("z-index","2");
            jQuery.slide_show.current_layer = "_layer2";//set current layer
            jQuery.slide_show.pop_layer("_image1","_layer1");//populate the next image
        }
        else
        {
           $("#_layer1").css("z-index","2");
           $("#_layer2").css("z-index","1");
           jQuery.slide_show.current_layer = "_layer1";//set the current layer
           jQuery.slide_show.pop_layer("_image2","_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();
    
    //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
    $("#"+image).attr("src",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()
{
    //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[jQuery.slide_show.current_position]);
}

//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 == "_layer1")
    {
        //check for an a tag
        if($("#_image1").parent().attr("align") == "center")
        {
            $("#_image1").wrap("<a href='"+jQuery.slide_show.urls[jQuery.slide_show.current_position]+"'></a>");
        }
        else
        {
            $("#_image1").parent().attr("href",jQuery.slide_show.urls[jQuery.slide_show.current_position]);
        }
    }
    else
    {
        if($("#_image2").parent().attr("align") == "center")
        {
            $("#_image2").wrap("<a href='"+jQuery.slide_show.urls[jQuery.slide_show.current_position]+"'></a>");
        }
        else
        {
            $("#_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;
    }
    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();
    
    if(jQuery.slide_show.current_layer == "_layer1")
    {
        $("#_image1").attr("src",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;
        $("#_image2").attr("src",jQuery.slide_show.images[++jQuery.slide_show.current_position]);
    }
    else
    {
        $("#_image2").attr("src",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;
        $("#_image1").attr("src",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();
    
    if(jQuery.slide_show.current_layer == "_layer1")
    {
        $("#_image1").attr("src",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;
        $("#_image2").attr("src",jQuery.slide_show.images[++jQuery.slide_show.current_position]);
    }
    else
    {
        $("#_image2").attr("src",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;
        $("#_image1").attr("src",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_show: init_slideshow /*function*/
    ,start_show: start_show /*function*/
    ,pop_layer: pop_layer /*function*/
    ,pop_title: pop_title /*function*/
    ,wrap_slide: wrap_slide /*function*/
    
    ,current_position: -1 /*current position in image array*/
    ,current_layer: "_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);
            
            //set up the show
            jQuery.slide_show.init_show();
            
            //set timeout for show to start
            jQuery.slide_show.time_out = setTimeout(function(){jQuery.slide_show.start_show();},jQuery.slide_show.wait_to_start);
        }
    );
}