// JavaScript Document
String.prototype.trim = function()
{
//alert(this);
return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}

//var arrImages = new Array();
//var testScroller;
//var xmlResult;

XMLScroller = function(id,parentEl,objAttributes, xmlFeed)
{
	this.imageSelected = new YAHOO.util.CustomEvent("imageSelected", this);
	this.animMgr = 
	{
		status:"idle",
		Scroller: this,
		animQue: new Array(),
		
		register: function(e, objAnim)
		{
			this.animQue.push(objAnim);
			this.status == "idle" ? this.animate() : null;
		},
				
		animComplete: new YAHOO.util.CustomEvent("animComplete",this.animMgr),
		
		animate: function()
		{
			masterScroller = this.Scroller
			if (this.animQue.length > 0)
			{
				
				objAnim = this.animQue.pop();
				switch (objAnim.anim)
				{
					case "left":
					this.status = "active";
						var regFrame = YAHOO.util.Dom.getRegion(Scroller.Scroller);
						var regImageHolder = YAHOO.util.Dom.getRegion(Scroller.imageHolder);
						var elImageHolder = new YAHOO.util.Element(Scroller.imageHolder);
						colImages = elImageHolder.getElementsByTagName("IMG");
						for ( i in colImages )
						{
							var regImage = YAHOO.util.Dom.getRegion(colImages[i].id);
							if (!(regFrame.contains(regImage) ) && regImage.left > regFrame.left)
							{
								var moveLeft = regFrame.right - regImage.right;
								//alert(masterScroller.LRMargin)
								var attributes =                
								{
									points: { to: [regImageHolder.left - (regImage.right - regFrame.intersect(regImage).right) - masterScroller.LRMargin] }
								};
								
								break;				
							}
							else if (!(regFrame.contains(regImage) ) && regImage.left > regFrame.left)
							{
							
							}
				
						}
						var anim = new YAHOO.util.Motion(Scroller.imageHolder, attributes);
						objAnim.duration != null ? anim.duration = objAnim.duration : anim.duration = Scroller.duration;
						anim.method = YAHOO.util.Easing.easeInStrong;
						anim.onComplete.subscribe(function()
						{
							this.animComplete.fire();
							Scroller.pollVisible();
						}, this, true);
						anim.animate();
						break;
						
					case "right":
					this.status = "active";
						var regFrame = YAHOO.util.Dom.getRegion(Scroller.Scroller);
						var regImageHolder = YAHOO.util.Dom.getRegion(Scroller.imageHolder);
						var elImageHolder = new YAHOO.util.Element(Scroller.imageHolder);
						colImages = elImageHolder.getElementsByTagName("IMG");
						regFirstImage = YAHOO.util.Dom.getRegion(colImages[0]);
						if (!(regFrame.contains(regFirstImage)))
						{
							for ( i = 0; i < colImages.length;i++ )
							{
								regImage = YAHOO.util.Dom.getRegion(colImages[i]);
								regNextImage = YAHOO.util.Dom.getRegion(colImages[i+1]);
								if (!(regFrame.contains(regImage)) && regFrame.contains(regNextImage) )
								{
									var moveRight = regFrame.left - regImage.left;
									var attributes =                
											{
												points: { to: [regImageHolder.left + moveRight + masterScroller.LRMargin] }
											};
										break;
								}
							}
							var anim = new YAHOO.util.Motion(Scroller.imageHolder, attributes);
							anim.onComplete.subscribe(function()
							{
								this.animComplete.fire();
							}, this, true);
							
							objAnim.duration != null ? anim.duration = objAnim.duration : anim.duration = Scroller.duration;
							anim.method = YAHOO.util.Easing.easeInStrong;
							anim.animate();		
						}
						else
						{
							this.status = "idle";
						}
						break;
						
					case "grow":						
//==========================================================================================================
						var el = objAnim.el;
						this.status = "idle";
						masterScroller = this.Scroller
						//alert(el.state);
						//alert(el.state);
						
						if (el.state != "large")
						{
							
							var elXY = YAHOO.util.Dom.getXY(el);
							var imgReg = YAHOO.util.Dom.getRegion(el);
							var imgHoldReg = YAHOO.util.Dom.getRegion(masterScroller.imageHolder);
							var scrollReg = YAHOO.util.Dom.getRegion(masterScroller.Scroller);
							
							if ( el.oDim == undefined )
							{
								el.oDim = new Array();
								el.oDim[0] = imgReg.width;
								el.oDim[1] = imgReg.height;
							}
							
							
							el.up = true;
							var wDiff = Math.ceil(parseInt(imgReg.width) * 1.1) - parseInt(imgReg.width);
							var hDiff = Math.ceil(parseInt(imgReg.height) * 1.1) - parseInt(imgReg.height);
							//alert(imgReg.height);
							//alert(wDiff);
							var attributes =
							{
								width: { to: Math.ceil(parseInt(imgReg.width) * 1.1) },
								height: { to: Math.ceil(parseInt(imgReg.height) * 1.1) },
								points: { to: [Math.ceil(elXY[0]), elXY[1]- hDiff] }
							};
							var eAnim = new YAHOO.util.Motion(el, attributes);
							eAnim.duration = .2;
							eAnim.method = YAHOO.util.Easing.backOut;
						   
							//--------------- Add Animation Event Listeners ---------------//
							eAnim.onStart.subscribe(function()
							{
								
								el.state = "large";
								imgReg = YAHOO.util.Dom.getRegion(el);
								if (scrollReg.contains(imgReg) != true & scrollReg.right < imgReg.right )
								{
									masterScroller.imageFrame.style.background = "url(Images/loading.gif) no-repeat center center";
									//alert(masterScroller.imageFrame.childNodes[0].style.visibility)
									masterScroller.imageFrame.childNodes[0].style.visibility = "hidden";
									this.animComplete.subscribe(masterScroller.loadImage, el, masterScroller, true);
									
								}
								else if (scrollReg.left > imgReg.left)
								{
									masterScroller.imageFrame.style.background = "url(Images/loading.gif) no-repeat center center";
									masterScroller.imageFrame.childNodes[0].style.visibility = "hidden";
									masterScroller.queMgr.addScroll("scale",{anim:"right", duration:0.1});
									this.animComplete.subscribe(masterScroller.loadImage, el, masterScroller, true);
								}
								else
								{
									masterScroller.imageFrame.childNodes[0].style.visibility = "hidden";
									masterScroller.imageFrame.style.background = "url(Images/loading.gif) no-repeat center center";
									eAnim.onComplete.subscribe(function()
									{	
										//alert(masterScroller.loadImage);
										masterScroller.loadImage(null, null, el);
									}, this, true);
									//masterScroller.
								//masterScroller.imageFrame.style.background = "url(Images/loading.gif) no-repeat center center";
								//masterScroller.imageFrame.childNodes[0].src = "";
								}
							}, this, true);
					
							
							eAnim.onComplete.subscribe(function()
							{	
								imgReg = YAHOO.util.Dom.getRegion(el);
								if (scrollReg.contains(imgReg) != true & scrollReg.right < imgReg.right )
								{
									masterScroller.queMgr.addScroll("scale",{anim:"left", duration: 0.1});
								}
								else if (scrollReg.left > imgReg.left)
								{
								//	masterScroller.queMgr.addScroll("scale",{anim:"right"});
								}
	//							masterScroller.scale.active = false;
	//							var regImageHolder = YAHOO.util.Dom.getRegion(masterScroller.imageHolder);
	//							var regImageFrame = YAHOO.util.Dom.getRegion(masterScroller.Scroller);
	//							imgReg = YAHOO.util.Dom.getRegion(el);
	//							if (scrollReg.contains(imgReg) != true & scrollReg.right < imgReg.right )
	//							{
	//								masterScroller.left();
	//				
	//							}
	//							else if (scrollReg.left > imgReg.left)
	//							{
	//								masterScroller.right();
	//							}
	//							el.scaling = false;
	//							masterScroller.firstFire = true;
								//masterScroller.imageSelected.fire(el)
								
							}, this, true);
							eAnim.animate();	
						}
						else if ( el.state == "large" )
						{
							var elXY = YAHOO.util.Dom.getXY(el.id);	
							//if ( masterScroller.multiSelector == true )//|| e == "bounceUp" )
//							{
								//-------------------- Set Animation Attributes --------------------//
								var attributes =
								{
								   width: { to: el.oDim[0] },
								   height: { to: el.oDim[1] },
								   points: { to: [Math.ceil(elXY[0]), Math.ceil(el.oXY[1])] }
								};
								//alert(el.oXY);
								var eAnim = new YAHOO.util.Motion(el, attributes);
								eAnim.duration = .15;
								eAnim.method = YAHOO.util.Easing.backIn;
							   
								//--------------- Add Animation Event Listeners ---------------//
								eAnim.onStart.subscribe(function()
								{
								//alert('scaledown' + " , " + el.oXY);
									el.state = "small";
								});
								eAnim.animate();
								
							
							}
						//}		
						break;
						
				}
			}
			else

			{
				this.status = "idle";
			}
		},
		
	
		init: function()
		{
			this.animComplete.subscribe(this.animate, this, true);
			//var imgs = YAHOO.util.Dom.getElementsByClassName("Img" + this.Scroller.id);
		},
		
		collapseOthers: function(e, el)
		{
			var imgs = YAHOO.util.Dom.getElementsByClassName("Img" + Scroller.Scroller.id);
			for ( i in imgs )
			{
				if ( imgs[i].tagName == "IMG" & imgs[i].state == "large" & imgs[i] != el)
				{	
					var animObj = 
					{
						anim:"grow",
						el:imgs[i]
					}
					this.register(null,animObj)
				}
			}	
		
		},
		
		registerSingular: function(objSingular)
		{
			YAHOO.util.Event.addListener(objSingular, "click", this.collapseOthers, objSingular, this, true);
			
			
		}
	}

	this.queMgr =
	{
		id: "queMgr",
		animMgr: this.animMgr,
		effectQue: new Array(),
		scrollQue: new Array(),
		effectAdded: new YAHOO.util.CustomEvent("effectAdded", this.queMgr),
		scrollAdded: new YAHOO.util.CustomEvent("scrollAdded",this.queMgr),
		init: function()
		{
			this.effectAdded.subscribe(this.evtFire, this, true)
			this.scrollAdded.subscribe(this.evtFire, this, true)
			
		},
			
		evtFire: function(e, args)
		{
			switch(e)
			{
				case "effectAdded":
						//alert(args);
					break;
			}
		},
		
		addScroll: function(e, strScroll)
		{
			this.animMgr.register(e, strScroll);
		},
		
		addEffectEl: function(el)
		{
			queMgr = this
			testObj = 
			{
				queMgr: queMgr,
				el: el,
				anim: "grow"
			}
			YAHOO.util.Event.addListener(el, "click", this.animMgr.register, testObj, this.animMgr, true);
		},
		
		professEffects: function()
		{
		
		},
		
		processScroll: function()
		{
		
		}
		
	}

	
	
	this.queMgr.init();

	
	this.testRegion = function(e)
	{
		srcEl = e.target;
		e.target == undefined ? srcEl = window.event.srcElement : null;
		var pos = YAHOO.util.Dom.getRegion(this.Scroller);
		var pos2 = YAHOO.util.Dom.getRegion(srcEl);
	} 
	
	this.display = function()
	{
	//alert(this.id);
		var IM = new Array();
		this.colImages = new Array();
		for ( i in xmlFeed )
		{
			IM[i] = new Image();
			//IM[i].src = xmlFeed[i].tmbPath;
			IM[i].src = "Images/gBkg.png";
			IM[i].fullDim = xmlFeed[i].imgDim.split(",")
			//alert(xmlFeed[i].imgDim);
			IM[i].style.background = "url(Images/loading.gif) no-repeat center center";<br />
			var thumbDim = xmlFeed[i].thumbDim.split(",")
			//alert(thumbDim[0] + "px")

			IM[i].srcPath = xmlFeed[i].srcPath;
			IM[i].className = "Img" + this.Scroller.id
			YAHOO.util.Dom.generateId(IM[i],"Img");
			YAHOO.util.Dom.addClass(IM[i], "imgEl");
			YAHOO.util.Dom.setStyle(IM[i], "padding-left", "2 px");
			YAHOO.util.Dom.setStyle(IM[i], "padding-right", "2 px");
			IM[i].style.height = thumbDim[1].trim() + "px";
			YAHOO.util.Dom.setStyle(IM[i], "width", thumbDim[0].trim() + "px");
			//this.queMgr.addEffect();
			//YAHOO.util.Event.addListener(IM[i], "click", this.testRegion, this, true);
			//IM[i].bounceUp = new YAHOO.util.CustomEvent("bounceUp", IM[i]);
			IM[i].srcPath = xmlFeed[i].srcPath;
			IM[i].thumbPath = xmlFeed[i].tmbPath;
			IM[i].thumbLoaded = false;
			this.imageHolder.appendChild(IM[i]);
			this.colImages.push(IM[i]);
			
		}
		document.getElementById(parentEl).appendChild(this.Scroller);
		this.Scroller.appendChild(this.imageHolder);
		this.pollVisible()
	}
	
	this.pollVisible = function()
	{
		var imgs = YAHOO.util.Dom.getElementsByClassName("Img" + this.Scroller.id);
		var regImageFrame = YAHOO.util.Dom.getRegion(this.Scroller);
		var arrImgShowQue = new Array()
		for ( im in imgs )
		{
			var regImageObj = YAHOO.util.Dom.getRegion(imgs[im])
			if (regImageFrame.contains(regImageObj) || regImageFrame.intersect(regImageObj) && imgs[im].thumbLoaded == false)
			{
				imgs[im].src = imgs[im].thumbPath;
				imgs[im].thumbLoaded = true;
			}
		}
		
	}
	
	
	
	this.cancelDrag = function(e)
	{
		try
		{
			e.preventDefault();
		}
		catch(err)
		{
		document.ondragstart = function() { return false; };
		}
	}

	this.initScaler = function()
	{
		this.animQue.arrQue.push("test");
		this.animQue.arrQue.push("test2");
		//alert(this.animQue.arrQue);
	
	}
//--------------------------- Initialization ------------------------------//	

	
	this.loadImage = function(e, args, obj)
	{
			var regImageFrame = YAHOO.util.Dom.getRegion(this.imageFrame);
			try
			{
			this.animMgr.animComplete.unsubscribe(this.loadImage);
			}
			catch(err)
			{
				this.imageSelected.unsubscribe(this.loadImage);
			}
			
			
			this.imageFrame.childNodes[0].src = obj.srcPath;
			if ( parseInt(obj.fullDim[0].trim()) > regImageFrame.width || parseInt(obj.fullDim[1].trim()) > regImageFrame.height) 
			{
				this.imageFrame.childNodes[0].style.height = regImageFrame.height - 10 + "px";
			}
			
			
			this.imageFrame.childNodes[0].style.visibility = "visible";
			
	}
	
	this.selectImage = function(e, args)
	{
		this.imageSelected.fire(args)
	}
	
	var myDataSource = new YAHOO.util.DataSource("thumbXML.php");
	myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
	myDataSource.responseSchema = 
	{
		resultNode: "Image",
		fields: ["srcPath","tmbPath","thumbDim","imgDim"]
	};

	var myColumnDefs = 
	[
	{key:"srcPath", label:"Source", sortable:true, formatter:this.formatUrl},
	{key:"tmbPath"},
	{key:"thumbDim"},
	{key:"imgDim"},
	];
	
	
	myDataSource.sendRequest(null,{
	scope: this,
	success : function (req,res) 
	{
		//this.LRMargin = 2;
		xmlFeed = res.results;
		this.id = id;
		this.LRMargin = 2;
			//--------- Create Elements --------------------------------------//
		this.Scroller = document.createElement('div');
		this.Scroller.style.border = "1px solid #666666";
		this.Scroller.style.margin = "auto";
		this.Scroller.style.position = "relative";
		this.Scroller.style.overflow = "hidden";
		this.imageHolder = document.createElement('div');
		this.duration = 0.35;
		YAHOO.util.Dom.generateId(this.Scroller, "Scroller");
		YAHOO.util.Dom.generateId(this.imageHolder,"imageHolder"); 
		
				//--------------- Set Image Holder Style ---------------//
			this.imageHolder.style.position = "relative";
			this.imageHolder.style.marginleft = "auto";
			this.imageHolder.style.marginright = "auto";
			this.imageHolder.style.margintop = "15px";
			this.imageHolder.style.height = "100px";
			this.imageHolder.style.left = "0px"
			this.imageHolder.style.width = "1000000px";
		
		YAHOO.util.Event.onAvailable(this.imageHolder.id, function()
		{	
			for ( a in objAttributes )
			{
				switch (a)
				{
					case "width":
						this.Scroller.style.width = objAttributes[a] + "px";
						break;
					
					case "height":
						this.Scroller.style.height = objAttributes[a] + "px";
						break;
						
					case "LRMargin":
					//
					//alert(parseInt(objAttributes[a]));
						this.LRMargin = parseInt(objAttributes[a]);
						//alert(this.colImages);
						for ( i in this.colImages )
						{
							YAHOO.util.Dom.setStyle(this.colImages[i], "padding-left", this.LRMargin + "px");
							YAHOO.util.Dom.setStyle(this.colImages[i], "padding-right", this.LRMargin + "px");
						}
						break;
						
					case "duration":
						this.duration = Number(objAttributes[a]);
						break;
						
					case "leftTrigger":
						//YAHOO.util.Event.addListener(document.getElementById(objAttributes[a]), "click", this.right, this, true);
							YAHOO.util.Event.addListener(document.getElementById(objAttributes[a]), "click", this.queMgr.addScroll, {anim:"right"},this.queMgr, true);
							break;
							
					case "rightTrigger":
						//YAHOO.util.Event.addListener(document.getElementById(objAttributes[a]), "click",this.left, this, true);
						YAHOO.util.Event.addListener(document.getElementById(objAttributes[a]), "click", this.queMgr.addScroll, {anim:"left"},this.queMgr, true);
						break;

					
						
					case "mode":
						switch(objAttributes[a])
						{
							case "bounce":
								
								break;
								
							case "scale":
								//alert("Scale");
								var imgReg = YAHOO.util.Dom.getRegion(this.imageHolder.id);
								var scrollReg = YAHOO.util.Dom.getRegion(this.Scroller.id);
								var nHeight = parseInt(scrollReg.height) * 1.15;
								
								this.imageHolder.style.marginTop = nHeight - parseInt(scrollReg.height) + "px";
								this.Scroller.style.height = nHeight + "px";
								var imgs = YAHOO.util.Dom.getElementsByClassName("Img" + this.Scroller.id);
								Scroller = this;
			
								for ( im in imgs )
								{
									//----------------------- Add Listeners To Images -----------------------//
									var elXY = YAHOO.util.Dom.getXY(imgs[im]);
									var olXY = YAHOO.util.Dom.getXY(imgs[0]);
									imgs[im].oXY = [elXY[0], olXY[1]]
									imgs[im].state = "small";								
									this.queMgr.addEffectEl(imgs[im]);
									//YAHOO.util.Event.addListener(imgs[im], "click", intAddScale, this,true);
									YAHOO.util.Event.addListener(imgs[im], "mousedown", this.cancelDrag, imgs[im]);
									this.animMgr.registerSingular(imgs[im]);
					//				if ( this.multiSelector != true )
	//								{
	//									imgs[im].bounceUp.subscribe(this.scaleOthers, [this, imgs[im]]);
	//								}
								}							
								break;
						}
						break;
						
					case "imageFrame":
						//this.imageFrame = objAttributes[a];
						var imgs = YAHOO.util.Dom.getElementsByClassName("Img" + this.Scroller.id);
							try
							{
								this.imageFrame = document.getElementById(objAttributes[a])
							}
							catch(err)
							{
								this.imageFrame = objAttribues[a]
							}
						var fullImgObj = document.createElement("IMG");
						this.imageFrame.appendChild(fullImgObj);
						Scroller = this;
	
						for ( im in imgs )
						{
							YAHOO.util.Event.addListener(imgs[im], "click", this.selectImage, imgs[im], this, true);
						
						}
						break;
					

				}
			}
		},this, true);
		//alert(this.queMgr.scaleQue);
		//this.imageSelected.subscribe(this.loadImage, this, true);
		this.display();
		this.animMgr.init();
	}});
	


}