navigation_blocked = false;
last_date = 0;
// event bubbling global variables
bubbling_stack = [];
last_event = null;
originating_event = null;
bubbling = false;
end_bubbling = "#contentHolder";
end_bubbling2 = "div#contentHolder";
//end_bubbling = "body";
css_backup = null;

default_properties = {
	"float":{"container":"display"},"clear":{"container":"display"},"display":{"container":"display"},
	"position":{"container":"positioning"},"top":{"container":"positioning"},"right":{"container":"positioning"},"bottom":{"container":"positioning"},"left":{"container":"positioning"},
	"width":{"container":"dimensions"},"height":{"container":"dimensions"},
	"text-align":{"container":"text_structure"},"line-height":{"container":"text_structure"},
	"background":{"container":"background"},"opacity":{"container":"background"},
	"margin":{"container":"margin","hidden":"true"},"margin-left":{"container":"margin","hidden":"false"},"margin-right":{"container":"margin","hidden":"false"},"margin-top":{"container":"margin","hidden":"false"},"margin-bottom":{"container":"margin","hidden":"false"},
	"color":{"container":"font"},
	"font-family":{"container":"font"},
	"font-size":{"container":"font"},
	"text-decoration":{"container":"font"},
	"font-weight":{"container":"font"},
	"border":{"container":"border"},"border-left":{"container":"border","hidden":"true"},"border-right":{"container":"border","hidden":"true"},"border-top":{"container":"border","hidden":"true"},"border-bottom":{"container":"border","hidden":"true"},
	"-moz-border-radius":{"container":"border"},
	"padding":{"container":"padding", "hidden":"true"},"padding-left":{"container":"padding","hidden":"false"},"padding-right":{"container":"padding","hidden":"false"},"padding-top":{"container":"padding","hidden":"false"},"padding-bottom":{"container":"padding","hidden":"false"}
}

iphone_fonts = [
	 "AppleGothic","HiraKakuProN-W6","HiraKakuProN-W3","ArialUnicodeMS","STHeitiK-Medium","STHeitiK-Light",
	 "DBLCDTempBlack","Helvetica-Oblique","Helvetica-BoldOblique","Helvetica","Helvetica-Bold","MarkerFelt-Thin",
	 "TimesNewRomanPSMT","TimesNewRomanPS-BoldMT","TimesNewRomanPS-BoldItalicMT","TimesNewRomanPS-ItalicMT","Verdana-Bold",
	 "Verdana-BoldItalic","Verdana","Verdana-Italic","Georgia-Bold","Georgia","Georgia-BoldItalic","Georgia-Italic",
	 "ArialRoundedMTBold","TrebuchetMS-Italic","TrebuchetMS","Trebuchet-BoldItalic","TrebuchetMS-Bold","STHeitiTC-Light",
	 "STHeitiTC-Medium","GeezaPro-Bold","GeezaPro","Courier","Courier-BoldOblique","Courier-Oblique","Courier-Bold",
	 "ArialMT","Arial-BoldMT","Arial-BoldItalicMT","Arial-ItalicMT","STHeitiJ-Medium",
	 "STHeitiJ-Light","ArialHebrew","ArialHebrew-Bold","CourierNewPS-BoldMT","CourierNewPS-ItalicMT",
	 "CourierNewPS-BoldItalicMT","CourierNewPSMT","Zapfino","AmericanTypewriter","AmericanTypewriter-Bold",
	 "STHeitiSC-Medium","STHeitiSC-Light","HelveticaNeue","HelveticaNeue-Bold","Thonburi-Bold","Thonburi"
]

initialize_theming();

