var SidePanel = Class.create({

  initialize: function() {
  	this.animations=new Array();
  	this.skin=null;
  	this.link=null;
  	this.thumbs=new Array(null,null,null,null,null);
	this.thumbStyle={cursor: 'pointer',border: '1px solid #999999',width:'76px',height:'58px'}
	
	this.authorThumb=new Element('img',{
  		src : '',
		title : ''
	});
	this.authorThumb.setStyle({
		cursor: 'pointer',
		width:'16px',
		height:'16px'
	});
  },

  load: function(theUrl) {
  	//alert("load "+theUrl);
  	this.skin.style.display='block';
  	var daddy=this.skin.parentElement || this.skin.parentNode;
  	daddy.className='';
	this.myAjax = new Ajax.Request(
		theUrl, {
			method: 'post',
			onSuccess: function(r) {
				//alert(r.responseText);
				var json = r.responseText.evalJSON();
				if (json.success) {
					this.loadAnimations(json.result);	
				} else {
					this.loadAnimations(false);
					
				}
			}.bind(this),
			onFailure: function(r) {
				alert('Failure: ' + r.responseText);
			}
		});
  },
  
  showAnimations: function(){
	
	if(this.skin==null){
  		alert("skin not set");
  	}else{
  		var titleName=this.skin.id+"_title";
  		$(titleName).update(this.title);
  		var linkName=this.skin.id+"_link";
  		$(linkName).href=this.link;
  		
  		var AthumbName=this.skin.id+"_authorThumb";
  		$(AthumbName).appendChild(this.authorThumb);
  		//alert(AthumbName);
		
		var i=0;
  		for(i=0;i<this.animations.length;i++){
  			var targetName=this.skin.id+"_AT_"+(i+1);
  			$(targetName).update(this.animations[i].title);
  			$(targetName).href="/sketch-star/en/player.php?id="+this.animations[i].id;
  			$(targetName).title=this.animations[i].titleFull+" by "+this.animations[i].authorNameFull;
  			$(targetName).onmouseover=this.showMe.bind(this,targetName);
  			
  		}
  	}
  	
  	this.previewAnimation(1);
  },
  
  showMe : function(id){
  	var pos=id.substring(10,11);
  	this.previewAnimation(pos);
  },
  
  previewAnimation:function(pos){
  	$(this.skin.id+"_connector").className='SS_SidepanelConnector pos'+(pos);
  	
  	if(this.thumbs[pos-1]==null){
			this.thumbs[pos-1]=new Element('img',{
				src : this.animations[pos-1].thumb,
				title : this.animations[pos-1].titleFull+" by "+this.animations[pos-1].authorNameFull
		});
	}

  	this.thumbs[pos-1].onclick=this.visitAnimation.bind(this,this.animations[pos-1].id);
  	this.thumbs[pos-1].setStyle(this.thumbStyle);
  	
  	var thumbName=this.skin.id+"_thumb";
  	var kids = $(thumbName).childNodes;
	for (j=0; j < kids.length; j++) {
    	$(thumbName).removeChild(kids[j]);
	}
	$(thumbName).appendChild(this.thumbs[pos-1]);
	
  	
  	var titletruncate=this.animations[pos-1].titleFull.substring(0,30);
  	$(this.skin.id+"_ptitle").update("<a href='/sketch-star/en/player.php?id="+this.animations[pos-1].id+"'>"+titletruncate+"</a>");
  	$(this.skin.id+"_ptitle").title=this.animations[pos-1].titleFull+" by "+this.animations[pos-1].authorNameFull;
  	this.authorThumb.src="http://www.miniclip.com/players/en/resize.php?uid="+this.animations[pos-1].authorId+"&w=16&h=16";
  	this.authorThumb.title=this.animations[pos-1].authorNameFull;
  	this.authorThumb.onclick=this.visitAuthor.bind(this,this.animations[pos-1].authorId);
  	$(this.skin.id+"_authorName").update("<a href='/sketch-star/en/profile.php?id="+this.animations[pos-1].authorId+"' title='"+this.animations[pos-1].authorNameFull+"'>"+this.animations[pos-1].authorName+"</a>");
  	$(this.skin.id+"_pvotes").update(this.animations[pos-1].votes);
  	$(this.skin.id+"_pduration").update(this.animations[pos-1].length);
  },
  
   visitAuthor: function(id){
  	window.location="/sketch-star/en/profile.php?id="+id;
  },
  
  visitAnimation: function(id){
  	window.location="/sketch-star/en/player.php?id="+id;
  },

  loadAnimations: function(list){
  	
  	
  	if (list !== false) {
  		
		list.each(function(l) {
			this.animations.push(l);
			
		}.bind(this));
		
		if (this.animations.length) {
			
			$(this.skin.id+"_loading").style.display='none';
			$(this.skin.id+"_loading_gif").style.display='none';
			
			this.showAnimations();
			
		} else {
			alert('No animations to display!');
		}

	} else {
		cont.update('Error loading list of animations: ' + list);
	}
  
  }
});
//alert('sidePanel.js loaded');