/* need to rewrite setSize() */

Event.observe(window, "load", function() {var $motate = new Motate("headerrotate",window.rotatorsrc);});

var Motate = Class.create();

	Motate.prototype = {
		_name: "Motate",
		_version: "0.5a",
		
		initialize: function($parent, $sourcelist, $width, $height, $background) {
					
			var $width = 385;
			var $height = 200;

			this.$parent = $($parent);
			if (!this.$parent) {
				return false; 
			}
			this.$sources = new Array();
			this.$sources = $sourcelist.split(',');			
			this.$sourceLength = this.$sources.size();
			this.$currentSource = 0;
			this.$background = $background;
			if (!this.$background) {
				this.$background = "#ffffff";
			}
			this.$contentHeight = 0;
			this.$sizer = this.$parent.ancestors()[0];
			
			if (typeof($width)=="undefined") {
				this.$width = this.$sizer.getWidth()-1;
			} else {
				this.$width = $width;
			}

			this.$container = $($parent);

			if (typeof($height) == "undefined") {
				this.$height = this.$container.getHeight();
			} else {
				this.$height = $height;
			}
			
			this.$container.setStyle("width:"+this.$width+"px");
			this.$container.setStyle("height:"+this.$height+"px");
			this.$content1 = "<div id='motate1'></div>";
			this.$content2 = "<div id='motate2'></div>";
			this.$nav = "<div id='rotatorNav'></div>";
			this.$container.update(this.$content1+this.$content2+this.$nav);
			this.$frames = new Array();
			this.$frames[0] = $("motate1");
			this.$frames[1] = $("motate2");
			this.$content = new Array();
			this.preload(0);
			// Event.observe(window, "resize", this.scaleit.bindAsEventListener(this));
		},
		
		
		setSize: function() {
			this.$parent.setStyle("width:"+this.$width+"px");
			this.$parent.setStyle("height:"+this.$height+"px");
			this.$frames.each(function($frame) {
				$frame.setStyle("background-color:"+this.$background);
				$frame.setStyle("width:"+this.$width+"px");
				$frame.setStyle("height:"+this.$height+"px");
				$frame.setStyle("overflow: hidden");
				$frame.setStyle("opacity:1");
				$frame.absolutize();
			},this);
			this.styleNav();
			this.load(0,1);
		},
		
		
		preload: function($source) {
			this.$frames[0].setStyle("opacity:0");			
			this.$currentSource = $source;
			
			var $path = this.$sources[$source];
			var $ext = $path.split(".").pop();
			
			if ($ext != "php") {
				/* assume this is an image */
				var $img = document.createElement("IMG");
				$img.src = $path;
				$img.id = "tmpmotateimg"+$source;
				$("motate1").update($img);
				this.getContentHeight($("motate1"));
				if (this.$currentSource == this.$sourceLength-1) {
					this.$currentSource = 0;
					this.setSize();
				} else {
					this.$currentSource++;
					this.preload(this.$currentSource);
				}				
			} else {
									
			this.$preload = new Ajax.Request(
				this.$sources[$source], {
	
					method:'get',
	
					onSuccess: function(response) {
					},
	
					onFailure: function(response) {
					},
					
					onComplete: function(response) {
						$("motate1").update(response.responseText);
						this.getContentHeight($("motate1"));
						if (this.$currentSource == this.$sourceLength-1) {
							this.$currentSource = 0;
							this.setSize();
						} else {
							this.$currentSource++;
							this.preload(this.$currentSource);
						}
					}.bind(this)
			});
			
			}
			
		},
		
		getContentHeight: function($obj) {
			$children = $obj.childElements();
			$children.each(
				function($child) {
					this.$contentHeight += $child.getHeight();
				}.bind(this));
			if (this.$contentHeight > this.$height) {
				// this.$height = this.$contentHeight + 40;
				this.$contentHeight = 0;
			} else {
				this.$contentHeight = 0;
			}
		},
		
		scaleit: function(e) {
			this.$width = this.$sizer.getWidth();
			$position = this.$sizer.cumulativeOffset();
			this.$frames.each(
				function($frame) {
					$frame.setStyle("width:"+this.$width+"px");
					$frame.setStyle("left:"+$position[0]+"px");
				},this);
		},
			
		updateNav: function($frame) {
			for (i=0; i<this.$sourceLength; i++) {
				if (i == $frame) {
					$get = "rnav"+i;
					$nav = $($get);
					$nav.setStyle("background-color:#fea501");
					$nav.setStyle("color:#000000");
				} else {
					$get = "rnav"+i;
					$nav = $($get);
					$nav.setStyle("background-color: #648737");
					$nav.setStyle("color:#ffffff");
				}
			}
		},
		
		styleNav: function() {
			$top = this.$container.cumulativeOffset()[1] + this.$container.getHeight();
			$right = document.viewport.getWidth() - this.$container.cumulativeOffset()[0] - this.$container.getWidth();
			this.$nav = $("rotatorNav");
			this.$nav.setStyle("width:"+(this.$sourcelength*8)+"px");
			this.$nav.setStyle("top:"+($top-10)+"px");
			this.$nav.setStyle("right:"+($right+10)+"px");
			$navLinks = "<ul>";
			for (i=0; i<this.$sourceLength; i++) {
				$navLinks +="<li><a href='#' id='rnav"+i+"' onclick='$motate.snap(" +i+");'>"+(i+1)+"</a></li>";
			}
			$navLinks += "</ul>";
			this.$nav.update($navLinks);
		},
		
		load: function($source, $frame) {

			var $path = this.$sources[$source];
			var $ext = $path.split(".").pop();
			
			if ($ext !== "php") {
				/* assume this is an image */
				var $img = document.createElement("IMG");
				$img.src = $path;
				$img.id = "tmpmotateimg"+$source;
				if ($frame == 1) {
					$("motate2").update($img);
					$("motate2").setStyle("opacity:1");
					var $nextSource = this.$currentSource + 1;
					if ($nextSource > this.$sourceLength-1) {
						$nextSource = 0;
					}
					this.load($nextSource,0);
					this.updateNav($source);
				} else {
					$("motate1").update($img);
					$("motate1").setStyle("opacity:1");
					setTimeout(this.startFade.bind(this),4000);
				}

			} else {

			this.$loadContent = new Ajax.Request(this.$sources[$source],{
	
					method:'get',
					
					onSuccess: function(response) {
					},
					
					onFailure: function(response) {
					},
					
					onComplete: function(response) {					
						if ($frame == 1) {
							$("motate2").update(response.responseText);
							$("motate2").setStyle("opacity:1");
							$nextSource = $motate.$currentSource + 1;
							if ($nextSource > $motate.$sourceLength-1) {
								$nextSource = 0;
							}
							this.load($nextSource,0);
							this.updateNav($source);
						} else {
							$("motate1").update(response.responseText);
							$("motate1").setStyle("opacity:1");
							setTimeout(this.startFade.bind(this),4000);
						}
					}.bind(this)});
					
			}
					
		},
		
		
		startFade: function() {
			this.$fader = new PeriodicalExecuter( function(pe) {
					$temp = $("motate2").getStyle("opacity");
					$temp = Math.round($temp*10)/10;
					if ($temp == 0) {
						this.$currentSource++;
						if (this.$currentSource > this.$sourceLength-1) {
							this.$currentSource = 0;
						}
						pe.stop();
						this.load(this.$currentSource,1);
					} else {
						$("motate2").setStyle("opacity:"+($temp-.1));
					}
				}.bind(this),1);
		},
		
		snap: function($source) {
			$motate.$fader.stop();
			$motate.updateNav($source);
			$motate.$snapContent = new Ajax.Request($motate.$sources[$source],
				{
					method:'get',
	
					onSuccess: function(response) {
					},
	
					onFailure: function(response) {
					},
					
					onComplete: function(response) {
						$("motate2").update(response.responseText);
						$("motate2").setStyle("opacity:1");
					}
				});
		}
	
	}