var ImagePlayer = Class.create();
ImagePlayer.prototype = {
	initialize: function(container, w, h, time){
	   this._timer = null;
	   this._items = [];
	   this._index = 0;
	   this._imgs = [];
	   this._indexs = [];
	   
	   this._width = w || 300;
	   this._height = h || 300;
	   this._intervalTime = time || 2000;  
	   
	   this._container = $(container); 
	   this._container.className ="imagePlayer";
	   this._containerId = this._container.getAttribute("id"); 
	   this._container.player = this;
	   this._container.style.width = (this._width) +"px";
//	   this._container.style.height = (this._height+20) +"px"; 
	   
	   this._textArea = document.createElement("div");
	   this._textArea.className = "textArea";
	   this._textArea.style.width = this._width+"px";
	   this._container.appendChild(this._textArea);
	   
	   this._imageArea = document.createElement("div");
	   this._imageArea.className = "imageArea";
	   this._imageArea.style.width = this._width+"px";
	   this._imageArea.style.height = this._height+"px";
	   this._container.appendChild(this._imageArea);
	   
	   this._navArea = document.createElement("div");
	   this._navArea.className ="navArea";
	   this._navArea.style.width = this._width+"px";
	   this._container.appendChild(this._navArea);
	},
	
	addItem: function(title, link, url){
	   var player = this;
	   this._items.push({title: title, link: link, url: url});
	   var img = new Image();  
       img.src = url; 
       img.title = title;
       img.style.cursor ="pointer";
       img.onclick = function(){window.open(link)};
       img.onload = function(){
       	   if(this.width<=player._width && this.height<=player._height){
       	   	  this.style.width = this.style.width+"px";
       	   	  this.style.height = this.style.height+"px";
       	   }else if(this.width/player._width>this.height/player._height){
       	   	  this.style.height = parseInt(this.height*player._width/this.width)+"px";
       	      this.style.width = player._width+"px";
       	   }else{ 
       	   	  this.style.width = parseInt(this.width*player._height/this.height)+"px";
       	   	  this.style.height = player._height+"px";
       	   }
       };
       this._imgs.push( img );
       
       var index = this._items.length;
       var span = document.createElement("span");
       span.className = "navItem";
       this._indexs.push(span);
       this._navArea.appendChild(span);       
       span.innerHTML = index;
       span.isSelected = false;
       span.select = function(){this.className="navItemSel"; this.isSelected = true;};
       span.unselect = function(){this.className="navItem"; this.isSelected = false;};
       span.onclick = function(){player.play(index-1);};
       span.onmouseover = function(){if(!this.isSelected)this.className="navItemSel"};
       span.onmouseout = function(){if(!this.isSelected)this.className="navItem"};

	},
	play: function(index){
       if( index!=null ){  
            this._index = index;  
            clearInterval( this._timer );  
            this._timer = setInterval("$('"+this._containerId+"').player.play();", this._intervalTime );   
       } else {  
            this._index = this._index<this._items.length-1 ? this._index+1 : 0;  
       } 
     var img = this._imgs[this._index]; 
     this._imageArea.innerHTML="";
	   this._imageArea.appendChild(img);
	   this._textArea.innerHTML = img.title;
	   for(var i=0; i<this._indexs.length; i++){
	   	  this._indexs[i].unselect();
	   }
	   this._indexs[this._index].select();
	}
}