function parse_html(){
	css_tree = (typeof theme != "undefined") ? theme : {};
	var the_root = "#contentHolder";
	var root_node = $("#contentHolder");
	var forbidden_nodes = {"script":"","style":"", "br":""};
	
	var drill_down = function(node,parent_selector){
		var parent = $(node).parent();
		var children = $(node).children();
		var selector = "";
		var class_selector = "";
		var class_selector2 = "";
		var general_selector = ((parent_selector != "") ? parent_selector + " > " : "") + $(node)[0].nodeName.toLowerCase();
		
		var selector_array = [];
		
		if(parent_selector != "")
		css_tree[general_selector] = (typeof theme[general_selector] != "undefined") ? theme[general_selector] : {};
		
		var skip_classes = ["selected","hidden", "widget_configuration", "orderable", "content_configuration", "content_actions"];
		var classes = $(node).attr("class");
		if(typeof classes != "undefined") classes = classes.split(" ")[0];
		for(var i = 0; i < skip_classes.length; i++){
			classes = classes.replace(skip_classes[i],"");
		}
		
		if($(node).attr("id") != ""){
			selector = general_selector + "#" + $(node).attr("id");
			selector_array.push(selector);
		}
		else if(typeof classes == "string" && classes != "") selector = general_selector + "." + classes;
		else selector = general_selector;
		css_tree[selector] = (typeof theme[selector] != "undefined") ? theme[selector] : {};
		
		if(typeof classes == "string" && classes != "") class_selector2 = the_root + " " + $(node)[0].nodeName.toLowerCase() + "." + classes;
		if(typeof classes == "string" && classes != "") class_selector = general_selector  + "." + classes;
		
		if((class_selector != "") && (class_selector != selector)){
			selector_array.push(class_selector);
			selector_array[selector_array.length] = class_selector;
			css_tree[class_selector] =  (typeof theme[class_selector] != "undefined") ? theme[class_selector] : {};
		}
		if((class_selector2 != "") && (class_selector2 != selector)){
			selector_array.push(class_selector2);
			selector_array[selector_array.length] = class_selector2;
			css_tree[class_selector2] =  (typeof theme[class_selector2] != "undefined") ? theme[class_selector2] : {};
		}
		selector_array.push(general_selector)
		
		if(selector_array.length < 2) selector_array = null;
		$(node).data("selectors",selector_array);
		
		for(var i = 0; i < children.length; i++){
			var child = children[i];
			if(!($(child)[0].nodeName.toLowerCase() in forbidden_nodes)) drill_down(child,selector);
		}	
	}
	drill_down(root_node,"");
}


// because of css inheritance, we need to make sure that the most general styling is applied first
function reorder_css(){
	ordered_css = [];
	depth_index = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] // indicates the start positions for elements of ith depth
														      // i.e: depth_index[3] = start position for css elem of depth 3
	for(var elem in css_tree){
		var tokens = elem.split(">");
		var elem_depth = tokens.length - 1;
		if((tokens[tokens.length - 1]).split("#").length > 1){
			if(depth_index[elem_depth] > ordered_css.length ){
				for(var j = ordered_css.length; j < depth_index[elem_depth]; j++){
					ordered_css[j] = "";
				}
			}
			ordered_css.splice(depth_index[elem_depth],0,elem);
			for(var i = elem_depth + 1; i< depth_index.length; i++){
				depth_index[i]++;
			}
		}
	}
	for(var elem in css_tree){
		var tokens = elem.split(">");
		var elem_depth = tokens.length - 1;
		if((tokens[tokens.length - 1]).split(".").length > 1){
			if(depth_index[elem_depth] > ordered_css.length ){
				for(var j = ordered_css.length; j < depth_index[elem_depth]; j++){
					ordered_css[j] = "";
				}
			}
			ordered_css.splice(depth_index[elem_depth],0,elem);
			for(var i = elem_depth + 1; i< depth_index.length; i++){
				depth_index[i]++;
			}
		}
	}
}

function remove_border(){
	try{
		$("" + css_backup.elem).css({"border":css_backup.border});
	}
	catch(exception){}
}

function clear_border_backup(){
	try{css_backup.elem = null;}catch(exception){}
}

