var targetDiv;
var _ANIMATIONS = new Array();
var _CACHE_PREV_ANIMATIONS=new Array();
var _CACHE_NEXT_ANIMATIONS=new Array();
var _DIR=null;
var _PREDIV;
var _LASTID;
var _CURRENTDIV;
var _COUNTER=0;
var _TOTALCOUNT=0;
var _ENABLED=true;
function cacheNextResponse(){
	resetCache();
	cachePrevPage();
	cacheNextPage();
}
function resetCache(){
	_CACHE_PREV_ANIMATIONS=new Array();
	_CACHE_NEXT_ANIMATIONS=new Array();
}
function cachePrevPage(){
	var url='/sketch-star/ss2/scripts/top3Panel/getMoreByAnimations.php?userId='+_USERID+'&currentId='+_ANIMATIONS[0].id+'&ft=0&dir=0';
	var myAjax = new Ajax.Request(
		url, {
			method: 'post',
			onSuccess: function(r) {
				var json = r.responseText.evalJSON();
				if (json.success) {
					loadAnimationsCache(json.result,0);
				} else {
					loadAnimationsCache(false,0);
				}
			},
			onFailure: function(r) {
				alert('Failure: ' + r.responseText);
			}
		});
}
function cacheNextPage(){
	var url='/sketch-star/ss2/scripts/top3Panel/getMoreByAnimations.php?userId='+_USERID+'&currentId='+_ANIMATIONS[2].id+'&ft=0&dir=1';
	var myAjax = new Ajax.Request(
		url, {
			method: 'post',
			onSuccess: function(r) {
				var json = r.responseText.evalJSON();
				if (json.success) {
					loadAnimationsCache(json.result,1);
				} else {
					loadAnimationsCache(false,1);
				}
			},
			onFailure: function(r) {
				alert('Failure: ' + r.responseText);
			}
		});
}
function loadAnimationsCache(list,dir)
{	
	if (list !== false) {
		if(dir==0){
			list.each(function(l) {
				_CACHE_PREV_ANIMATIONS.push(l);
			});
		}
		if(dir==1){
			list.each(function(l) {
				_CACHE_NEXT_ANIMATIONS.push(l);
			});
		}
	}
}
function SS_MAPgoNext(){
	if(_ENABLED){
		_DIR=1;
		if(_CACHE_NEXT_ANIMATIONS.length>0){
			loadAnimations(_CACHE_NEXT_ANIMATIONS);
			_ENABLED=false;
		}else{
			_LASTID=_ANIMATIONS[2].id;
			var url='/sketch-star/ss2/scripts/top3Panel/getMoreByAnimations.php?userId='+_USERID+'&currentId='+_LASTID+'&ft=0&dir='+_DIR
			load(url);
		}
	}
}
function SS_MAPgoPrev(){
	if(_ENABLED){
		_DIR=0;
		if(_CACHE_PREV_ANIMATIONS.length>0){
			loadAnimations(_CACHE_PREV_ANIMATIONS);
			_ENABLED=false;
		}else{
			_LASTID=_ANIMATIONS[0].id;
			var url='/sketch-star/ss2/scripts/top3Panel/getMoreByAnimations.php?userId='+_USERID+'&currentId='+_LASTID+'&ft=0&dir='+_DIR
			load(url);
		}
	}	
}
function _MBC_MOTION_FINISH(){
	_ENABLED=true;
}
function drawDivs(div){
	targetDiv=$(div);
	if(_CURRENTDIV!=null){
		_PREDIV=_CURRENTDIV;
	}
	_CURRENTDIV = new Element('div', {
		style : 'position:absolute',
		id : "page"+_COUNTER,
		backgroundColor: "#FF0000"
	});
	_COUNTER++;
	for(var i=0;i<_ANIMATIONS.length;i++){
		var resultDiv=drawContainerDiv(_ANIMATIONS[i]);
		_CURRENTDIV.appendChild(resultDiv);
	}
	if(_DIR==null){
		targetDiv.appendChild(_CURRENTDIV);
	}
	if(_DIR==1){
		var me=new Effect.Move(_PREDIV, {x:-620,y:0,duration:1,afterFinish:_MBC_MOTION_FINISH});
		_CURRENTDIV.setStyle({
			left : '620px'
		});
		targetDiv.appendChild(_CURRENTDIV);
		new Effect.Move(_CURRENTDIV, {x:-620,y:0,duration:1});
		
	}
	if(_DIR==0){
		new Effect.Move(_PREDIV, {x:620,y:0,duration:1,afterFinish:_MBC_MOTION_FINISH});
		_CURRENTDIV.setStyle({
			left : '-620px'
		});
		targetDiv.appendChild(_CURRENTDIV);
		new Effect.Move(_CURRENTDIV, {x:620,y:0,duration:1});
	}
	showNav();
}

