var $$ = $.fn;

$$.extend({
    SlideShowElement : null,
    SlideControlElements : null,
    SlideElements : null,

    SplitID : function() {
        return this.attr('id').split('-').pop();
    },

    Slideshow : {
        Defaults : function(options) {
           if(options.slideshow) {
               this.SlideShowElement = options.slideshow;
           } else {
               this.SlideShowElement = options;
           }

           this.SlideControl = this.SlideShowElement.find(".Controls");
           this.SlideElements = this.SlideShowElement.find(".Slides .Slide");
           this.ControlLeft = this.SlideShowElement.find(".controlLeft");
           this.ControlRight = this.SlideShowElement.find(".controlRight");

           if(options.controls) {
               this.SlideControl = options.controls;
           }
           if(options.slides) {
               this.SlideElements = options.slides;
           }
           if(options.controlLeft) {
               this.ControlLeft = options.controlLeft;
           }
           if(options.controlRight) {
               this.ControlRight = options.controlRight;
           }

           this.SlideControlElements = this.SlideControl.children();
           this.TotalSlides = this.SlideElements.length - 1;

           this.Counter = 0;
           this.Interrupted = false;
       },
        Ready : function(options) {
            this.Defaults(options);

            this.SlideControlElements.each(function(){
                $(this).hover(function() {
                    $(this).addClass('SlideOn');
                }, function() {
                    $(this).removeClass('SlideOn');
                })

                .click(function() {
                    $$.Slideshow.Interrupted = true;

                    $$.Slideshow.SlideElements.hide();
                    $$.Slideshow.SlideControlElements.removeClass('SlideActive');

                    // Which control is it? 
                    var id = $$.Slideshow.SlideControlElements.index($(this));
                    // Show the Slide that matches the Control position
                    $$.Slideshow.SlideElements.eq(id).show();

                    $(this).addClass('SlideActive');
                })
            });

            showhide = function(id) {
                $$.Slideshow.SlideControlElements.removeClass('SlideActive');
                $$.Slideshow.SlideControlElements.eq(id).addClass('SlideActive');

                $$.Slideshow.SlideElements.eq(id).fadeIn('slow', function(){
                    // This works well except when wrapping around 
                    // There is some flicker due to the z-height of elements 
                    // at sibling level: later elements are "on top" so fades
                    // don't always layer the way we want.
                    $$.Slideshow.SlideElements.eq(id).siblings().fadeOut('fast');
                });
            };

            this.ControlLeft.click(function(){
                $$.Slideshow.Interrupted = true;

                $$.Slideshow.Counter--;

                var id = $$.Slideshow.Counter - 1;
                if(id < 0) {
                    id = $$.Slideshow.TotalSlides;
                    $$.Slideshow.Counter = $$.Slideshow.TotalSlides + 1;
                }

                showhide(id);
            });

            this.ControlRight.click(function(){
                $$.Slideshow.Interrupted = true;

                var id = $$.Slideshow.Counter;
                if(id > $$.Slideshow.TotalSlides) {
                    id = 0;
                    $$.Slideshow.Counter = 0;
                }

                showhide(id);

                $$.Slideshow.Counter++;
            });

            this.Transition();
        },

        Transition : function(){
             if (this.Interrupted) {
                 return;
             }

             this.Last = this.Counter - 1;

             if (this.Last < 0) {
                 this.Last = this.TotalSlides;
             }

             this.SlideControlElements.eq($$.Slideshow.Counter).addClass('SlideActive');
             this.SlideControlElements.eq($$.Slideshow.Last).removeClass('SlideActive');

             this.SlideElements.eq($$.Slideshow.Counter).fadeIn('slow');

             if (this.SlideElements.length == 1) {
                 this.Interrupted = true;
                 return;
             }

             this.SlideElements.eq(this.Last).fadeOut('fast', function(){
                 $$.Slideshow.Counter++;

                 if ($$.Slideshow.Counter > $$.Slideshow.TotalSlides) {
                     $$.Slideshow.Counter = 0;
                 }

                 setTimeout('$$.Slideshow.Transition();', 7000);
             });
         }
    }
});


// In general, this should go in the <body>
$(function() {
    // Do this if you use all default classnames
    $$.Slideshow.Ready($("#Slideshow"));

    // Do this if you need to use custom-named elements
    //$$.Slideshow.Ready({
       // slideshow: $("#Slideshow"),
       // controlLeft: $("#SlideLeft"),
       // controlRight: $("#SlideRight"),
   // });
});