var thumbHeight = 80;
var thumbWidth = 70;
var thumbCount = 10;

var thumbsMove;

var thumbTipsInited = false;
var thumbsSets = new Array();
var sets;
var lastSetIndex = -1;
var thumbTipTimer;
var tooltipMove;
var thumbsMove;

function thumbTip(id, count){
	this.id = id;
	this.setName = "thumbsSet" + id;
	this.set = $(this.thumbsSetName);
   this.count = count;
}

function thumbTipInit(){
	Element.hide('thumbTips');

	t = new thumbTip("BrandDesign", 4);
	thumbsSets.push(t);
	t = new thumbTip("DigitalDesign", 5);
	thumbsSets.push(t);
	t = new thumbTip("IconDesign", 5);
	thumbsSets.push(t);
	t = new thumbTip("InformationDesign", 3);
	thumbsSets.push(t);
	t = new thumbTip("Other", 3);
	thumbsSets.push(t);

	thumbTipsInited = true;
}

function tip(li, setIndex, tipIndex){

	if(!thumbTipsInited) return false;
	clearTimeout(thumbTipTimer);

	var setName = thumbsSets[setIndex].setName;
	var set = thumbsSets[setIndex].set;

	/* Change set ? */
	var isSetChange = (setIndex == lastSetIndex) ? false : true;
	lastSetIndex = setIndex;

	/* Position Thumbtip along with li */
	var dimensions = Element.getDimensions(li);
	var width = dimensions.width;
	var height = dimensions.height;
	var pos = findPos(li);
	var xPos = pos[0] - thumbWidth - 15 ;
	var yPos = pos[1] + height / 2 - thumbHeight / 2;

   Element.show('thumbTips');
	Element.setStyle('thumbTips', {left: xPos + "px"});
   if(tooltipMove) tooltipMove.cancel();
	if(isSetChange){
		Element.setStyle('thumbTips', {top: yPos + "px"});
		tooltipMove = new Effect.Parallel(
			[
				new Effect.MoveY("thumbTips", {
				y: yPos,
				mode: 'absolute',
				sync: true
			}),
				new Effect.Opacity("thumbTips", {
				from: $("thumbTips").getOpacity(),
				to: 1.0,
				sync: true
			})],
			{
				duration: 0.1,
				fps: 50,
				transition: Effect.Transitions.sinoidal
			}
			);
	}else{
		tooltipMove = new Effect.Parallel(
			[
				new Effect.MoveY("thumbTips", {
				y: yPos,
				mode: 'absolute',
				sync: true
			}),
				new Effect.Opacity("thumbTips", {
				from: $("thumbTips").getOpacity(),
				to: 1.0,
				sync: true
			})],
			{
				duration: 0.1,
				fps: 50,
				transition: Effect.Transitions.sinoidal
			}
			);
	}

   /* Slide Thumbs */
	//var yNew = - (thumbsSets[setIndex].count-1) * thumbHeight + tipIndex * thumbHeight;
	//var yNew = - tipIndex * thumbHeight;

   yNew = - tipIndex * thumbHeight; 

   if(isSetChange){
		for(i=0; i<thumbsSets.length; i++){
			Element.hide(thumbsSets[i].setName);
		}
		Element.show(setName);
		//Element.setStyle(setName, {top: yNew + "px"});
	}else{

	}

	//thumbsMove = new Effect.MoveY(setName,{duration: 0 , fps: 50, transition: Effect.Transitions.sinoidal, y: yNew, mode: 'absolute'});
   Element.setStyle(setName, {position: "absolute"});
	Element.setStyle(setName, {top: yNew + "px"});
	/* Misc */

}

function unTip(){
	if(!thumbTipsInited) return false;
	thumbTipTimer = setTimeout("clearTip();", 50);
}

function clearTip(){
	if(!thumbTipsInited) return false;
	clearTimeout(thumbTipTimer);
	new Effect.Fade("thumbTips", {
				duration: 0.15,
				fps: 25,
				transition: Effect.Transitions.sinoidal
				});
	lastSetIndex = -1;
}

function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}