function traceDiv(div){
	alert(div.id);
	var arr=div.childElements()
	for(var i=0;i<arr.length;i++){
		alert(arr[i].id);
	}
	targetDiv.remove(div);
	_CURRENTDIV.setStyle({
		left:'0px'
	});
	if(div!=targetDiv){
		traceDiv(targetDiv);
	}
}

function removeAllDivs(){
	if(_TOTALCOUNT>3){
		showNav();
	}
}
function drawContainerDiv(ob){
	var randomnumber=Math.floor(Math.random()*99999)
	var topDiv = new Element('div', {
		className : 'T3PanimationPanel_type1',
		id : 'animationPanel'+ob.id
	});
	if(_CURRENT_ID==ob.id){
		topDiv.setStyle({
			backgroundImage:'url(/sketch-star/ss2/img/layout/selected-animation-bg-v2.gif)'
		});
	}
	if(ob.id<1){
		topDiv.setStyle({
			backgroundImage:'none',
			backgroundColor:'#FFFFFF'
		});
		
		return topDiv;
	}
	//thumbnail image
	var thumbNailDiv = new Element('div', {
		className : 'T3PanimationThumb_type1',
		style : 'z-index:2'
	});
	// thumbnail link
	var thumbNailLink = new Element('a', {
		href : '/sketch-star/en/player.php?id='+ob.id
	});
	thumbNailLink.onmouseover = function(event) {
   		FadeInPlayBtn(ob.id+"_"+randomnumber);
	}
	thumbNailLink.onmouseout = function(event) {
   		FadeOutPlayBtn(ob.id+"_"+randomnumber);
	}
	// thumbnail image
	var thumbNailImage = new Element('img', {
		src: "/sketch-star/ss2/getThumb.php?id="+ob.id,
		title : "See '"+ob.titleFull+"' by "+ob.authorNameFull
	});
	
	thumbNailLink.appendChild(thumbNailImage);
	thumbNailDiv.appendChild(thumbNailLink);
	topDiv.appendChild(thumbNailDiv);
	var titleDiv=new Element('div', {
		className : 'T3PanimationTitle_type1'
	});
	var titleLink = new Element('a', {
		href : '/sketch-star/en/player.php?id='+ob.id,
		title : "See '"+ob.titleFull+"' by "+ob.authorNameFull
	});
	titleLink.className='buttonLink';
	titleLink.update(ob.title);
	titleDiv.appendChild(titleLink);
	topDiv.appendChild(titleDiv);	
	var starImageDiv = new Element('div', {
		className : 'T3PauthorThumb_type1'
	});
	var starImage = new Element('img', {
		src: "/sketch-star/ss2/img/layout/top3panel/star15x15.png",
		title : "Votes"
	});
	var starsDiv = new Element('div', {
		className : 'T3PauthorName_type1'
	});
	starsDiv.update(ob.votes);
	starImageDiv.appendChild(starImage);
	topDiv.appendChild(starImageDiv);
	topDiv.appendChild(starsDiv);
	var viewsImageDiv = new Element('div', {
		className : 'T3PStar_type1'
	});
	var viewsImage = new Element('img', {
		src: "/sketch-star/ss2/img/layout/top3panel/eye15x15.png",
		title : "Views"
	});
	var viewsDiv = new Element('div', {
		className : 'T3PVotes_type1'
	});
	viewsDiv.update(ob.views);
	viewsImageDiv.appendChild(viewsImage);
	topDiv.appendChild(viewsImageDiv);
	topDiv.appendChild(viewsDiv);
	/*var finishedImageDiv = new Element('div', {
		className : 'T3PClock_type1'
	});
	var finishedImage = new Element('img', {
		src: "/sketch-star/ss2/img/layout/icons/calendar15x15.png",
		title : "Publishing Date"
	});*/
	var finishedDiv = new Element('div', {
		className : 'T3Date_type1'
	});
	finishedDiv.update(ob.finished);
	/*finishedImageDiv.appendChild(finishedImage);
	topDiv.appendChild(finishedImageDiv);*/
	topDiv.appendChild(finishedDiv)
	var hoverImageDiv = new Element('div', {
		style : 'position:absolute;left:10px;top:23px;z-index:5;display:none;',
		id : "hover"+ob.id+"_"+randomnumber
	});
	var hoverImage = new Element('img', {
		src: "/sketch-star/ss2/img/layout/animationPanel/play_hover_btn_v2.gif",
		title : "See '"+ob.titleFull+"' by "+ob.authorNameFull
	});
	var hoverImageLink = new Element('a', {
		href : '/sketch-star/en/player.php?id='+ob.id,
		title : "See '"+ob.titleFull+"' by "+ob.authorNameFull
	});
	hoverImageLink.onmouseover = function(event) {
   		FadeInPlayBtn(ob.id+"_"+randomnumber);
	}
	hoverImageLink.onmouseout = function(event) {
   		FadeOutPlayBtn(ob.id+"_"+randomnumber);
	}
	hoverImageLink.appendChild(hoverImage);
	hoverImageDiv.appendChild(hoverImageLink);
	topDiv.appendChild(hoverImageDiv);
	if(ob.editorsPick==1){
		var EPImageDiv = new Element('div', {
			className : 'EPBadge',
			style : 'position:absolute;top:3px;left:165px;'
		});
		var EPImage = new Element('img', {
			src: "/sketch-star/ss2/img/layout/top3panel/epBadgeModuleSmall.gif",
			title : "Editor's Pick"
		});
		EPImageDiv.appendChild(EPImage);
		topDiv.appendChild(EPImageDiv);
	}
	return topDiv;
}
function hideNav(){
	$("SS_MAP_LEFT").setStyle({
		display : 'none'
	});
	$("SS_MAP_RIGHT").setStyle({
		display : 'none'
	});
	$("SS_MAP_MIDDLE").setStyle({
		display : 'none'
	});
	$("SS_MAP_nav").setStyle({
		backgroundImage: 'none'
	})	
}
function showNav(){
	$("SS_MAP_LEFT").setStyle({
		display : ''
	});
	$("SS_MAP_MIDDLE").setStyle({
		display : ''
	});
	$("SS_MAP_RIGHT").setStyle({
		display : ''
	});
	$("SS_MAP_nav").setStyle({
		backgroundImage: 'url(/sketch-star/ss2/img/layout/longpanel_footer_v2.gif)'
	});
}
function loadAnimations(list){	
	_ANIMATIONS=new Array();
	if (list !== false) {
		var a = '';
		list.each(function(l) {
			_ANIMATIONS.push(l);
		});
		
		if (_ANIMATIONS.length) {
			drawDivs('SS_MAP_target');
			
		} else {
			alert('No animations to display!');
		}

	} else {
		cont.update('Error loading list of animations: ' + list);
	}
	if(_TOTALCOUNT>3){
		cacheNextResponse();
		if(_DIR==null){
			showNav();
		}

	}else{
		$('SS_MAP_nav').setStyle({display:'none'});
	}
	
	$('SS_MAP_loading').setStyle({
		display : 'none'
	});
}

function loadFirstTime(){
	load(_URL);
}

function load(url){
	hideNav();
	resetCache();
	$('SS_MAP_loading').setStyle({
		display : 'block'
	});
	var myAjax = new Ajax.Request(
		url, {
			method: 'post',
			onSuccess: function(r) {
				var json = r.responseText.evalJSON();
				if (json.success) {
					_TOTALCOUNT=json.totalCount;
					loadAnimations(json.result);
					
				} else {
					loadAnimations(false);
				}
			},
			onFailure: function(r) {
				alert('Failure: ' + r.responseText);
			}
	});
}
Event.observe(window, 'load', loadFirstTime, false);