function fix_floats(){
	var root_node = $("#contentHolder");
	var forbidden_nodes = {"script":"","style":"", "br":""};
	
	var drill_down = function(node,parent_selector){
		var parent = $(node).parent();
		var children = $(node).children();
		for(var i = 0; i < children.length; i++){
			var child = children[i];
			if(!($(child)[0].nodeName.toLowerCase() in forbidden_nodes)) drill_down(child,selector);
		}	
	}
	drill_down(root_node,"");
}

function initialize_navigation(){
	disable_deleting();
	unbind_content_containers();
	$("#style_only").trigger("click");
	navigation_blocked = false;
	bind_elements();
	disable_widget_configuration();
	disable_structure();
	$(".content_configuration").addClass("hidden");
	$("#css_customization").addClass("hidden");
	remove_border();
	$("#contentHolder").css({width:"320px"});
	clear_border_backup();
}

function initialize_content_customization(){
	bind_content_containers();
	navigation_blocked = false;
	bind_elements();
	disable_widget_configuration();
	disable_structure();
	$(".content_configuration").addClass("hidden");
	$("#css_customization").addClass("hidden");
	$(".content_configuration.content").removeClass("hidden");
	remove_border();
	$("#contentHolder").css({width:"320px"});
	clear_border_backup();
	$("#structure_only").trigger("click");
	enable_deleting();
}

function initialize_structure_mode(){
	unbind_content_containers();
	disable_deleting();
	$("#structure_only").trigger("click");
	navigation_blocked = false;
	bind_elements();
	disable_widget_configuration();
	enable_structure();
	$(".content_configuration").addClass("hidden");
	$("#css_customization").addClass("hidden");
	remove_border();
	$("#contentHolder").css({width:"320px"});
	clear_border_backup();
}

function initialize_style_customization(){
	disable_deleting();
	unbind_content_containers();
	//$("#structure_only").trigger("click");
	navigation_blocked = true;
	bind_elements();
	disable_widget_configuration();
	disable_structure();
	$(".content_configuration").addClass("hidden");
	$(".content_configuration.style").removeClass("hidden");
	$("#contentHolder").css({width:"330px"});
	clear_border_backup();
	if(typeof view == "undefined") $("#styling_structure").trigger("click");
}

function initialize_theming(){
	if(typeof css_context == "undefined") css_context="/";
	all_css = eval(theme.toSource());
	theme = theme["default"];
	
	if(typeof theme_id == "undefined") theme_id = "theme";
	parse_html();
	initialize_navigation();
	clean_css();
	reorder_css();
	
	$("#viewing_type .main_nav").click(function(){
		$("#viewing_type a").removeClass("view_selected");
		$(this).addClass("view_selected");
	});
	
	$("#navigate").click(function(){initialize_navigation();});
	$("#structure").click(function(){initialize_structure_mode();})
	$("#customize").click(function(){initialize_style_customization();});
	$("#customize_content").click(function(){initialize_content_customization()});
	
	$("#view_design2",parent.document).click(function(){
		$("#customize").trigger("click");
	});

	$("#view_theme", parent.document).click(function(){
		parent.theme = temp_theme;
		parent.api.update_band_theme(parent.user_band,function(){},function(){});
	});
}

function bind_elements(){
	var untouchables = {"#container":"", "body":"", ".ui-draggable":"", ".selected":""}
	if(typeof theme == "undefined") theme = {}
	
	for(var element in css_tree){
			if(!(element in untouchables )){
				if(navigation_blocked)
				$("" + element).each(function(){
					$(this).bind("click" ,{element:element,properties:default_properties, node:$(this)},bubbling_logic);
				});
				else $("" + element).each(function(){
					$(this).unbind("click", bubbling_logic);
					$(this).unbind("click", outline_element);
				});
			}
	}
}

