// Copyright (c) 2006 GoldenOrb Technologies (http://www.golden-orb.com)
// Author: Mark Pentland


var cancel_next_click = false;
var dragging = false;


function Buttonator(mode, img_url,id_suffix, username) {
	
	this.mode = mode;
	this.img_url = img_url;
	
	this.lastStyle=null;
	this.currStyle = null;
	
	this.lastIconStyle=null;
	this.currIconStyle = null;
	
	this.lastFavStyle=null;
	this.currFavStyle = null;
	
	this.s = id_suffix;
	
	this.rollover_mode = false;
	
	this.dirty=false;
	
	this.username = username;
	
	this.allowAdvanced = true;
	
	
	this.init = function(currStyle, currIconStyle, style_id) {
		this.currStyle = currStyle;
		this.currIconStyle = currIconStyle;
		if(this.currIconStyle!=null) {
			this.currIconStyle.value="";
		}
		this.currStyle.value=style_id;
		this.currFavStyle = null;
	};
	
	this.set_busy = function() {
		$("img_view" + this.s).style.display="none";
		$("img_view_loading" + this.s).style.display="";
		this.fix_disabled_layers();
	}
	
	this.update_image = function(dirty){
		if(dirty==null) {
			dirty=true;
		}
		//build the image url from the properties
		//var f = $("form");
		var params = Form.serialize("form" + this.s);
		this.set_busy();
		if(dirty) {
			this.dirty = true;
		}
		$("img_view" + this.s).src = this.img_url + "?" + params + "&force=" + new Date().getTime();
	};
	
	this.save_configuration = function() {
		
	};
	
	this.set_color = function(el) {
		var _this = this;
		eld = $(el + "_display");
		if(eld == null) {
			alert("Unable to get '" + el + "_display'");
			return;
		}
		showColorPicker(eld,$(el), function(c) { _this.color_callback(c, el); });
	};
	
	this.color_callback = function(color, el) {
		$(el + "_display").style.backgroundColor = color;
		this.update_image();
	};
	
	//control font capabilities (bold/italic combinations)
	this.font_change = function(font_type) {
		var _this = this;
		if(font_type=='default') {
			var caps = parseInt($("font" + this.s).options[$("font" + this.s).selectedIndex].value);
			
			var all_enabled = true;
			if((caps & 1) == 1) {
				$("bold" + this.s).enabled=true;
			} else {
				$("bold" + this.s).enabled=false;
				all_enabled=false;
			}   
			if((caps&2) == 2) {
				$("italics" + this.s).enabled=true;
			} else {
				$("italics" + this.s).enabled=false;
				all_enabled=false;
			}
			if(all_enabled) {
				if((caps&4) == 4) {
					$("italics" + this.s).onclick = function() { _this.update_image(); };
					$("bold" + this.s).onclick = function() {  _this.update_image(); };
				} else {
					$("italics" + this.s).onclick = function() {
						if($("italics" + this.s).checked) {
							$("bold" + this.s).checked = false;
						}
						_this.update_image();
					}    
					$("bold" + this.s).onclick = function() {
						if($("bold" + this.s).checked) {
							$("italics" + this.s).checked = false;
						}
						_this.update_image();
					}
				}
			}
		}
		this.update_image();
	};
	
	this.image_loaded = function() {
		if($("img_view" + this.s).src!="") {
			$("img_view_loading" + this.s).style.display="none";
			$("img_view" + this.s).style.display="";
			this.fix_disabled_layers();
		}
	};
	
	
	this.update_strokeffect = function(el, notify) {
		if(notify == null) {
			notify = true;
		}
		if(el.checked) {
			$("stroke_width_container" + this.s).style.display="";
			$("stroke_effect_color_div" + this.s).style.display="";
		} else {
			$("stroke_width_container" + this.s).style.display="none";
			$("stroke_effect_color_div" + this.s).style.display="none";
		}
		this.update_effect_container();
		if(notify) {
			this.update_image();
		}
	};
	
	
	this.update_effect = function(el, notify) {
		if(notify == null) {
			notify = true;
		}
		if(el == null) {
			alert("el is null");
			return;
		}
		if(el.value=='none') {
			$(el.name + "_color_div" + this.s).style.display="none";
			$(el.name + "_params_container" + this.s).style.display="none";
			$(el.name + "_heading" + this.s).className='propertiesoff';
		} else {
			$(el.name + "_heading" + this.s).className='propertieson';
			if(el.value=='drop_shadow') {
				$(el.name + "_color_caption" + this.s).innerHTML = "Drop Shadow";
				$(el.name + "_dropshadow_params_container" + this.s).style.display="";
				$(el.name + "_backglow_params_container" + this.s).style.display="none";
			} else {
				$(el.name + "_color_caption" + this.s).innerHTML = "Outer Glow";
				$(el.name + "_backglow_params_container" + this.s).style.display="";
				$(el.name + "_dropshadow_params_container" + this.s).style.display="none";
			}
			$(el.name + "_color_div" + this.s).style.display="";
			$(el.name + "_params_container" + this.s).style.display="";
		}
		this.update_effect_container();
		if(notify) {
			this.update_image();
		}
	};
	
	this.update_effect_container = function() {
		if(($("font_effect_color_div" + this.s).style.display=="none")&&($("button_effect_color_div" + this.s).style.display=="none")&&($("icon_effect_color_div" + this.s).style.display=="none")&&($("stroke_effect_color_div" + this.s).style.display=="none")) {
			$("effect_colors" + this.s).style.display="none";
		} else {
			$("effect_colors" + this.s).style.display="";
		}
	};
	
	this.update_containers = function() {
		this.update_strokeffect($('stroke_effect' + this.s),false);
		this.update_effect($('font_effect' + this.s),false);
		this.update_effect($('button_effect' + this.s),false);
		this.update_effect($('icon_effect' + this.s),false);
		this.update_icon_position($('select_icon_pos_' + this.s),false);
		this.update_effect_container();
	};
	
	this.update_icon_position = function(el,refresh_image) {
		if(el.options[el.selectedIndex].value=="1") {
			$("iconposition" + this.s).style.display="";
			$("icon_position_heading" + this.s).className='propertieson';
		} else {
			$("iconposition" + this.s).style.display="none";
			$("icon_position_heading" + this.s).className='propertiesoff';
		}
		if((refresh_image)||(refresh_image==null)) {
			this.update_image();
		}
	};
	
	this.template_dropped = function(element){ 
		var type_id = document.getElementById(element.id + 't_type')
		if(type_id.value=="1") {
			this.change_button_template(element);
		} else if(type_id.value=="2") {
			this.change_favorite_template(element);
		} else {
			this.change_icon_template(element);
		}
	};
	
	this.change_button_template = function(element){ 
		var styleid = document.getElementById(element.id + 'id')
		if(this.currStyle.value != styleid.value){   
			this.currStyle.value = styleid.value;
			var newStyle = element; 
			if(!this.rollover_mode) {
				new Effect.Fade(element,{duration:0});     
				if(this.lastStyle){
					var element = this.lastStyle
					new Effect.Appear(element,{});
				}
			}
			this.lastStyle = newStyle;    
			this.set_busy();
			//alert("changing template, s=" + this.s);
			new Ajax.Request('/home/set_template', {asynchronous:true, evalScripts:true, parameters:"t_id=" + this.currStyle.value + "&s=" + this.s});
		}
    };
	
	this.change_icon_template = function(element){ 
		
		if(!this.allowAdvanced) {
			alert("Only members can use icons on all images. Guests can only use icons on the first button.");
			return;
		}
		var styleid = document.getElementById(element.id + 'id')
		//alert(styleid.value + ":" + this.currIconStyle.value);
		if(this.currIconStyle.value != styleid.value){   
			//alert("i");
			this.currIconStyle.value = styleid.value;
			var newStyle = element; 
			if(!this.rollover_mode) {
				new Effect.Fade(element,{duration:0});
				if(this.lastIconStyle){
					var element = this.lastIconStyle
					new Effect.Appear(element,{});
				}
			}
			this.lastIconStyle = newStyle;    
			this.set_busy();
			new Ajax.Request('/home/set_icon', {asynchronous:true, evalScripts:true, parameters:"i_id=" + this.currIconStyle.value + "&s=" + this.s});
		}
    };
	
	this.change_favorite_template = function(element) { 
		var styleid = document.getElementById(element.id + 'id')
		if(this.currFavStyle != styleid.value){   
			this.currFavStyle = styleid.value;
			var newStyle = element; 
			new Effect.Fade(element,{duration:0});     
			if(this.lastFavStyle){
				var element = this.lastFavStyle
				new Effect.Appear(element,{});
			}
			this.lastFavStyle = newStyle;    
			if(this.lastStyle){
				var element = this.lastStyle;
				new Effect.Appear(element,{});
				this.lastStyle = null;
			}
			this.set_busy();
			new Ajax.Request('/home/set_favorite', {asynchronous:true, evalScripts:true, parameters:"f_id=" + this.currFavStyle});
		}
    };
	
	this.set_rollover_mode = function(mode) {
		if((mode)&&(!this.rollover_mode)) {
			//return hidden buttons/icons
			if(this.lastIconStyle){
				var element = this.lastIconStyle
				new Effect.Appear(element,{});
			}
			if(this.lastStyle){
				var element = this.lastStyle
				new Effect.Appear(element,{});
			}
		} else if((!mode)&&(this.rollover_mode)) {
			//hide used buttons/icons
			if(this.lastIconStyle){
				var element = this.lastIconStyle
				new Effect.Fade(element,{duration:0});
			}
			if(this.lastStyle){
				var element = this.lastStyle
				new Effect.Fade(element,{duration:0});
			}
		}
		this.rollover_mode = mode;
	};
	
	this.update_button_category = function(el) {
		var id = el.options[el.selectedIndex].value;
		new Ajax.Updater('buttonsdisplay', '/home/getbuttons?page=1&bcid=' + id, {asynchronous:true, evalScripts:true});
	};
	
	this.update_icon_category = function(el) {
		var id = el.options[el.selectedIndex].value;
		new Ajax.Updater('iconsdisplay', '/home/geticons?page=1&icid=' + id, {asynchronous:true, evalScripts:true});
	};
	
	this.add_favorite = function(from_code) {
		if(from_code) {
			new Ajax.Request('/home/add_favorite?from_code=true', {asynchronous:true, evalScripts:true});
		} else {
			new Ajax.Request('/home/add_favorite', {asynchronous:true, evalScripts:true});
		}
		$('favstab').style.display="";
		favorites_click();
	};
	
	this.update_favorite = function() {
		new Ajax.Request('/home/save_favorite?f_id=' + this.currFavStyle, {asynchronous:true, evalScripts:true});
	};
	
	this.delete_favorite = function() {
		new Ajax.Request('/home/delete_favorite?f_id=' + this.currFavStyle, {asynchronous:true, evalScripts:true})
	};
	
	this.stop_favorite = function() {
		if(this.lastFavStyle){
			var element = this.lastFavStyle
			new Effect.Appear(element,{});
		}
		this.lastFavStyle = null;  
		this.currFavStyle  = null;  
		$('fav_menu').style.display="none";
	}
	
	this.rollover = function(id) {
		$(id + "_ro").style.display="";
		$(id).style.display="none";
	};
	
	this.rollout = function(id) {
		$(id).style.display="";
		$(id + "_ro").style.display="none";
	};
	
	this.show_code = function() {
		var id = new Date().getTime();
		if((this.mode==0)||(this.currFavStyle==null)) {
			if(this.rollover_mode) {
				script = "<img id=\"" + id + "\" src=\"button.gif\" border=\"0\" onmouseover=\"document.getElementById('" + id + "_ro').style.display='';document.getElementById('" + id + "').style.display='none';\" />";
				script += "<img id=\"" + id + "_ro\" src=\"button_ro.gif\" border=\"0\" onmouseout=\"document.getElementById('" + id + "').style.display='';document.getElementById('" + id + "_ro').style.display='none';\" style=\"display:none;\" />"
			} else {
				script = "<img src=\"button.gif\" border=\"0\"/>";
			}
			if(this.mode==0) {
				$('not_logged_in').style.display='';
				$('not_a_favorite').style.display='none';
			} else {
				$('not_a_favorite').style.display='';
				$('not_logged_in').style.display='none';
			}
			$('is_a_favorite').style.display='none';
		} else {
			if(this.dirty) {
				if(confirm("Do you wish to save your favorite first? (Your updates will not appear correctly otherwise)")) {
					new Ajax.Request('/home/save_favorite?f_id=' + this.currFavStyle, {asynchronous:true, evalScripts:true});
				}
			}
			new Ajax.Updater('fav_refs', '/home/get_favorite_refs?f_id=' + this.currFavStyle, {asynchronous:true, evalScripts:true});
			
			var script = "";
			if(this.rollover_mode) {
				script = "<img id=\"" + id + "\" src=\"http://fav.buttonator.com/" + this.username + "/" + this.currFavStyle + "/" + encodeURIComponent($('text').value) + ".gif\" border=\"0\" onmouseover=\"document.getElementById('" + id + "_ro').style.display='';document.getElementById('" + id + "').style.display='none';\" />";
				script += "<img id=\"" + id + "_ro\" src=\"http://fav.buttonator.com/" + this.username + "/" + this.currFavStyle + "/ro/" + encodeURIComponent($('text').value) + ".gif\" border=\"0\" onmouseout=\"document.getElementById('" + id + "').style.display='';document.getElementById('" + id + "_ro').style.display='none';\" style=\"display:none;\" />";
			} else {
				script = "<img src=\"http://fav.buttonator.com/" + this.username + "/" + this.currFavStyle + "/" + encodeURIComponent($('text').value) + ".gif\" border=\"0\" />";
			}
			$('not_logged_in').style.display='none';
			$('not_a_favorite').style.display='none';
			$('is_a_favorite').style.display='';
			
		}
		$('code_no_link').value = script;
		$('code_area').value = script;
		$('showcode').style.display="";
		update_url($('link'));
	};
	
	this.show_batch = function() {
		$('text_lines').value = $('text').value;
		$('showbatch').style.display="";
		//if(this.mode==0) {
		//	$('batch_non_user').style.display="";
		//	$('batch_user').style.display="none";
		//} else {
			$('batch_user').style.display="";
			$('batch_non_user').style.display="none";
		//}
	};
	
	this.batch_download = function() {
		window.location = '/home/download_batch?text=' + encodeURIComponent($('text_lines').value);
	};
	
	this.show_subproperties = function() {
		if($("propertiesadvanced" + this.s).style.display=="none") {
			$("propertiesadvanced" + this.s).style.display="";
			$("propertiessimple" + this.s).style.display="none";
			if(!this.allowAdvanced) {
				this.layer_disabled("propertiesadvanced" + this.s);
			}
		} else {
			$("propertiesadvanced" + this.s).style.display="none";
			$("propertiessimple" + this.s).style.display="";
			$("propertiesadvanced" + this.s + "_disabled").style.display="none";
		}
		this.fix_disabled_layers();
	};
		
	this.show_subcolor = function() {
		if($("coloradvanced" + this.s).style.display=="none") {
			$("coloradvanced" + this.s).style.display="";
			$("colorsimple" + this.s).style.display="none";
			if(!this.allowAdvanced) {
				this.layer_disabled("coloradvanced" + this.s);
			}
		} else {
			$("coloradvanced" + this.s).style.display="none";
			$("colorsimple" + this.s).style.display="";
			$("coloradvanced" + this.s + "_disabled").style.display="none";
			$("coloradvanced_height_cludge").style.height="";
		}
		this.fix_disabled_layers();
	}
		
	this.layer_disabled = function(id) {
		var div = $(id);
		var disLayer = $(id + "_disabled");
		
		var xy = this.getXY(div);
		
		disLayer.style.left = xy["x"] + "px";
		disLayer.style.top = xy["y"] + "px";
		
		if(div.clientWidth==0) {
			//stupid ie...
			var botbutton = $(id + "_bottom");
			var left = parseInt(xy["x"]);
			var top = parseInt(xy["y"]);
			xy = this.getXY(botbutton);
			
			var height = xy["y"] - top;
			if(height < 100) {
				if($(id + "_height_cludge")==null) {
					alert("cannot find " + id + "_height_cludge");
				} else {
					$(id + "_height_cludge").style.height="100px";
				}
				xy = this.getXY(botbutton);
			}
			//luckily we have abutton at the bottom right of this div...
			disLayer.style.width = (xy["x"] - left + 83)  + "px";
			disLayer.style.height = (xy["y"] - top + 20) + "px";
		} else {
			disLayer.style.width = div.clientWidth + "px";
			if(div.clientHeight < 100) {
				$(id + "_height_cludge").style.height="100px";
			}
			disLayer.style.height = div.clientHeight + "px";
		}
		disLayer.style.display="";
		
		//$(id + "_simple").style.zIndex = 9999;
	};
	
	this.getXY =  function(el) {
		var x = el.offsetLeft;
		var y = el.offsetTop;
		if (el.offsetParent != null) {
			var pos = this.getXY(el.offsetParent);
			x += pos.x;
			y += pos.y;
		}
		return {x: x, y: y}
	};
	
	this.fix_disabled_layers = function() {
		if(!this.allowAdvanced) {
			if($("coloradvanced" + this.s).style.display!="none") {
				this.layer_disabled("coloradvanced" + this.s);
			}
			if($("propertiesadvanced" + this.s).style.display!="none") {
				this.layer_disabled("propertiesadvanced" + this.s);
			}
		}
		if((this.mode!=1)&&($("buttons_disabled")!=null)) {
			if($("buttons_disabled").style.display!="none") {
				this.layer_disabled("buttons");
			}
		}
	};
	
	this.setAllowAdvanced = function(allow) {
		this.allowAdvanced = allow;
		
		if($("coloradvanced" + this.s).style.display!="none") {
			//alert($("coloradvanced" + this.s).style.display);
			if(!this.allowAdvanced) {
				this.layer_disabled("coloradvanced" + this.s);
			} else {
				$("coloradvanced" + this.s + "_disabled").style.display="none";
			}
		}
		if($("propertiesadvanced" + this.s).style.display!="none") {
			if(!this.allowAdvanced) {
				this.layer_disabled("propertiesadvanced" + this.s);
			} else {
				$("propertiesadvanced" + this.s + "_disabled").style.display="none";
			}
		}
		if(this.allowAdvanced) {
			this.set_cbo_vis("");
		} else {
			this.set_cbo_vis("none");
		}
	};
	
	this.disable_buttons = function() {
		this.layer_disabled("buttons");
	};
	
	this.set_cbo_vis = function(vis) {
		this.set_cbo_vis2("font_effect" + this.s, vis);
		this.set_cbo_vis2("button_effect" + this.s, vis);
		this.set_cbo_vis2("icon_effect" + this.s, vis);
	};
	
	this.set_cbo_vis2 = function(id,vis) {
		$(id).style.display=vis;
		$(id + "_ds_blur").style.display=vis;
		$(id + "_ds_dir").style.display=vis;
	};
}