var next_slide = 0;
var slides = new Array();

jQuery(document).ready(function()
{
    jQuery('<div></div>')
        .addClass('slide')
        .addClass('visible')
        .addClass('index_1')
        .attr('id', 'slide_' + slides[0])
        .appendTo(jQuery('#product-image'));
    
    jQuery('#product-image').find('img').appendTo(jQuery('#product-image div.slide'));
    
    if (slides.length < 2)
    {
        return;
    }
    
    jQuery('#product-image').initialize_slideshow(slides);
});

jQuery.fn.initialize_slideshow = function(slides)
{
    var slideshow_container = jQuery(this);
    
    jQuery(this).hover(
        function()
        {
            if (   jQuery(this).hasClass('hover')
                || jQuery(this).hasClass('clicked'))
            {
            
            }
            
            jQuery(this).addClass('hover');
            jQuery('#slideshow_index').fadeIn(500);
        },
        function()
        {
            jQuery(this).removeClass('hover');
            jQuery(this).oneTime(1000, 'hover', function()
            {
                // Kill extra timers for this element
                // jQuery(this).stopTime('hover');
                
                if (jQuery(this).hasClass('hover'))
                {
                    return;
                }
                
            jQuery('#slideshow_index').fadeOut(500);
            });
        }
    );
    
    // Create the slide containers
    for (var i = 0; i < slides.length; i++)
    {
        var class_name = 'index_' + (i + 1);
        
        if (jQuery('#slide_' + slides[i]).size() === 0)
        {
            jQuery('<div></div>')
                .addClass('slide')
                .addClass(class_name)
                .attr('id', 'slide_' + slides[i])
                .css('display', 'none')
                .appendTo(jQuery(this));
        }
    }
    
    // Preload the slides
    for (var i = 0; i < slides.length; i++)
    {
        jQuery('#slide_' + slides[i]).load(
                '/imagetag/' + slides[i] + '/',
                {},
                function()
                {
                    /*
                    jQuery('<p></p>')
                        .html(jQuery(this).find('img').attr('alt'))
                        .appendTo(jQuery(this));
                    /**/
                }
            );
    }
    
    jQuery(this).everyTime(6000, 'slideshow', function()
    {
        // Mouse over, don't change the slide
        if (jQuery(this).hasClass('hover'))
        {
            // return;
        }
        
        var pack_size = jQuery(this).find('div.slide').size();
        
        jQuery(this).find('div.slide').each(function(i)
        {
            if (!jQuery(this).hasClass('visible'))
            {
                return;
            }
            
            next_slide = i + 1;
            
            jQuery('#slideshow_index a').removeClass('selected');
            
            if (next_slide == pack_size)
            {
                next_slide = 0;
            }
            
            jQuery('#slideshow_index a.index_' + (i + 2)).addClass('selected');
            
            jQuery(this).removeClass('visible').fadeOut(2000);
        });
        
        jQuery(this).find('div.slide').each(function(i)
        {
            if (i != next_slide)
            {
                return;
            }
            
            jQuery(this).addClass('visible').fadeIn(2000);
        });
    });
    
    jQuery(this).initialize_slide_indexes(slides.length);
}

jQuery.fn.initialize_slide_indexes = function(count)
{   
    jQuery('<div></div>')
        .attr('id', 'slideshow_index')
        .css('display', 'none')
        .prependTo(this);
    
    // Add top offset
//    jQuery('#slideshow_index').css('margin-top', (jQuery(this).height() + 5) + 'px');
    
    for (var i = 1; i <= count; i++)
    {
        var class_name = 'index_' + i;
        
        if (i == 1)
        {
            class_name += ' selected';
        }
        
        jQuery('<a></a>')
            .html(i)
            .addClass('index')
            .addClass(class_name)
            .click(function()
            {
                if (jQuery(this).hasClass('selected'))
                {
                    return false;
                }
                
                // Toggle the classes
                jQuery(this).parent().find('.selected').removeClass('selected');
                jQuery(this).addClass('selected');
                
                var index = jQuery(this).html();
                
                jQuery('#product-image').addClass('clicked');
                jQuery('#product-image div.slide.visible').removeClass('visible').fadeOut(500);
                jQuery('#product-image div.index_' + index).addClass('visible').fadeIn(500);
                
                jQuery('#product-image').stopTime('slideshow');
                
                return false;
            })
            .appendTo(jQuery('#slideshow_index'));
    }
}