function Fade(element, opacity, time) {
    
    this.e = element;
    this.opacity = opacity;
    this.timer;
    this.deltao;
    if(this.e.style.opacity) {
        this.deltao = opacity - parseFloat(this.e.style.opacity);
    } else {
        this.deltao = 1.0 - opacity;
    }
    this.counter = 0;
    this.countto = Math.ceil(time*50);
    this.deltao = this.deltao / this.countto;
    this.e.animating = true;
    this.timer = setInterval( function(o) { return function() {
                                               o.e.style.opacity = (parseFloat(o.e.style.opacity) + o.deltao).toString();
                                               o.e.style.filter = "alpha(opacity=" + (parseFloat(o.e.style.opacity)*100).toString() + ")";
                                               o.counter++;
                                              
                                               if(o.counter == o.countto) { 
                                                    o.Stop(); 
                                                    o.e.style.opacity = o.opacity.toString();
                                                    o.e.style.filter = "alpha(opacity=" + (parseFloat(o.e.style.opacity)*100).toString() + ")";
                                               }
                                           }; }(this), 20);
}

Fade.prototype.Stop = function() {
    clearInterval(this.timer);
    this.e.animating = false;
}

function Wipe(element, time, p) {
    this.e = element;
    this.timer;
    this.counter = 0;
    this.countto = Math.ceil(time*50);
    this.delta = this.e.offsetWidth / (50*time);
    this.currentDelta = 0;
    this.e.animating = true;
    this.parent = p;
    
    this.timer = setInterval( function(o) { return function() {
                                                       o.currentDelta += o.delta;
                                                       o.e.style.clip = "rect(auto auto auto " + o.currentDelta + "px)";
                                                       o.counter++;       
                                                       if(o.counter == o.countto) {
                                                            o.Stop(); 
                                                            o.parent.next();
                                                        }
                                                   };
                                           }(this), 20);
}

Wipe.prototype.Stop = function() {
    clearInterval(this.timer);
    this.e.animating = false;
    this.e.style.clip = "rect(auto auto auto auto)";
}