function bubbling_logic(event){
	$("#css_customization").removeClass("hidden");
	// main bubbling logic methods
	var bubbling_stack_checksum = function(){
		if(bubbling_stack.length == 1) return true;
		for(var i = 0; i < bubbling_stack.length; i++){
			var step = bubbling_stack[i];
			for(var property in step){
				count = step[property];
				if(count != (bubbling_stack.length - i)) return false;
			}
		}
		return true;
	}
	var update_bubbling_stack = function(elem){
		eval("bubbling_stack[bubbling_stack.length] = {\""+elem+"\":0}");
		for(var i = 0; i < bubbling_stack.length; i++){
			var step = bubbling_stack[i];
			for(var property in step){
				step[property]++;
			}
		}
	}
	var in_bubbling_stack = function(elem){
		for(var i = 0; i < bubbling_stack.length; i++){
			var step = bubbling_stack[i];
			for(var property in step){
				if(property == elem) return true;
			}
		}
		return false;
	} 
	
	var self = event.data.element;
	var properties = event.data.properties;
	var node = event.data.node;
	var elements = $(node).data("selectors");
	update_selector_text(self);
	
	var not_bubbling = function(){
		if(elements != null){
			var context_index = 0;
			var context = elements[context_index];
			$(node).data("context_index", context_index);
			$(node).data("context", context);
			old_context = context;
			update_selector_text(context);
		}
		last_node = node;	
		outline_element(event,node);
		originating_event = self;
		eval("bubbling_stack = [{\""+self+"\":1}]");
		bubbling = false;
		render_customization_controls(event);
		event.preventDefault();
		render_sms($(node));
		return false;
	}
	
	if(((originating_event == self)) || bubbling){
		if(self == end_bubbling || self == end_bubbling2){
			update_selector_text(self);
			outline_element(event,node);
			originating_event = null;
			bubbling_stack = [];
			bubbling = false;
			render_customization_controls(event);
			event.preventDefault();
			render_sms($(node));
			return false;
		}
		bubbling = true;
		if(bubbling_stack_checksum()){
			if(in_bubbling_stack(self)){
				if(typeof last_node != "undefined"){
					if(!(last_node === node) && ($(node).data("selectors") != null)){
						return not_bubbling();
					}
				}
				if((typeof $(node).data("context_index") != "undefined")){
					var context_index = $(node).data("context_index");
					context_index += 1;
					if(context_index <= elements.length - 1){
						var context = elements[context_index];
						$(node).data("context_index", context_index);
						$(node).data("context", context);
						update_bubbling_stack(self);
						update_selector_text(context);
						if((typeof old_context != "undefined") && (old_context == context)){
							old_context = context; 
							return true;
						}
						old_context = context;
						render_customization_controls(event);
						outline_element(event,node);
						event.preventDefault();
						render_sms($(node));
						return false;
					}
					/*else{
						 context_index = 0;
					}*/
				}
				return true;
			}
			else{
				if(elements != null){
					var context_index = 0;
					var context = elements[context_index];
					$(node).data("context_index", context_index);
					$(node).data("context", context);
					update_selector_text(context);
				}
				update_bubbling_stack(self);
				render_customization_controls(event);
				outline_element(event,node);
				bubbling = true;
				event.preventDefault();
				render_sms($(node));
				return false;
			}
		}
	}
	return not_bubbling();
}

function update_selector_text(selector){
	var tokens = selector.split(">");
	selector = tokens[tokens.length -1];
	$("#css_selector").text(selector.split(".ui-droppable")[0].split(".ui-draggable")[0]);
}

function outline_element(event,node){
	var context = $(node).data("context") || event.data.element;
	if(css_backup != null){
		if(typeof view != "undefined" && view == "structure")
			$("" + css_backup.elem).css({border:"1px solid #aaa"});	
		else
		{
			var backup_border = (typeof css_backup.border != "undefined") ? css_backup.border : "none";
			$("" + css_backup.elem).css({border:backup_border});
		}
	}
	var element = context.split(".ui-droppable")[0].split(".ui-draggable")[0]; // for now, because of the creeping ui-draggable bug
	var properties = event.data.properties;
	var the_border = "none";
	try{
		the_border = all_css[css_context][element]["border"];
	}catch(exception){}
	css_backup = {elem:element, border:the_border}
	
	// apply outline css
	$(""+element).css({border:"3px dashed #ffac55"});	
}

