var TreeWidget = function(treeId, icons, decoration, userData){
	this.treeId = treeId;
	this.icons = icons;
	this.decoration = decoration;
	this.userData = userData;
}

TreeWidget.prototype ={
	
	menu: null,
	loaded: false,
	
	init: function(){
		
		if(this.loaded){
			return;
		}
		
		Event.addListener("treeArea", 'click', this.onTreeClick, this, true);
		this.createMenu();
		
		this.createRollover();
		
		var instructions = "Click on my tree to help me decorate it! Merry Christmas!";
		this.setInstructions(instructions);
		
		this.putDecoration();
		
		this.loaded = true;
		
	},
	
	putDecoration: function(){
		
		for(var i=0; i < this.decoration.length; i++){
			var dec = this.decoration[i];
			this.addIcon(dec.position_left, dec.position_top, dec.wtree_icon_id, dec.username, dec.user_id);
		}
		
	},
	
	onTreeClick: function(e){
		
		if(this.userData.userId == 0){
			alert("Meek!!! Please sign in to decorate my tree");
			return;
		}
		
		if(this.userData.hasGiven == true){
			alert("You have already placed an ornament on my tree!");
			return;
		}
		
		this.pos = Event.getXY(e);

		this.showMenu();
		
	},
	
	createMenu: function(){
		
		var div = document.createElement('div');
		div.style.width = "120px";
		div.style.backgroundColor = "white";
		div.style.position = "absolute";
		div.style.zIndex = 20;
		div.style.visibility = "hidden";
		div.style.border = "lightblue 3px solid";
		
		for(var i=0; i < this.icons.length; i++){
			var div2 = document.createElement('div');
			div2.style.cssFloat = "left";
			div2.style.width = "30px";
			div2.style.marginTop = "5px";
			var img = new Image();
			img.style.cursor = "pointer";
			img.src = domain + "resources/images/tree/" + this.icons[i].icon_file;
			div2.appendChild(img);
			div.appendChild(div2);
			Event.addListener(img, 'click', this.menuClick.createDelegate(this,  [this.icons[i].wtree_icon_id, img]));
		}
		
		var clearer = document.createElement('div');
		clearer.className = "clearer";
		div.appendChild(clearer);
		
		$('treeImageBox').appendChild(div);

		this.menu = div;
		
	},
	
	showMenu: function(){
		Dom.setXY(this.menu, this.pos);
		this.menu.style.visibility = "";
	},
	
	hideMenu: function(){
		this.menu.style.visibility = "hidden";
	},
	
	menuClick: function(iconId, img){
		
		this.hideMenu();
		
		var offsetLeft = img.offsetWidth/2;
		
		var imgPos = Dom.getXY('treeImageBox');
		
		var left = this.pos[0] -imgPos[0] - offsetLeft;
		var top = this.pos[1] -imgPos[1];
		
		this.addIcon(left, top, iconId, this.userData.username, this.userData.userId);
		
		this.sendIcon(iconId, left, top);
		
		this.userData.hasGiven = true;
		
	},
	
	getIconOffset: function(iconId){
		var offset = 0;
		for(var i=0; i < this.icons.length; i++){
			if(this.icons[i].wtree_icon_id == iconId){
				offset = i;
				break;
			}
		}
		return offset;
	},
	
	sendIcon: function(iconId, left, top){
		
		Connect.asyncRequest(
			'POST',  domain + 'widgets/puttreedecoration/' + this.treeId,
			null, "icon="+iconId + "&left=" + left + "&top=" + top
		);
		
	},
	
	addIcon: function(left, top, iconId, username, userId){
		
		var offset = this.getIconOffset(iconId);
		
		var img = document.createElement('img');
		img.src= domain + "resources/images/tree/" + this.icons[offset].icon_file;
		img.style.position = "absolute";
		img.style.top = top + "px";
		img.style.left = left + "px";
		img.style.cursor = "pointer";
		
		$('treeImageBox').appendChild(img);
		
		Event.addListener(img, 'mousemove', this.showWho.createDelegate(this, [username], true));
		Event.addListener(img, 'mouseout', this.hideWho.createDelegate(this));
		Event.addListener(img, 'click', this.visitPage.createDelegate(this, [userId]));

	},
	
	setInstructions: function(text){
		$('treeInstructions').innerHTML = text;
	},
	
	showWho: function(e, args, petName){
		var pos = Event.getXY(e);
		pos[0]+= 10;
		pos[1] += 10;
		Dom.setXY(this.rollover, pos);
		this.rollover.innerHTML = "From: " + petName;
		this.rollover.style.visibility = "";
	},
	
	hideWho: function(){
		this.rollover.style.visibility = "hidden";
	},
	
	visitPage: function(userId){
		location.href = domain + "user/profile/" + userId;
	},
	
	createRollover: function(){
		var div = document.createElement('div');
		div.style.backgroundColor = "white";
		div.style.position = "absolute";
		div.style.zIndex = 20;
		div.style.padding = "5px";
		div.style.visibility = "hidden";
		div.style.border = "lightblue 3px solid";
		div.style.color = "black";
		
		this.rollover = div;
		
		$('treeImageBox').appendChild(div);
		
	}
}