function BoxChanger() {

    this.BoxHolder = document.getElementById("boxes");
	
	/*************************************************
	 Need to fix the need for this... quick fix
	 ************************************************/
	//this.BoxHolder.style.height = "204px";
    /************************************************/
	
    this.Boxes = this.BoxHolder.getElementsByTagName("DIV");
	
	if (this.Boxes.length > 1) {
		
		this.currentBox = 0;
		this.period = 8000;
		this.playing = true;
		this.timer;
		
		(new Image()).src = "images/boxchanger/play_b_b.png";
		(new Image()).src = "images/boxchanger/back_b_b.png";
		(new Image()).src = "images/boxchanger/next_b_b.png";
		
		for(var i = 0; i < this.Boxes.length; i++) {
			this.Boxes[i].style.position = "absolute";
			this.Boxes[i].style.top = "0";
			this.Boxes[i].style.left = "0";
			this.Boxes[i].style.zIndex = (this.Boxes.length - i).toString();
			this.Boxes[i].style.margin = "0";
			
		} 
		
		
	   
		this.ControlList = document.createElement("ul");
		this.BoxHolder.onmouseover = function(o) { return function() { 
													   if(o.ControlList.animating == true) {
														   o.ControlList.animation.Stop();
														   o.ControlList.animation = 0;
													   }
													   o.ControlList.animation = new Fade(o.ControlList, 1, .125);
													 } 
												   }(this);
		this.BoxHolder.onmouseout = function(o) { return function() { 
													   if(o.ControlList.animating == true) {
														   o.ControlList.animation.Stop();
														   o.ControlList.animation = 0;
													   }
													   o.ControlList.animation = new Fade(o.ControlList, .10, .125);
													 } 
												   }(this);
		this.ControlList.id = "ControlList";
		this.ControlNumbers = new Array();
		this.ControlList.style.filter = "alpha(opacity=10)";
		this.ControlList.style.opacity=".10";
		/*for(var i = 0; i < this.Boxes.length; i++) {
			this.ControlNumbers[i] = document.createElement("li");
			
			var img = document.createElement("img");
			if(i == 0) {
				img.src = "images/boxchanger/" + (i+1) + "_b_b.png";
				(new Image()).src = "images/boxchanger/" + (i+1) + "_b_g.png"; 
			} else {
				img.src = "images/boxchanger/" + (i+1) + "_b_g.png";
				(new Image()).src = "images/boxchanger/" + (i+1) + "_b_b.png"; 
			}
			
			this.ControlNumbers[i].appendChild(img);
			this.ControlNumbers[i].onclick = function(o, ci) { return function() { o.changeTo(ci); if(o.playing) { o.pauseplay(); } } }(this, i);
			this.ControlNumbers[i].onmouseover = function(o, ci) { return function() {   
													o.ControlNumbers[ci].getElementsByTagName("IMG")[0].src = "images/boxchanger/" + (ci+1) + "_b_b.png";
													o.ControlNumbers[ci].style.cursor = "pointer";
												 }
										}(this, i);
			this.ControlNumbers[i].onmouseout = function(o, ci) { return function() {
													if(ci != o.currentBox) 
														o.ControlNumbers[ci].getElementsByTagName("IMG")[0].src = "images/boxchanger/" + (ci+1) + "_b_g.png";
													o.ControlNumbers[ci].style.cursor = "default";
												 }
										}(this, i);                            
			this.ControlList.appendChild(this.ControlNumbers[i]);
		}*/
		
		this.BackButton = document.createElement("li");
			
				this.BackButtonImg = document.createElement("img");
					this.BackButtonImg.src = "images/boxchanger/back_b_g.png";
				this.BackButton.appendChild(this.BackButtonImg);
				this.BackButton.onclick = function(o) { return function() { if (o.Boxes[o.currentBox].animating) { o.Boxes[o.currentBox].animation.Stop(); }  o.prev(); } }(this);
				this.BackButton.onmouseover = function(o) { return function() { 
																o.BackButtonImg.src = "images/boxchanger/back_b_b.png";
																o.BackButton.style.cursor = "pointer";
																} }(this);
				this.BackButton.onmouseout = function(o) { return function() { 
																o.BackButtonImg.src = "images/boxchanger/back_b_g.png";
																o.BackButton.style.cursor = "default";
																} }(this);
			
		this.ControlList.appendChild(this.BackButton);
		
		this.PausePlayButton = document.createElement("li");
			
				this.PausePlayButtonImg = document.createElement("img");
					this.PausePlayButtonImg.src = "images/boxchanger/pause_b_g.png";
				this.PausePlayButton.appendChild(this.PausePlayButtonImg);
				this.PausePlayButton.onclick = function(o) { return function() { o.pauseplay(); } }(this);
				this.PausePlayButton.onmouseover = function(o) { return function() { 
									o.PausePlayButton.style.cursor = "pointer";
									if (o.playing) 
										o.PausePlayButtonImg.src = "images/boxchanger/pause_b_b.png";
									else 
										o.PausePlayButtonImg.src = "images/boxchanger/play_b_b.png";
									} }(this);
				this.PausePlayButton.onmouseout = function(o) { return function() { 
									o.PausePlayButton.style.cursor = "default";
									if (o.playing) 
										o.PausePlayButtonImg.src = "images/boxchanger/pause_b_g.png";
									else 
										o.PausePlayButtonImg.src = "images/boxchanger/play_b_g.png";
									} }(this);
		   
		this.ControlList.appendChild(this.PausePlayButton);
		
		this.ForwardButton = document.createElement("li");
			
				this.ForwardButtonImg = document.createElement("img");
					this.ForwardButtonImg.src = "images/boxchanger/next_b_g.png";
				this.ForwardButton.appendChild(this.ForwardButtonImg);
				this.ForwardButton.onclick = function(o) { return function() { if (o.Boxes[o.currentBox].animating) { o.Boxes[o.currentBox].animation.Stop(); } o.next(); } }(this);
				this.ForwardButton.onmouseover = function(o) { return function() { 
																o.ForwardButton.style.cursor = "pointer";
																o.ForwardButtonImg.src = "images/boxchanger/next_b_b.png";
																} }(this);
				this.ForwardButton.onmouseout = function(o) { return function() { 
																o.ForwardButton.style.cursor = "default";    
																o.ForwardButtonImg.src = "images/boxchanger/next_b_g.png";
																} }(this);
			
		this.ControlList.appendChild(this.ForwardButton);
	   
		this.ControlList.style.zIndex = (this.Boxes.length + 5).toString();
		this.BoxHolder.appendChild(this.ControlList);
		
		this.timer = setInterval(function(o) { return function() { 
														o.Boxes[o.currentBox].animation = new Wipe(o.Boxes[o.currentBox], 1, o);
													} 
											  }(this), this.period);
	}
    
}

BoxChanger.prototype.pauseplay = function () {
    if(this.playing) { 
        clearInterval(this.timer);
        this.playing = false;
        this.PausePlayButtonImg.src = "images/boxchanger/play_b_g.png";
    } else {
        this.timer = setInterval(function(o) { return function() { o.Boxes[o.currentBox].animation = new Wipe(o.Boxes[o.currentBox], 1, o); } }(this), this.period);
        this.playing = true;
        this.PausePlayButtonImg.src = "images/boxchanger/pause_b_g.png";
    }
}

BoxChanger.prototype.changeTo = function (n) {
    if(n != this.currentBox) {
        this.Boxes[n].style.zIndex = this.Boxes.length.toString();
        
        for(var i = 0; i < n; i++) {
            this.Boxes[i].style.zIndex = (n - i).toString();
        }
               
        for(var i = n+1, c = this.Boxes.length - 1; i < this.Boxes.length; i++, c--) {
            this.Boxes[i].style.zIndex = c.toString();
        }
                
        //this.ControlNumbers[this.currentBox].getElementsByTagName("IMG")[0].src = "images/boxchanger/" + (this.currentBox+1) + "_b_g.png";
        this.currentBox = n;
        //this.ControlNumbers[this.currentBox].getElementsByTagName("IMG")[0].src = "images/boxchanger/" + (this.currentBox+1) + "_b_b.png";
          
    }
}

BoxChanger.prototype.next = function() {
    if (this.currentBox == this.Boxes.length - 1)
        this.changeTo(0);
    else
        this.changeTo(this.currentBox + 1);
}

BoxChanger.prototype.prev = function() {
    if (this.currentBox == 0)
        this.changeTo(this.Boxes.length - 1);
    else
        this.changeTo(this.currentBox - 1);
}