function render_customization_controls(event){
	clear_controls();
	var node = event.data.node;
	var context = event.data.element;
	if(typeof $(node).data("context") != "undefined")
		context = $(node).data("context").split(".ui-droppable")[0].split(".ui-draggable")[0]
	var element = context;
	var properties = event.data.properties;
	render_control(element,properties);
	$("#css_menu").removeClass("hidden");
	$("#css_selector").removeClass("hidden");
}

function render_control(element, properties){
	var reserved_properties = {"name":null}
	var title = $("<a class='menu_item'></a>");
	$(container).append(title);
	
	for(property in properties){
		var the_container = default_properties[property]["container"]
		var container = $("#" + the_container);
		var value = "";
		try{value = (typeof all_css[css_context][element][property] == "string") ? all_css[css_context][element][property] : "";}catch(exception){}
		if(!(property in reserved_properties))
			var property_control = create_property_control(property,value,element);
		$(container).append(property_control);
	}
	$(container).click(function(){
		$(".customizable_element").addClass("hidden");
		$(this).removeClass("hidden");
		$(".property",$(this)).removeClass("hidden");
		$(title).unbind("mouseout");
	});
}

function rgb2hex(rgb) {  
  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);  
  function hex(x) {  
   hexDigits = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");  
   return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];  
  }  
  return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);  
}

function match_rgbcolor(text){
	var pattern = /^rgb\(\d+, \d+, \d+\)/g;
	if(text.match(pattern)) return true;
	else return false;
}

function update_color_elem(event){
	var update_profile_view = function(color){
			$(elem).val(color);
			$(elem).trigger("keyup");
	}
	var elem = event.data.elem;
	var farb_elem = $.farbtastic($("#colorpicker"));
	farb_elem.linkTo(update_profile_view);
}

function update_image_elem(event){
	var elem = event.data.elem;
	var container = event.data.container;
	$(container).droppable();
	var image_dropped = function(event,ui){
		$(elem).val("url(" + $("img",$(ui.draggable)).attr("src") + ")");
		$(elem).trigger("keyup");
	}
	//$(container).droppable({drop:image_dropped});
	$(container).bind("drop",image_dropped);
}

String.prototype.trim = function () {
    return this.replace(/^\s*/, "").replace(/\s*$/, "");
}

