/*-------------------------------------------------------------------------------------------*/
//	ImagePanel: uses dhtml to produce a horizontal scrolling area
/*-------------------------------------------------------------------------------------------*/
function ImagePanel () {}
Object.extend(ImagePanel.prototype, {
	Images: new Array(),
	Key: "",
	Timer: null,
	Container: null,
	btnNext: null,
	btnPrev: null,
	divCurrentImage: null,
	Selected: 0,
	Current: 0,
	Next: -1,
	Path: "",
	Height: 0,
	Width: 0,
	DisplayCount: 0,
	PaddingTop: 0,
	PaddingBottom: 0,
	PaddingLeft: 0,
	PaddingRight: 0,
	BorderWidth: 1,
	BorderColor: "#cccccc",
	BorderColorSel: "#666666",
	BorderStyle: "solid",
	Distance: 0,
	Delay: 0,
	TargetPos: 0,
	TotalWidth: 0,
	PreloadCount: 5,
	bMouseDown: false,
	bMoving: false,
	Title: "",
	onClickMethod: null,
	GalleryID: 0,
	
	init: function() 
	{
		var self = this;
		
		this.Container = $(this.Container);
		
		for (var nIndex=0; nIndex<this.Images.length; nIndex++) 
		{			
			this.Images[nIndex].element = document.createElement("div");
			this.Images[nIndex].element.className = "thumbnail";
			
			this.Images[nIndex].element.style.marginTop = this.PaddingTop + "px";
			this.Images[nIndex].element.style.marginBottom = this.PaddingBottom + "px";
			this.Images[nIndex].element.style.marginRight = this.PaddingRight + "px";
			this.Images[nIndex].element.style.marginLeft = this.PaddingLeft + "px";
			
			this.Images[nIndex].image = new Image(this.imageWidth(nIndex), this.Height);
			
			this.Images[nIndex].image.src = this.Path + this.Images[nIndex].Name;
			this.Images[nIndex].image.id = this.Images[nIndex].lID;
			this.Images[nIndex].image.name = this.Images[nIndex].Name;
			this.Images[nIndex].image.title = this.Title;
			
			//this.Images[nIndex].image.onclick =  function(event) {self.selectImage(this.id); self.onClickMethod(this.id);}
			this.Images[nIndex].image.onclick =  function(event) {self.Selected = this.id; self.onClickMethod(this.id);}
			
			this.Images[nIndex].image.style.cursor = "pointer";			
			this.Images[nIndex].image.style.borderStyle = this.BorderStyle;
			this.Images[nIndex].image.style.borderWidth = this.BorderWidth + "px";
			this.Images[nIndex].image.style.borderColor = this.BorderColor;
			
			this.Images[nIndex].element.appendChild(this.Images[nIndex].image);
			this.Container.appendChild(this.Images[nIndex].element);
		}
		
		if (this.btnNext != null)
		{
		    this.btnNext = $(this.btnNext);
		    this.btnNext.onmousedown = function(event) { self.loadNext(); }
		    this.btnNext.style.cursor = "pointer";	
		}
		
		if (this.btnPrev != null)
		{
		    this.btnPrev = $(this.btnPrev);
		    this.btnPrev.onmousedown = function(event) { self.loadPrev(); }
		    this.btnPrev.style.cursor = "pointer";	
		}
		
		if (this.divCurrentImage != null) this.divCurrentImage = $(this.divCurrentImage);
		
		window.onresize = function(event) {self.resize();}
		this.resize();
		
		if (this.Selected == 0 || !this.exists(this.Selected)) this.Selected = this.Images[0].lID;
		this.selectImage(this.Selected);
	},
	
	resize: function() 
	{
		//this.Container.style.height = this.Height;
	},
	
	imageWidth: function(nIndex) 
	{
		if (this.Images[nIndex].Width > 0) 
			return Width = this.Images[nIndex].Width;
		else
			return this.Width;
	},
	
	screenWidth: function() 
	{
		if (UserAgent.browser == "Explorer") {
			return document.body.offsetWidth;
		}
		else {
			return window.innerWidth;
		}
	},
	
	screenHeight: function() 
	{
		if (UserAgent.browser == "Explorer") {
			return document.body.offsetHeight;
		}
		else {
			return window.innerHeight;
		}
	},
	
	clearImages: function() 
	{
		this.Images = new Array();
	},
	
	addImage: function(lID, Name, Width) 
	{
		var Image = new Object;
		
		Image.lID = lID;
		Image.Name = Name;
		Image.Width = Width;
		
		this.Images.push(Image);
	},
	
	exists: function(lID) 
	{
		var bExists = false;
		for (nIndex=0; nIndex<this.Images.length; nIndex++) 
		{
			if (this.Images[nIndex].lID == lID) bExists = true;
		}	
		return bExists;
	},
	
	loadNext: function()
	{
	    for (nIndex=0; nIndex<this.Images.length-1; nIndex++) 
		{
			if (this.Images[nIndex].lID == this.Selected) 
			{
                this.Selected = this.Images[nIndex+1].lID;
	            this.onClickMethod(this.Images[nIndex+1].lID); 
	            break;
			}
		}	
	},
	
	loadPrev: function()
	{
	    for (nIndex=1; nIndex<this.Images.length; nIndex++) 
		{
			if (this.Images[nIndex].lID == this.Selected) 
			{
                this.Selected = this.Images[nIndex-1].lID;
	            this.onClickMethod(this.Images[nIndex-1].lID); 
	            break;
			}
		}	
	},
	
	selectImage: function(lID) 
	{
		this.Selected = lID;
		
		for (nIndex=0; nIndex<this.Images.length; nIndex++) 
		{
			if (rgb2Hex(this.Images[nIndex].image.style.borderColor).toLowerCase() == this.BorderColorSel) this.Images[nIndex].image.style.borderColor = this.BorderColor;
			if (this.Images[nIndex].lID == lID) 
			{
			    this.Images[nIndex].image.style.borderColor = this.BorderColorSel;
			    if (this.divCurrentImage != null) this.divCurrentImage.innerHTML = (nIndex+1) + " ";
			}
		}
	}
	
});