Function.prototype.setScope = function(scope) {
  var method = this;
  var arg = [];
  for(var i = 1; i<arguments.length; i++) arg.push(arguments[i]);  
  funct = function() {
    return method.apply(scope, arg);
  };
  return funct;
}

SliderBox = function(boxId, delayLength) {
    this.init(boxId, delayLength);
}
$.extend(SliderBox.prototype, {
    panelIndexSel: 0,
    numPanels: 0,
    panelWidth: 0,
    boxId: '',
    init: function(boxId, delayLength) {
        this.boxId = boxId;
        var $slide1 = $("#" + boxId + " .slide:first-child");

        this.panelWidth = $slide1.css("width");
        var panelPaddingLeft = $slide1.css("paddingLeft");
        var panelPaddingRight = $slide1.css("paddingRight");

        this.panelWidth = parseFloat(this.panelWidth, 10);
        panelPaddingLeft = parseFloat(panelPaddingLeft, 10);
        panelPaddingRight = parseFloat(panelPaddingRight, 10);

        this.panelWidth = this.panelWidth + panelPaddingLeft + panelPaddingRight;
        this.numPanels = $("#" + boxId + " .slide").length;
        var totalMoverwidth = this.numPanels * this.panelWidth;

        $("#" + boxId + " #mover").css("width", totalMoverwidth);
        $("#" + boxId).append('<a href="#" id="slider-stopper">Stop</a>');

		var _this = this;

		$(".slide h1").each(
			function(index) { 
				var count = $(".btnPager").length;
				var btn = $('<a href="#" class="btnPager"><span>Box</span></a>');
				$("#slider").append(btn);
				btn.attr("id", "btnPage" + count);
				btn.css("left", (index * 11) + 10)
				btn.attr("title", $(this).text());	
				
				btn.click(function(){
					_this.setSlide(index);
				});				
				
				if(count == 0)
					btn.addClass('Sel');
		});

        $("#" + this.boxId + " #slider-stopper").click(function() {
            if ($(this).text() == "Stop") {
                clearInterval(sliderIntervalID);
                $(this).text("Start");
            }
            else {
                sliderIntervalID = setInterval(_this.doMove.setScope(_this, true), delayLength);
                $(this).text("Stop");
            }
        });
        sliderIntervalID = setInterval(this.doMove.setScope(this, true), delayLength);
    },
    doMove: function(autoIncrement) {
        if(autoIncrement)
        	this.panelIndexSel++;
        	
        if (this.panelIndexSel == this.numPanels)
            this.panelIndexSel = 0;
		
		var movement = - this.panelIndexSel * this.panelWidth;
		var _this = this;

		$("#" + _this.boxId + " img").animate({
			"top": -200
		}, function() {
			$("#" + _this.boxId + " #mover").animate({
				"left": movement
			}, function() {
				$("#" + _this.boxId + " .btnPager").removeClass('Sel');
				$("#" + _this.boxId + " #btnPage" + _this.panelIndexSel).addClass('Sel');				
								
				$(".slide img").animate({
					"top": 10
				});
			});
		});	
        
		$("#" + this.boxId + " .btnPager").removeClass('Sel');
        $("#" + this.boxId + " #btnPage" + this.panelIndexSel).addClass('Sel');
    },
    setSlide: function(boxIndex) {
    	clearInterval(sliderIntervalID);
    	$("#" + this.boxId + " #slider-stopper").text("Start");
    	
    	this.panelIndexSel = boxIndex;
   		this.doMove.call(this, false);
        
		$("#" + this.boxId + " .btnPager").removeClass('Sel');
		$("#" + this.boxId + " #btnPage" + boxIndex).addClass('Sel');
    }
});

$(document).ready(
    function() {
        var objSlide = new SliderBox('slider', 6000);
    }
)