function create_property_control(property,value,element){
	var prop_container = null;
	try{
		prop_container = $("<div class='property "+property + ((typeof theme[element][property] == "undefined") ? " hidden" : "") + " '><span class='prop_name'>"+property+"</span></div>");
	}catch(exception){
		prop_container = $("<div class='property "+property + " '><span class='prop_name'>"+property+"</span></div>");
	}
	var selector = null;
	var image_select = null;
	value = value.trim();
	
	var update_preview = function(event){
		
		var elem = event.data.elem;
		var prop = event.data.prop;
		var val = "";
		for(var i = 0; i < event.data.val.length; i++){
			val += event.data.val[i].value + "";
		}
		
		var context = get_context(elem);
		if(context == "") context = "default";
		if(typeof all_css["default"] == "undefined"){
			all_css = {"default":eval (all_css.toSource())};
		}
		
		if(typeof all_css[context] == "undefined")
			all_css[context] = {}
		
		if(typeof all_css[context][elem] == "undefined")
			all_css[context][elem] = {}
		
		all_css[context][elem][prop] = val;
		
		// if we're modifying classe's style, we need to override specific id styling for elements with this class
		// NEED TO RE-ADD THIS!!
		/*$(elem).each(function(){
				var elements = $(this).data("selectors");
				try{
				if(elements != null){
					if(prop == "-moz-border-radius") all_css[context][elements[0]]["-webkit-border-radius"] = val;
					all_css[context][elements[0]][prop] = val;
				}}catch(exception){}
		});*/
		
		eval( "$(\"" + elem + "\").css({\"" + prop + "\":\"" + val + "\"})");
		if(prop == "-moz-border-radius") all_css[context][elem]["-webkit-border-radius"] = val;
		if(prop == "border") css_backup = val;
	}
	
	// need to finish these off, with appropriate value-setting when multiple inputs (i.e: selects)
	switch(property){
		case "color":
			selector = $("<input type='text' style='width:5em' name='color_selection'></input>");
			$(selector).bind("click",{elem:selector}, update_color_elem);
			if(value != "") $(selector).val(value);
			else{
				 var current_value = rgb2hex($("" + element).css(property));
				 $(selector).val(current_value);
			}
			//$(selector).val(value);
			$(selector).bind("keyup",{val:$(selector), prop:property, elem:element},update_preview);
			$(selector).bind("blur",{val:$(selector), prop:property, elem:element},update_preview);
			$(selector).bind("change",{val:$(selector), prop:property, elem:element},update_preview);
			
			break;
		case "background":
			selector = $("<input type='text'></input>");
			//update_image_elem({data:{elem:$(selector), container:element}});
			update_image_elem({data:{elem:$(selector),container:$("#contentHolder")}});
			update_color_elem({data:{elem:$(selector)}});
			if(value != "") $(selector).val(value);
			else{
				var current_value = $("" + element).css("background-color"); 
				if(match_rgbcolor(current_value)) current_value = rgb2hex(current_value);
				$(selector).val(current_value);
			}
			$(selector).bind("keyup",{val:$(selector),prop:property, elem:element},update_preview);
			$(selector).bind("blur",{val:$(selector),prop:property, elem:element},update_preview);
			break;
		case "display":
			selector = $("<select><option value='block'>block</option><option value='inline'>inline</option><option value='none'>none</option></select>");
			$(selector).val(value);
			$(selector).bind("change",{val:$(selector),prop:property, elem:element},update_preview);
			$(selector).bind("blur",{val:$(selector),prop:property, elem:element},update_preview);
			break;
		case "position":
			selector = $("<select><option value='relative'>relative</option><option value='fixed'>fixed</option><option value='absolute'>absolute</option></select>");
			$(selector).val(value);
			$(selector).bind("change",{val:$(selector),prop:property, elem:element},update_preview);
			$(selector).bind("blur",{val:$(selector),prop:property, elem:element},update_preview);
			break;
		case "float":
			selector = $("<select attr='aaa'><option value='none'>none</option><option value='left'>left</option><option value='right'>right</option></select>");
			$(selector).val(value);
			$(selector).bind("change",{val:$(selector),prop:property, elem:element},update_preview);
			$(selector).bind("blur",{val:$(selector),prop:property, elem:element},update_preview);
			break;
		case "clear":
			selector = $("<select><option value='none'>none</option><option value='left'>left</option><option value='right'>right</option></select>");
			$(selector).val(value);
			$(selector).bind("change",{val:$(selector),prop:property, elem:element},update_preview);
			$(selector).bind("blur",{val:$(selector),prop:property, elem:element},update_preview);
			break;
		case "font-family":
			selector = $("<select></select>");
			for(var i = 0; i < iphone_fonts.length; i++){
				var the_font = iphone_fonts[i];
				var an_option = $("<option value='"+the_font+"'>"+the_font+"</option>");
				$(selector).append(an_option);
			}
			$(selector).val(value);
			$(selector).bind("change",{val:$(selector),prop:property, elem:element},update_preview);
			$(selector).bind("blur",{val:$(selector),prop:property, elem:element},update_preview);
			break;
			
		case "font-weight":
			selector = $("<select><option value='normal'>normal</option><option value='bold'>bold</option></select>");
			$(selector).val(value);
			$(selector).bind("change",{val:$(selector),prop:property, elem:element},update_preview);
			$(selector).bind("blur",{val:$(selector),prop:property, elem:element},update_preview);
			break;
		case "padding":
		case "margin-top":
		case "margin-left":
		case "margin-right":
		case "margin-bottom":
		case "padding-left":
		case "padding-right":
		case "padding-bottom":
		case "padding-top":
		case "top":
		case "right":
		case "bottom":
		case "left":
		case "opacity":
		case "margin":
		case "-moz-border-radius":
		case "line-height":
			selector = $("<input type='text' style='width:6em'></input>");
			if(value != "") $(selector).val(value);
			else{
				 var current_value = $("" + element).css(property);
				 $(selector).val(current_value);
			}
			$(selector).bind("keyup",{val:$(selector),prop:property, elem:element},update_preview);
			$(selector).bind("blur",{val:$(selector),prop:property, elem:element},update_preview);
			break;
			
		case "width":
		case "height":
		case "font-size":
	 		selector = $("<input type='text' style='width:6em'></input>");
			if(value != "") $(selector).val(value);
			else{
				 var current_value = $("" + element).css(property);
				 $(selector).val(current_value);
			}
			$(selector).bind("keyup",{val:$(selector),prop:property, elem:element},update_preview);
			$(selector).bind("blur",{val:$(selector),prop:property, elem:element},update_preview);
			break;
		
		case "text-align":
			selector = $("<select><option value='center'>center</option><option value='left'>left</option><option value='right'>right</option><option value='justify'>justify</option></select>");
			$(selector).val(value);
			$(selector).bind("change",{val:$(selector),prop:property, elem:element},update_preview);
			$(selector).bind("blur",{val:$(selector),prop:property, elem:element},update_preview);
			break;
		
		case "border":
		case "border-left":
		case "border-right":
		case "border-top":
		case "border-bottom":
		case "text-decoration":
			//selector = $("<select><option value='none'>none</option><option value='underline'>underline</option></select>");
			selector = $("<input type='text'></input>");
			$(selector).val(value);
			$(selector).bind("keyup",{val:$(selector),prop:property, elem:element},update_preview);
			$(selector).bind("blur",{val:$(selector),prop:property, elem:element},update_preview);
			break;
		
			/*var selector = $("<input type='text' style='width:3em' class='v1'></input><select class='v2'><option value=''></option><option value='solid'>solid</option><option value='dotted'>dotted</option><option value='dashed'>dashed</option></select><input type='text' style='width:6em' class='v3'></input>");
			$(selector[2]).bind("click",{elem:$(selector[2])}, update_color_elem);
			$(selector[2]).bind("change",{val:$(selector),prop:property, elem:element},update_preview);
			if(value != ""){
				var pat1 = /((\d+px\s)+)/g
				var pat2 = /solid|dotted|dashed/g
				var pat3 = /#[\d\w]+/g
				var match1 = value.match(pat1);var match2 = value.match(pat2);var match3 = value.match(pat3);
				selector[0].value = match1;selector[1].value = match2;selector[2].value = match3;
			}
			else{
				var color_value = $("" + element).css(property + "-color");
				var style_value = $("" + element).css(property + "-style");
				var width_value = $("" + element).css(property + "-width");
				if(match_rgbcolor(color_value)) color_value = rgb2hex(color_value);
				selector[0].value = width_value;
				selector[1].value = style_value;
				selector[2].value = color_value;
			}
			$(selector).bind("keyup",{val:$(selector),prop:property, elem:element},update_preview);
			$(selector).bind("blur",{val:$(selector),prop:property, elem:element},update_preview);
			break;*/
	}
	$(prop_container).append(selector);
	try{$(prop_container).append(image_select);}catch(exception){}
	try{$(prop_container).append(color_palette);}catch(exception){}
	$(".show_image_selector").click(function(){
		$("#image_media_conf").removeClass("hidden");
	});
	if(default_properties[property].hidden == "true") $(prop_container).addClass("hidden");
	return prop_container;
}

function show_border(event){
	var element = event.data.element;
	$("" + element).addClass("show_element");
}

function clear_controls(){
	$("#css_customization > div.css_elem").empty();
}

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
  return null;
}