Promo = function () {
    this.init();
}

Promo.Events = {
    NEXT: 'next',
    PREV: 'previous',
    START: 'start',
    STOP: 'stop'
}

Promo.Constants = {
    AUTO: 7,
    DELAY: 3500,
    FADE: 500
}

jQuery.extend(Promo.prototype, {

    init: function () {
        var self = this;
        $(".demo-group").hide();
      
        $(".demo-group").eq(0).show();
        $(".demo-group").eq(1).show();
        
        $('#demo-1 .demo-img').css({left: '300px', top: '95px', zIndex: '50'});
        $('#demo-1 STRONG').hide();
        $('#demo-1 IMG').css({width: '280px', opacity: "0.5" });
       
        self.totalSlides = $(".demo-group").length;

        self.currentSlidePos = 0;
        self.start = 0;
        self.auto = Promo.Constants.AUTO;
        self.delay = Promo.Constants.DELAY;
        self.fade = Promo.Constants.FADE;
        
        self.stopped = false;
        
        this.wireEventHandlers();
        

        
        self.startTimer();
        
    },
    
    wireEventHandlers: function () {
        var self = this;
        
        $(document).bind(Promo.Events.NEXT, function (e, data) {
            
            if ((self.currentSlidePos) == self.totalSlides) {
                    self.currentSlidePos = 0;
                self.changeSlide(1);
           self.currentSlidePos++;
                
            }
            else if ((self.currentSlidePos + 1) <= self.totalSlides) {
                self.changeSlide(self.currentSlidePos + 1);
                self.currentSlidePos++;
            }
            
            self.startTimer();
        });        
        $(document).bind(Promo.Events.PREV, function (e, data) {
            if (self.currentSlidePos > 0) {
                self.changeSlide(self.currentSlidePos - 1);
                self.currentSlidePos--;
            }
            if (data != Promo.Constants.AUTO) {
                clearTimeout(self.t)
            }
        });
        $(document).bind(Promo.Events.START, function () {
            self.startTimer();
        });
        $(document).bind(Promo.Events.STOP, function () {
            self.stopTimer();
        });
    },

    
    changeSlide: function (slidePos) {
        var self = this; 
        

        
         
        
        if (slidePos == self.totalSlides) {
                    $('#demo-' + (parseFloat(self.currentSlidePos)) + ' IMG').delay(self.delay).animate({ opacity: 0 });  
                    $('#demo-' + (parseFloat(self.currentSlidePos)) + ' STRONG').delay(self.delay).fadeOut(self.fade);
                    
              $('#demo-0 .demo-img').delay(self.delay + self.fade).animate({
                    left: '0',
                    top: '45px'
                  }, 500, function() {                     
                            $('#demo-1 .demo-img').css({left: '300px', top: '95px', zIndex: '50'});
                            $('#demo-1 STRONG').hide();
                            $('#demo-1 IMG').css({width: '280px', opacity: 0 }).animate({ opacity: 0.5 });
                            $('#demo-1').show("fast");
                            $('#demo-0 .demo-img').css({zIndex: '100'});
                  });
                  
                  $('#demo-0 IMG').delay(self.delay).animate({ width: '350px', opacity: 1 });
                  $('#demo-0 STRONG').delay(self.delay + 500).fadeIn(self.fade);
                 
                  
        } else {
            
            $('#demo-' + (parseFloat(self.currentSlidePos)) + ' IMG').delay(self.delay).animate({ opacity: 0 });  
            $('#demo-' + (parseFloat(self.currentSlidePos)) + ' STRONG').delay(self.delay).fadeOut(self.fade);
               
        $('#demo-' + (parseFloat(slidePos)) + ' .demo-img').delay(self.delay + self.fade).animate({
            left: '0',
            top: '45px'
          }, 500, function() {
               
               if ((slidePos + 1) == self.totalSlides) {
          
                   $('#demo-0 .demo-img').css({left: '300px', top: '95px', zIndex: '50'});
                   $('#demo-0 STRONG').hide();
                   $('#demo-0 IMG').css({width: '280px', opacity: 0 }).animate({ opacity: 0.5 });
                   $('#demo-0').show("fast");
                 
               } 
               else {
       
                   $('#demo-' + (parseFloat(slidePos + 1)) + ' .demo-img').css({left: '300px', top: '95px', zIndex: '50'});
                   $('#demo-' + (parseFloat(slidePos + 1)) + ' STRONG').hide();
                   $('#demo-' + (parseFloat(slidePos + 1)) + ' IMG').css({width: '280px', opacity: 0 }).animate({ opacity: 0.5 });
                   $('#demo-' + (parseFloat(slidePos + 1))).show("fast");  
                   $('#demo-' + (parseFloat(self.currentSlidePos)) + ' IMG').delay(100).animate({ opacity: 1 });
                   $('#demo-' + (parseFloat(self.currentSlidePos)) + ' .demo-img').css({zIndex: '100'});
               }

          });
          
           $('#demo-' + (parseFloat(slidePos)) + ' IMG').delay(self.delay).animate({ width: '350px', opacity: 1 });
           $('#demo-' + (parseFloat(slidePos)) + ' STRONG').delay(self.delay + 500).fadeIn(self.fade);
        }
          
       
    
        
    },
    
    startTimer: function () {
        var self = this;
        if (!self.stopped) {
            var next = function () {
                $(document).trigger(Promo.Events.NEXT, [Promo.Constants.AUTO]);
            }
            self.t = setTimeout(next, self.auto*1000);
        }
    },
    stopTimer: function () {
        var self = this;
        if (!self.stopped) {
            clearTimeout(self.t);
        }
    }
    
});


jQuery(document).ready(function() {
    var promo = new Promo();
});