if(navigator.userAgent.indexOf("MSIE")<0)
{
	HTMLElement.prototype.insertAdjacentHTML=function(where, html)
	{
		var e=this.ownerDocument.createRange();
		e.setStartBefore(this);
		e=e.createContextualFragment(html);
		switch (where) {
			case 'beforeBegin': this.parentNode.insertBefore(e, this);break;
			case 'afterBegin': this.insertBefore(e, this.firstChild); break;
			case 'beforeEnd': this.appendChild(e); break;
			case 'afterEnd':
			if(!this.nextSibling) this.parentNode.appendChild(e);
		else this.parentNode.insertBefore(e, this.nextSibling); break;
		}
	};
};
///////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////
function PicsPlayer()
{
	var _isie = true ;
	var _is_locked = false ;
	var _is_variables_inited = false ;
	var _timer_handle = 0 ;
	var _pic_lists = null ; 
	
	var _bind_elm = null ;
	var _img_folder = null ;
	var _bind_elm_pos_x = 0, _bind_elm_pos_y = 0 ;
	var _cur_img_index = 0 ;
	
	var _is_attach_events = false ;
	var _is_autoplay_pause = true ;
	var _is_autoplay_flag = false ;
	var _autoplay_interval_id = 0 ;
	
	var _nav_cur_index_text_color = "#666688", _nav_cur_index_bg_color = "#ffffff";
	var _nav_text_color = "#ffffff", _nav_bg_color = "#666688";
	
	///////////////////////////////////////////////////////////////////
	this.UtilityName = null ;
	///////////////////////////////////////////////////////////////////
	this.Init = function(uv)
	{
		_isie = (navigator.userAgent.indexOf("MSIE")>0) ? true : false ;
		_is_locked = false;
		_is_variables_inited = true;
		
		_pic_lists = null ;
		_bind_elm = null ;
		_is_attach_events = false ;
		_img_folder = "./" ;
		if(uv != null)	{ this.UtilityName = String(uv) ; }
		
		
		return;
	};
	///////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////
	this.BindElement = function(obj, flag)
	{
		var _pobj = null, is_attach_events = false ;
		
		if(flag != null)	{ _is_attach_events = flag ; }
		_bind_elm = obj ;
	
		_bind_elm_pos_x = 0;
		_bind_elm_pos_y = 0 ;
		_pobj = obj ;
	
		while(_pobj.offsetParent != null)
		{
			_bind_elm_pos_x += _pobj.offsetParent.offsetLeft ;
			_bind_elm_pos_y += _pobj.offsetParent.offsetTop ;
			_pobj = _pobj.offsetParent;
		}
		_bind_elm_pos_x += obj.offsetLeft ;
		_bind_elm_pos_y += obj.offsetTop ;
		if(_isie==true)
		{
			window.attachEvent("onresize",this.OnResizeEnd);
		}
		else
		{
			eval("window.addEventListener(\"resize\",function(evt){" + this.UtilityName + ".OnResizeEnd(evt)}, false);");
		}
		
		if(_is_attach_events == false)
		{
			return ;
		}
		if(_isie==true)
		{
			_bind_elm.attachEvent("onmouseover", this.OnMouseOverEvt);
			_bind_elm.attachEvent("onmouseout", this.OnMouseOutEvt);
		}
		else
		{
			eval("document.getElementById(\""+ _bind_elm.id + "\").addEventListener(\"mouseover\",function(evt){" + this.UtilityName + ".OnMouseOverEvt(evt)}, false);");
			eval("document.getElementById(\""+ _bind_elm.id + "\").addEventListener(\"mouseout\",function(evt){" + this.UtilityName + ".OnMouseOutEvt(evt)}, false);");
		}
		
		
		return;
	};
	///////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////
	this.OnMouseOverEvt = function(evt)
	{
		if(_is_autoplay_flag==true)
		{
			_is_autoplay_pause = true ;
		}
		return;	
	};
	///////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////
	this.OnMouseOutEvt = function(evt)
	{
		if(_is_autoplay_flag==true)
		{
			_is_autoplay_pause = false ;
		}
		return;	
	};
	///////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////
	this.OnResizeEnd = function(evt)
	{
		var _pobj = null , _elm = null;
		var _xv=0, _yv = 0, _o_xv = 0 , _o_yv = 0 ;
		
		_elm = document.getElementById("_picplayer_navcontainer_");
		
		if(_elm == null)	{ return ; }
		_pobj = _bind_elm ;
	
		while(_pobj.offsetParent != null)
		{
			_xv += _pobj.offsetParent.offsetLeft ;
			_yv += _pobj.offsetParent.offsetTop ;
			_pobj = _pobj.offsetParent;
		}
		_xv += _bind_elm.offsetLeft ;
		_yv += _bind_elm.offsetTop ;
		
		_o_xv = _xv - _bind_elm_pos_x;
		_o_yv = _yv - _bind_elm_pos_y;
		_bind_elm_pos_x = _xv ;
		_bind_elm_pos_y = _yv ;
		
		_elm.style.left = String(parseInt(_elm.style.left,10) + _o_xv) + "px";
		_elm.style.top = String(parseInt(_elm.style.top,10) + _o_yv) + "px";
		
		
		return;	
	};
	///////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////
	this.SetImgFolder = function(v)
	{
		_img_folder = v ;
		return;
	};
	///////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////
	this.SetImgListArray = function(v)
	{
		_pic_lists = v ;
		_bind_elm.src = _img_folder + _pic_lists[0];
		_bind_elm.style.visibility = "visible";
		return;
	};
	///////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////
	this.BuildNav = function(v)
	{
		var i = 0, s = "" ;
		switch(v)
		{
			case 0:
			{
				s = "<div id=\"_picplayer_navcontainer_\" style=\"position:absolute;left:" + String(_bind_elm_pos_x) + "px;top:" + String(_bind_elm_pos_y + 8) + "px;width:" + String(_bind_elm.offsetWidth) + "px;height:32px;\">";
				s += "<table align=\"left\"><tr>" ;
				break;
			}
			case 1:
			{
				s = "<div id=\"_picplayer_navcontainer_\" style=\"position:absolute;left:" + String(_bind_elm_pos_x) + "px;top:" + String(_bind_elm_pos_y + 8) + "px;width:" + String(_bind_elm.offsetWidth) + "px;height:32px;\">";
				s += "<table align=\"right\"><tr>" ;
				break;
			}
			case 2:
			{
				s = "<div id=\"_picplayer_navcontainer_\" style=\"position:absolute;left:" + String(_bind_elm_pos_x) + "px;top:" + String(_bind_elm_pos_y+_bind_elm.offsetHeight-24) + "px;width:" + String(_bind_elm.offsetWidth) + "px;height:32px;\">";
				s += "<table align=\"left\"><tr>" ;
				break;
			}
			case 3:
			{
				s = "<div id=\"_picplayer_navcontainer_\" style=\"position:absolute;left:" + String(_bind_elm_pos_x) + "px;top:" + String(_bind_elm_pos_y+_bind_elm.offsetHeight-24) + "px;width:" + String(_bind_elm.offsetWidth) + "px;height:32px;\">";
				s += "<table align=\"right\"><tr>" ;
				break;
			}
		}
		s += "<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>";
		for(i=0;i<_pic_lists.length;i++)
		{
			s += "<td><div id=\"_picnav_" + String(i) + "\" style=\"text-align:center;font-weight:bold;width:24px;height:20px;font-size:14px;";
			if(i==_cur_img_index)
			{
				s += "background-color:" + _nav_cur_index_bg_color + ";color:" + _nav_cur_index_text_color + ";\"";
			}
			else
			{
				s += "cursor:pointer;background-color:" + _nav_bg_color + ";color:" + _nav_text_color + ";\"";
			}
			//s += " onclick=\"javascript:"+ this.UtilityName +".StopAutoPlay();"+ this.UtilityName +".ShowPic(" + String(i) + ", this);\" " ;
			s += " onclick=\"javascript:"+ this.UtilityName +".ShowPic(" + String(i) + ", this);\" " ;
			s += " onmouseover=\"javascript:"+ this.UtilityName +".OnMouseOverEvt();\" " ;
			s += " onmouseout=\"javascript:"+ this.UtilityName +".OnMouseOutEvt();\" " ;
			s += ">"+ String(i+1) + "</div></td>"
		}
		s += "<td><div style=\"width:13px;;\">&nbsp;</div></td>";
		s += "</tr></table></div>" ;
		
		//s += "<button onclick=\"javascript:" + this.UtilityName +".StopAutoPlay();" + this.UtilityName +".ShowPrev(this);\" style=\"width:34px;height:50px;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);cursor:pointer;position:absolute;left:" + String(_bind_elm_pos_x+23) + "px;top:" + String(_bind_elm_pos_y+55) + "px;\"></button>";
		//s += "<button onclick=\"javascript:" + this.UtilityName +".StopAutoPlay();" + this.UtilityName +".ShowNext(this);\" style=\"width:34px;height:50px;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);cursor:pointer;position:absolute;left:" + String(_bind_elm_pos_x+944) + "px;top:" + String(_bind_elm_pos_y+55) + "px;\"></button>";
		s += "<button onclick=\"javascript:" + this.UtilityName +".ShowPrev(this);\" onmouseover=\"javascript:"+ this.UtilityName +".OnMouseOverEvt();\" onmouseout=\"javascript:"+ this.UtilityName +".OnMouseOutEvt();\" style=\"width:34px;height:50px;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);cursor:pointer;position:absolute;left:" + String(_bind_elm_pos_x+23) + "px;top:" + String(_bind_elm_pos_y+55) + "px;\"></button>";
		s += "<button onclick=\"javascript:" + this.UtilityName +".ShowNext(this);\" onmouseover=\"javascript:"+ this.UtilityName +".OnMouseOverEvt();\" onmouseout=\"javascript:"+ this.UtilityName +".OnMouseOutEvt();\" style=\"width:34px;height:50px;-moz-opacity:0;opacity:0;filter:alpha(opacity=0);cursor:pointer;position:absolute;left:" + String(_bind_elm_pos_x+944) + "px;top:" + String(_bind_elm_pos_y+55) + "px;\"></button>";
		_bind_elm.insertAdjacentHTML("afterEnd",s);
		return;
	};
	///////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////
	this.ShowPrev = function(obj)
	{
		var s = "", n = 0 ;
		
		if(_is_locked == true)		{ return ; }
		_is_locked = true ;
		
		n = _cur_img_index ;
		n -- ;
		if(n < 0)		{ n = (_pic_lists.length - 1) ; }
		
		this.ShowPic(n, document.getElementById("_picnav_" + String(n)));
		if(obj != null)		{ obj.blur(); }
		_is_locked = false ;
		
		return;
	};
	///////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////
	this.ShowNext = function(obj)
	{
		var s = "", n = 0 ;
		
		if(_is_locked == true)		{ return ; }
		_is_locked = true ;
		
		n = _cur_img_index ;
		n ++ ;
		if(n >= _pic_lists.length)		{ n = 0 ; }
		
		
		this.ShowPic(n, document.getElementById("_picnav_" + String(n)));
		if(obj != null)		{ obj.blur(); }
		_is_locked = false ;
		
		return;
	};
	///////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////
	this.ShowPic = function(n, obj)
	{
		var s = "", _elm = null ;

		if(n == _cur_img_index)		{ return ; }
		
		if(obj != null)
		{
			obj.style.cursor = "default";
			obj.style.color = _nav_cur_index_text_color ;
			obj.style.backgroundColor = _nav_cur_index_bg_color ; 
		}
		
		_elm = document.getElementById("_picnav_" + String(_cur_img_index)) ;
		_elm.style.cursor = "pointer";
		_elm.style.color = _nav_text_color ;
		_elm.style.backgroundColor = _nav_bg_color ; 
		_cur_img_index = n ;
		if(_cur_img_index < 0)				{ _cur_img_index = (_pic_lists.length - 1) ; }
		if(_cur_img_index >= _pic_lists.length)		{ _cur_img_index = 0 ; }
		
		s =  _img_folder + _pic_lists[_cur_img_index];
		
		if(_isie == true)
		{
			var rd=Math.floor(Math.random() * 30);
	        	
	        	_bind_elm.filters.revealTrans.Transition=rd;
			_bind_elm.filters.revealTrans.apply();
			_bind_elm.src = s;
	        	_bind_elm.filters.revealTrans.play();
        	}
        	else
        	{
        		_bind_elm.src = s ;
        	}
		
		return;
	};
	///////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////
	this.StopAutoPlay = function(obj)
	{
		if(_is_attach_events == false)	{ return ; }
		if(_is_autoplay_flag == false)	{ return ; }
		if(_autoplay_interval_id == 0)	{ return ; }
		
		_is_autoplay_pause = true ;
		_is_autoplay_flag = false ;
		
		if(_isie==true)
		{
			window.clearInterval(_autoplay_interval_id);
		}
		else
		{
			clearInterval(_autoplay_interval_id);
		}
		_autoplay_interval_id = 0 ;
		
		return;
	};
	///////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////
	this.StartAutoPlay = function(v)
	{
		_is_autoplay_pause = false ;
		_is_autoplay_flag = true ;
		if(_isie==true)
		{
			_autoplay_interval_id = window.setInterval(this.UtilityName + ".AutoPlay()", v, "javascript");
		}
		else
		{
			_autoplay_interval_id = setInterval(this.UtilityName + ".AutoPlay()", v);
		}
		return;
	};
	///////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////
	this.AutoPlay = function(obj)
	{
		if(_is_attach_events == false)	{ return ; }
		if(_is_autoplay_pause == true)	{ return ; }
		if(_is_autoplay_flag == false)	{ return ; }
		
		this.ShowNext(obj);
		return;
	};
	///////////////////////////////////////////////////////////////////
	///////////////////////////////////////////////////////////////////
}