var myLightbox = null;
var PhotoViewer = Class.create();
PhotoViewer.prototype = {
	initialize : function (photo_container, slide_container, photo_div, options)
	{
		
		/*var test_div = document.createElement("DIV");
		test_div.innerHTML = '<a href="http://www.vibesasia.com/common/getPhoto.php?img_key=1d8a3a6f3b675cf10a05b93d655ec54c" rel="lightbox"><img src="http://www.vibesasia.com/common/getPhoto.php?img_key=ef9872d302e6f0199de565ce94dc3e4f" alt="" /></a>';
		document.body.appendChild(test_div);
		myLightbox = new Lightbox();
		return;*/
		//alert("x");
		this.options = options;
		var agt = navigator.userAgent.toLowerCase();
		this.is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
		
		this.slide_container = null;
		this.photo_container = null
		this.photos = [];
		this.current_image = 0;
		
		if(photo_div != null)
		{
			var imgs = photo_div.getElementsByTagName("IMG");
			for(var i=0; i < imgs.length; i++)
			{
				this.photos.push(imgs[i]);
			}
		}
		

		//alert(this.photos.length);
		//alert("x");
		this.html = '<table width="100%" height="50px" border="0" cellspacing="0" cellpadding="0">';
		this.html += '  <tr>';
		this.html += '    <td width="35px" align="center" action="perv" style="background-color:#FFF"><img src="http://www.hongkonghomes.com/images/arrow_left.gif" width="6" height="12" border="0" /></td>';
		this.html += '    <td action="container" style="background-color:#FFF"></td>';
		this.html += '    <td width="35px" align="center" action="next" style="background-color:#FFF"><img src="http://www.hongkonghomes.com/images/arrow_right.gif" width="6" height="12" border="0" /></td>';
		this.html += '  </tr>';
		this.html += '</table>';
		
		
		//alert("x");
		if(photo_container != null)
		{
			this.photo_container = photo_container;
		}
		if( this.photos.length == 1)
		{
			this.photo_container_height = this.photo_container.offsetHeight;
			//alert(this.photos[0].src);
			this.photo_container.style.height = this.photo_container_height+"px";
			var thtm = "";
			
			if($(this.photos[0]).readAttribute("large") != null)
				thtm = '<a href="javascript:void();" pos="0" xhref="'+$(this.photos[0]).readAttribute("large")+'" rel="lightbox" style="" title="'+$(this.photos[0]).readAttribute("title")+'"><img title="'+$(this.photos[0]).readAttribute("title")+'" src="'+this.photos[0].src+'" height="'+this.photo_container_height+'px" border="0"></a>';
			else
				thtm = '<a href="javascript:void();" pos="0" xhref="'+this.photos[0].src+'" rel="lightbox" style="" title="'+$(this.photos[0]).readAttribute("title")+'"><img title="'+$(this.photos[0]).readAttribute("title")+'" src="'+this.photos[0].src+'" height="'+this.photo_container_height+'px" border="0"></a>';
			
			//var htm = '<a href="javascript:void();" pos="0" xhref="'+$(this.photos[0]).readAttribute("large")+'" rel="lightbox" style="display:none;"><img src="'+this.photos[0].src+'" height="'+this.photo_container_height+'px"></a>';	
			this.photo_container.innerHTML = thtm;
		}				
		var first_img = null;
		var default_img = null;
		if(slide_container != null)
		{
			this.slide_container = slide_container;
			this.slide_container.style.backgroundColor = "#DDDDDD";
			if(this.options != null && this.options.bgColor != null)
				this.slide_container.style.backgroundColor = this.options.bgColor;
				
			this.slide_container.innerHTML = this.html;
			
			this.slide_container_tds = this.slide_container.getElementsByTagName("td");
			
			for(var i=0; i < this.slide_container_tds.length; i++)
			{
				switch($(this.slide_container_tds[i]).readAttribute("action"))
				{
					case "perv":
						this.slide_container_tds[i].onclick = this.pervImage.bindAsEventListener(this);
						this.slide_container_tds[i].style.cursor = "pointer";
						break;
					case "next":
						this.slide_container_tds[i].onclick = this.nextImage.bindAsEventListener(this);
						this.slide_container_tds[i].style.cursor = "pointer";
						break;
					case "container":
						
						this.slide_container_tds[i].innerHTML = "<div style='border:0px #000000 solid; position:relative'></div>";
						this.slide_container_tds[i].style.width = (this.slide_container.childNodes[0].offsetWidth-70)+"px";
						
						/*this.slide_container_tds[i].childNodes[0].style.width = this.slide_container_tds[i].offsetWidth+"px";
						this.slide_container_tds[i].childNodes[0].style.height = this.slide_container_tds[i].offsetHeight+"px";
						this.slide_container_tds[i].childNodes[0].style.overflow = "hidden";
						this.slide_container_tds[i].childNodes[0].style.position = "absolute";*/
						//alert("c2");
						this.thumbnail_height = (this.slide_container_tds[i].offsetHeight-6);
						this.thumbnail_width = this.thumbnail_height*1.3333;
						//alert("c2");
						//alert (this.photos.length);
						var htm = "<div style='border:0px #000000 solid;position:absolute;overflow:hidden;height:"+this.slide_container_tds[i].offsetHeight+"px;width:"+(this.slide_container_tds[i].offsetWidth)+"px;'>";
						htm += "<div style='position:absolute' id='photo_viewer_image_container'><table border='0' cellspacing='0' cellpadding='1'><tr>";
						for(var x=0; x < this.photos.length; x++)
						{
							//alert(this.photos[i].src);
							htm += "<td pos='"+x+"' vAlign='middle' align='center' width='"+this.thumbnail_width+"px'><div style='width:"+this.thumbnail_width+"px;height:"+this.thumbnail_height+"px;overflow:hidden;background-color:#DDDDDD' align='center'><img "+(($(this.photos[x]).readAttribute("default")!=null)?"default='"+$(this.photos[x]).readAttribute("default")+"'":"")+" pos='"+x+"' src='"+this.photos[x].src+"' title='"+(($(this.photos[x]).readAttribute("title")==null)?"":$(this.photos[x]).readAttribute("title"))+"' height='"+this.thumbnail_height+"px' large='"+$(this.photos[x]).readAttribute("large")+"'></div></td>";	
						}
						htm += "</tr></table></div></div>";
						//alert(this.slide_container_tds[i].childNodes[0].innerHTML);
						//this.slide_container_tds[i].childNodes[0].innerHTML = "123";
						this.slide_container_tds[i].innerHTML = htm;
						
						this.left = this.getOffset(this.slide_container_tds[i], true);		
						this.top = this.getOffset(this.slide_container, false);
						//alert(this.left);
						this.slide_container_tds[i].childNodes[0].style.left = this.left+"px";
						this.slide_container_tds[i].childNodes[0].style.top = (this.top+4)+"px";							
						$("photo_viewer_image_container").style.left = "0px";
						$("photo_viewer_image_container").style.top = "0px";
						this.img_container = this.slide_container_tds[i].childNodes[0];
						this.images_tds = this.slide_container_tds[i].childNodes[0].getElementsByTagName("td");
						//alert("c2");
						//this.photo_container.childNodes[0].style.height = this.photo_container.offsetHeight+"px";
						
						this.photo_container_height = this.photo_container.offsetHeight;
						
						while(this.photo_container.childNodes.length > 0)
						{
							this.photo_container.removeChild(this.photo_container.childNodes[0]);
						}
						
						
						var htm = "";
						for(var x=0; x < this.images_tds.length; x++)
						{
							if(first_img == null)
							{
								var imgx = this.images_tds[x].getElementsByTagName("IMG");
								//alert(imgx[0].tagName);
								first_img = imgx[0];
							}
							
							var this_img = this.images_tds[x].getElementsByTagName("IMG")[0];
							this.images_tds[x].onclick = this.imageClick.bindAsEventListener(this);	
							this.images_tds[x].style.cursor = "pointer";
							//alert($(this_img).readAttribute("default")+" "+x);
							if(default_img == null && $(this_img).readAttribute("default") == "true")
							{
								var imgx = this.images_tds[x].getElementsByTagName("IMG");
								default_img = imgx[0];
							}
							/*this.images_tds[x].a = document.createElement("a");
							this.images_tds[x].a.pos = x;
							
							if($(this.images_tds[x]).readAttribute("large") != null)
								this.images_tds[x].a.href = $(this_img).readAttribute("large");
							else
								this.images_tds[x].a.href = this_img.src;
							this.images_tds[x].a.rel="lightbox[property]";
							this.images_tds[x].a.style.display = "none";*/
							//alert($(this_img).readAttribute("title"));
							if($(this_img).readAttribute("large") != null)
								htm += '<a href="javascript:void();" pos="'+x+'" xhref="'+$(this_img).readAttribute("large")+'" rel="lightbox[property]" style="display:none;" title="'+$(this_img).readAttribute("title")+'"><img src="'+this_img.src+'" title="'+$(this_img).readAttribute("title")+'" height="'+(this.photo_container_height)+'px" border="0"></a>';
							else
								htm += '<a href="javascript:void();" pos="'+x+'" xhref="'+this_img.src+'" rel="lightbox[property]" style="display:none;" title="'+$(this_img).readAttribute("title")+'"><img src="'+this_img.src+'" title="'+$(this_img).readAttribute("title")+'" height="'+this.photo_container_height+'px"></a>';
							
							/*this.images_tds[x].img = document.createElement("img");
							this.images_tds[x].img.style.height = this.photo_container_height+"px";
							this.images_tds[x].img.height = this.photo_container_height+"px";
							//alert(this.images_tds[x].childNodes[0].src);
							this.images_tds[x].img.src = this_img.src;
							this.images_tds[x].a.appendChild(this.images_tds[x].img);
							
							this.photo_container.appendChild(this.images_tds[x].a);*/
						}
						this.photo_container.innerHTML = htm;
						this.photo_container.style.height = this.photo_container_height+"px";
						this.frame_left = this.getOffset(this.slide_container_tds[i], true)+Math.floor( (this.slide_container_tds[i].offsetWidth/2)-(this.thumbnail_width) );
						//alert("c2");
						break;
				}
			}
		}
		//alert("x");

		//alert("x");
		Event.observe(window, "resize", this.resize.bindAsEventListener(this));
		
		//alert(first_img);
		if(default_img != null)
		{
			this.setImage(default_img);
		}
		else
		{
			if(first_img != null)
			{
				//alert(first_img.tagName+"_2");
				this.setImage(first_img);
			}
		}
		//alert("c");
		myLightbox = new Lightbox();
		//alert("c");
	},
	getOffset : function(obj, bool)
	{
		var total=0;
		while(obj!=null)
		{
			total+=obj["offset"+(bool?"Left":"Top")];
			
			obj=obj.offsetParent;
		}
		return total;		
	},	
	setImage : function (img)
	{
		//alert("c");
		//alert(img.src);
		/*if(this.photo_container != null)
		{
			//alert(this.photo_container.offsetHeight+"b");
			//alert(img.tagName);
			this.photo_container.childNodes[0].style.height = this.photo_container.offsetHeight+"px";
			this.photo_container.childNodes[0].src = img.src;
		}*/
		if(img.tagName != "IMG")
			return false;
			
		for(var i=0; i < this.photo_container.childNodes.length; i++)
		{
			var tmp_pos = $(this.photo_container.childNodes[i]).readAttribute("pos");
			if(tmp_pos != null && tmp_pos == $(img).readAttribute("pos"))
				this.photo_container.childNodes[i].style.display = "block";
			else
				this.photo_container.childNodes[i].style.display = "none";
		}	
		this.current_image = parseInt($(img).readAttribute("pos"));
		//alert(this.current_image);	
		this.movePanel();
		//alert("2");
	},
	pervImage : function ()
	{
		//alert("p");
		this.current_image--;
		if(this.current_image < 0)
		{
			this.current_image = this.images_tds.length-1;
		}
		this.setImage(this.images_tds[this.current_image].getElementsByTagName("IMG")[0]);
	},
	nextImage : function ()
	{
		//alert("n");
		var len = this.images_tds.length;
		this.current_image++;
		if(this.current_image >= len)
		{
			this.current_image = 0;
		}
		this.setImage(this.images_tds[this.current_image].getElementsByTagName("IMG")[0]);
	},
	imageClickAction : function(img)
	{
		
	},
	imageClick : function (evt)
	{
		var obj = Event.element(evt);
		this.setImage(obj);
	},
	movePanel : function ()
	{
		this.frame_left = this.getOffset(this.img_container.parentNode, true)+Math.floor( (this.img_container.parentNode.offsetWidth/2)-Math.floor(this.thumbnail_width/2) );
		var current_tbl_left = this.getOffset(this.img_container, true);
		var current_tbl_top = this.getOffset(this.img_container, false);
		
		var img_left = this.getOffset(this.images_tds[this.current_image], true);
		var left_margin = this.frame_left-img_left+1;
		
		var new_left = current_tbl_left+left_margin;
		/*if( ((this.current_image+1))%2 == 0 )
		{
			left_margin = left_margin+Math.floor(this.thumbnail_width/2);
		}
		else
		{
			left_margin = left_margin-Math.floor(this.thumbnail_width/2);
		}
		var move = false;*/
		//if(left_margin > 0)
		//if(left_margin > 2)
		
		var tmp = new Effect.MoveBy( this.img_container.childNodes[0], 0, left_margin , {duration: 1})
	},
	resize : function ()
	{
			for(var i=0; i < this.slide_container_tds.length; i++)
			{
				switch($(this.slide_container_tds[i]).readAttribute("action"))
				{
					case "container":
						this.left = this.getOffset(this.slide_container_tds[i], true);		
						this.top = this.getOffset(this.slide_container_tds[i], false);
						this.slide_container_tds[i].childNodes[0].style.left = this.left+"px";
						this.slide_container_tds[i].childNodes[0].style.top = (this.top+4)+"px";						
						break;
				}
			}		
		
	}
}