/*
Copyright (c) 2008-2010, Gigdoggy Inc.- Gregory Whiteside. All rights reserved.
gwhiteside@fanteraction.com
*/

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":"position"},"clear":{"container":"position"},"display":{"container":"position","clear":"true"},
	"margin":{"container":"position","hidden":"true","clear":"true"},"margin-left":{"container":"position","hidden":"false"},"margin-right":{"container":"position","hidden":"false"},"margin-top":{"container":"position","hidden":"false"},"margin-bottom":{"container":"position","hidden":"false"},
	"position":{"container":"position"},"top":{"container":"position","clear":"true"},"right":{"container":"position"},"bottom":{"container":"position"},"left":{"container":"position"},
	"z-index":{"container":"position"},
	"padding":{"container":"dimensions", "hidden":"true","clear":"true"},
	"overflow":{"container":"dimensions"},
	"width":{"container":"dimensions","clear":"true"},"height":{"container":"dimensions"},
	"font-size":{"container":"text"},"line-height":{"container":"text"},"font-family":{"container":"text"},
	"text-align":{"container":"text","clear":"true"},
	"list-style-type":{"container":"text"},
	"background":{"container":"background"},"opacity":{"container":"background"},
	"-moz-box-shadow":{"container":"background"},
	"color":{"container":"text"},
	"font-style":{"container":"text"},
	"text-decoration":{"container":"text"},
	"text-shadow":{"container":"text"},
	"text-stroke":{"container":"text"},
	"font-weight":{"container":"text"},
	"border":{"container":"border"},"border-left":{"container":"border","hidden":"true","clear":"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-left":{"container":"dimensions","hidden":"true","clear":"true"},"padding-right":{"container":"dimensions","hidden":"true"},"padding-top":{"container":"dimensions","hidden":"true"},"padding-bottom":{"container":"dimensions","hidden":"true"}
}

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"
]

skip_classes = ["selected","hidden", "widget_configuration", "widget_content", "ui-state-disabled", "ui-sortable","ui-sortable-disabled","ui-draggable", "ui-droppable", "orderable", "content_configuration", "content_actions", "offset-left", "offset-top", "offset-width", "selected_item"];

initialize_theming();

function parse_html(){
	if(typeof theme == "undefined") theme = {};
	//css_tree = (typeof theme != "undefined") ? theme : {};
	css_tree = {};
	var the_root = "#contentHolder";
	var root_node = $("#contentHolder");
	forbidden_nodes = {"script":"","style":"", "br":"", "embed":"", "object":""};
	
	var get_class = function(node){
		var node_class = $(node).attr("class");
		//if(typeof class != "undefined") class = class.split(" ")[0];
		if(typeof node_class != "undefined") node_class = node_class.split(" ").join(".");
		for(var i = 0; i < skip_classes.length; i++){
			node_class = node_class.replace(skip_classes[i],"");
		}
		node_class = node_class.replace(/^\.+|\.+$/g,"")
		//if(class[0] == ".") class = class.substr(1,class.length);
		return node_class;
	}
	
	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();
		general_selector = general_selector.replace(/\s{2,}/gi," ");
		var selector_array = [];
		
		node_class = get_class(node);
		if(node_class != "") general_selector = general_selector + "." + node_class
		
		if(parent_selector != ""){
			css_tree[general_selector] = (typeof theme[general_selector] != "undefined") ? theme[general_selector] : {};
		}
		
		// get the "id" selector
		if($(node).attr("id") != ""){
			//selector = general_selector + "#" + $(node).attr("id");
			selector = parent_selector + ((parent_selector != "") ? " > " : "div") + "#" + $(node).attr("id");
			selector_array.push(selector);
		}
		else if(typeof node_class == "string" && node_class != "") selector = general_selector;
		else selector = general_selector;
		selector = selector.replace(/\s{2,}/gi," ")
		
		css_tree[selector] = (typeof theme[selector] != "undefined") ? theme[selector] : {};
		
		if(typeof node_class == "string" && node_class != "") class_selector = general_selector;
		//if(typeof classes == "string" && classes != "") class_selector = "." + classes;
		if(typeof node_class == "string" && node_class != "") class_selector2 = the_root + " " + $(node)[0].nodeName.toLowerCase() + "." + node_class;
		class_selector = class_selector.replace(/\s{2,}/gi," ")
		if((class_selector != "") && (class_selector != selector)){
			if($(class_selector).length > 1){
				selector_array.push(class_selector);
				selector_array[selector_array.length] = class_selector;
				css_tree[class_selector] =  (typeof theme[class_selector] != "undefined") ? theme[class_selector] : {};
			}
		}
		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,"");
}

function remove_white_spaces(){
	no_white_spaces = {}
	//if(typeof all_css["no_white_spaces"] == "undefined"){
		for(var context in all_css){
			no_white_spaces[context] = {};
			for(var lang in all_css[context]){
				no_white_spaces[context][lang] = {};
				for(var elem in all_css[context][lang]){
					var temp_elem = elem.replace(/\s{2,}/gi," ");
					try{
					no_white_spaces[context][lang][temp_elem] = JSON.parse(JSON.stringify(all_css[context][lang][elem]));
					}catch(exception){}
				}
			}
		}
	all_css = no_white_spaces;
	//all_css["no_white_spaces"] = "true";
	//}
}

// 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 clear_border_backup(){
	try{css_backup.elem = null;}catch(exception){}
}

function initialize_navigation(){
	//restore_structure_style();
	unbind_content_containers();
	navigation_blocked = false;
	bind_elements();
	disable_widget_configuration();
	disable_structure();
	$(".content_configuration").addClass("hidden");
	$("#css_customization").addClass("hidden");
	$("#selector_container").addClass("hidden");
	$("#edit_menu").addClass("hidden");
	$(".hidden_configuration").addClass("hidden");
	initialize_ui_state();
	//$("#marketplace").removeClass("hidden");
	restore_outline();
	$("#style_only").trigger("click");
}

function initialize_content_customization(){
	//restore_structure_style();
	bind_content_containers();
	navigation_blocked = false;
	bind_elements();
	disable_widget_configuration();
	disable_structure();
	$("#css_customization").addClass("hidden");
	$("#selector_container").addClass("hidden");
	$(".content_configuration.content").removeClass("hidden");
	$("#edit_menu").addClass("hidden");
	$("#all_pages").trigger("click");
	show_hidden_configuration();
	restore_outline();
	$("#structure_only").trigger("click");
}

function initialize_structure_mode(){
	//restore_structure_style();
	unbind_content_containers();
	//$("#structure_only").trigger("click");
	navigation_blocked = false;
	bind_elements();
	disable_widget_configuration();
	enable_structure();
	$(".content_configuration").addClass("hidden");
	$("#css_customization").addClass("hidden");
	$("#selector_container").addClass("hidden");
	$("#edit_menu").addClass("hidden");
	show_hidden_configuration();
	restore_outline();
	$("#structure_only").trigger("click");
	//show_structure("#aaa");
	//restore_outline();
}

function initialize_style_customization(){
	//hide_ghosts();
	//restore_structure_style();
	unbind_content_containers();
	navigation_blocked = true;
	bind_elements();
	disable_widget_configuration();
	disable_structure();
	$(".content_configuration").addClass("hidden");
	$(".content_configuration.style").removeClass("hidden");
	//clear_border_backup();
	if(typeof view == "undefined") $("#styling_structure").trigger("click");
	show_hidden_configuration();
	//if(view == "structure") show_structure("#aaa");
}

function save_structure_style(){
	for(var elem in css_tree){
		$(elem).data("background",$(elem).css("background"));
		$(elem).data("color",$(elem).css("color"));
		if(!($(elem).hasClass("selected_item")))
		$(elem).data("border",$(elem).css("border"));
		$(elem).data("-moz-box-shadow",$(elem).css("-moz-box-shadow"));
	}
}

function restore_structure_style(){
	try{clear_automagic();}catch(exception){}
	for(var elem in css_tree){
		var ui_elem = $(elem);
		var elem_type = ""
		try{ elem_type = $(ui_elem)[0].nodeName.toLowerCase();}catch(exception){}
		if(elem_type != "input" && elem_type != "button") eval("$(\""+elem+"\").css({border:'none'})");
		try{$(elem).css({"background":$(elem).data("background")})}catch(exception){}
		try{$(elem).css({"color":$(elem).data("color")})}catch(exception){}
		try{$(elem).css({"border":$(elem).data("border")})}catch(exception){}
		try{$(elem).css("-moz-box-shadow",$(elem).data("-moz-box-shadow"));}catch(exception){}
		
		var changed_props = $(elem).data("changed_props");
		if(typeof changed_props != "undefined"){
			for(var i = 0; i < changed_props.length; i++){
				var val = $(elem).data("changed_"+changed_props[i]);
				var changed_prop = changed_props[i]
				try{$(elem).css(changed_prop,val)}catch(exception){alert(exception)};
			}
		}
	}
}

function initialize_theming(){
	if(typeof theme == "undefined") theme = {};
	if(typeof css_context == "undefined") css_context="/";
	all_css = JSON.parse(JSON.stringify(theme));
	view = "normal";
	if(typeof theme["default"] != "undefined");
	if(typeof theme_id == "undefined") theme_id = "theme";
	parse_html();
	//initialize_navigation();
	clean_css();
	reorder_css();
	
	css_language_select = "default";
	apply_css = "default";
	
	$("#viewing_type .main_nav").click(function(){
		$("#viewing_type a").removeClass("view_selected");
		$(this).addClass("view_selected");
	});
	
	mode="navigate";
	save_structure_style();
	initialize_navigation();
	//restore_structure_style();
	$(".main_nav").click(function(){
		$("#marketplace").addClass("hidden");
		$("#content_customization").addClass("hidden");
		$("#css_customization").addClass("hidden");
		$("#save_style").addClass("hidden");
		$("#edit_menu").addClass("hidden");
	});
	$("#navigate").click(function(){mode="navigate";initialize_navigation();});
	$("#structure").click(function(){mode="structure";initialize_structure_mode();})
	$("#customize").click(function(){mode="style";initialize_style_customization();});
	$("#customize_content").click(function(){mode="content";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(){});
	});
	remove_white_spaces();
	//update_css_hierarchy();
	create_elem_table();
	// hack for firefox sticky embed bug
	$("embed").mouseup(function(){
		var elem = $(this);
		$("#contentHolder").trigger("mouseup");
		while($(elem).attr("id") == "") elem = $(elem).parent();
		$(elem).trigger("click");
	})
	//initialize_classes();
}

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_element2);
				});
			}
	}
}

function bubbling_logic(event){
	if(mode == "style"){
		$("#edit_menu").removeClass("hidden");
	}
	if(mode == "content"){
		$("#visibility_container").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");
	
	var not_bubbling = function(){
		originating_event = self;
		eval("bubbling_stack = [{\""+self+"\":1}]");
		bubbling = false;
		
		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);
			outline_element2(selected_css);
			initialize_element_visibility(context);
			initialize_element_classes(context);
			$("#delete_element").bind("click",{elem:context},delete_element);
		}
		else{
		update_selector_text(self);
		outline_element2(selected_css);
		initialize_element_visibility(self);
		initialize_element_classes(self);
		}	
		render_customization_controls(event);
		event.preventDefault();
		render_sms($(node));
		render_action($(node));
		return false;
	}
	
	if(((originating_event == self)) || bubbling){
		if(self == end_bubbling || self == end_bubbling2){
			update_selector_text(self);
			outline_element2(selected_css);
			initialize_element_visibility(self);
			initialize_element_classes(self);
			$("#delete_element").bind("click",{elem:self},delete_element);
			originating_event = null;
			bubbling_stack = [];
			bubbling = false;
			render_customization_controls(event);
			event.preventDefault();
			render_sms($(node));
			render_action($(node));
			return false;
		}
		bubbling = true;
		if(bubbling_stack_checksum()){
			if(in_bubbling_stack(self) || skip){
				skip = false;
				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);
					outline_element2(selected_css);
					initialize_element_visibility(context);
					initialize_element_classes(context);
					$("#delete_element").bind("click",{elem:context},delete_element);
				}
				update_bubbling_stack(self);
				render_customization_controls(event);
				bubbling = true;
				event.preventDefault();
				render_sms($(node));
				render_action($(node));
				return false;
			}
		}
	}
	return not_bubbling();
}

function update_existing_selectors(element){
	var elem_key = $(element).data("elem_key");
	$("#existing_selectors").empty();
	if(typeof element_css_table[elem_key] != "undefined"){
	for(var i = 0; i < element_css_table[elem_key].length; i++){
		var option = $("<option value='"+element_css_table[elem_key][i]+"'>"+element_css_table[elem_key][i]+"</option>")
		$("#existing_selectors").append(option);
	}
	$("#existing_selectors").change(function(){
		$("#css_selector_preview").val($(this).val()).trigger("keyup");
	});
	$("#existing_selectors").trigger("change");
	}
}

function render_customization_controls(event){
	//$("#css_menu").append($("#css_configuration").addClass("hidden"))
	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 = current_css_hierarchy;
	var properties = event.data.properties;
	render_control(element);
	$(".css_link:first").trigger("click");
	$("#css_menu").removeClass("hidden");
	$("#css_selector").removeClass("hidden");
}

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;
	var image_dropped = function(event,ui){
		$(elem).val("url(" + $("img",$(ui.draggable)).attr("src") + ")");
		$(elem).trigger("keyup");
	}
	$("[container='true']").each(function(){
		$(this).droppable("destroy");
	});
	$(container).droppable({
		accept:".pic",
		drop:image_dropped,
	});
}



function create_property_control(property,value,element,hide){
	if(typeof hide == "undefined") hide = false;
	selected_css = selected_css.replace(/\s{2,}/gi," ");
	var prop_container = null;

	if(value != "")
	prop_container = $("<div class='property "+property + " current'><span class='prop_name'>"+property+"</span></div>");
	else
	prop_container = $("<div class='property "+property + "'><span class='prop_name'>"+property+"</span></div>");
	
	var selector = null;
	var image_select = null;
	try{value = value.trim()}catch(exception){};
	var addable = true;
	// 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 != "") try{$(selector).val(rgb2hex(value));}catch(exception){$(selector).val(value);}
			else{
				 //var current_value = rgb2hex($("" + element).css(property));
				var current_value = 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);
			$(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:$("#contentHolder")}});
			update_color_elem({data:{elem:$(selector)}});
			if(value != "") try{$(selector).val(rgb2hex(value));}catch(exception){$(selector).val(value);}
			else{
				//var current_value = $("" + element).css("transparent"); 
				var current_value = value;
				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='select'>select...</option><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);
			addable = false;
			break;
		case "position":
			selector = $("<select><option value='select'>select...</option><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='select'>select...</option><option value='left'>left</option><option value='right'>right</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);
			addable = false;
			break;
		case "clear":
			selector = $("<select><option value='select'>select...</option><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);
			addable = false;
			break;
		case "font-family":
			selector = $("<select><option value='select'>select...</option></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='select'>select...</option><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 "font-style":
			selector = $("<select><option value='select'>select...</option><option value='normal'>normal</option><option value='italic'>italic</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 "overflow":
			selector = $("<select><option value='select'>select...</option><option value='hidden'>hidden</option><option value='auto'>auto</option><option value='scroll'>scroll</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 "list-style-type":
			selector = $("<select><option value='select'>select...</option><option value='none'>none</option><option value='circle'>circle</option><option value='disc'>disc</option><option value='square'>square</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":
		case "text-stroke":
		case "z-index":
			selector = $("<input type='text' style='width:6em'></input>");
			if(value != "") $(selector).val(value);
			else{
				 //var current_value = $("" + element).css(property);
				 var current_value = 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 "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);
				 var current_value = 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);
			addable = false;
			break;
		
		case "text-align":
			selector = $("<select><option value='select'>select...</option><option value='left'>left</option><option value='right'>right</option><option value='center'>center</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":
		case "text-shadow":
		case "-moz-box-shadow":
			//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;
	}
	$(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 clear_controls(){
	$("#css_customization div.css_elem").empty();
}


	/*for(property in properties){
		var the_prop = property;
		var the_container = default_properties[property]["container"]
		var container = $("#" + the_container);
		var hide = true;
		var start_value = "";
		// we need to get the "normal" styling for this element
		try{
			start_value = $(element).data(property);
			if(typeof start_value == "undefined") start_value = $(element).css(property);
		}catch(exception){start_value = $(element).css(property);}
		
		var default_value =  "";
		try{default_value = all_css["default"]["default"][element][property];}catch(exception){}
		var context_value = "";
		try{context_value = all_css[css_context]["default"][element][property];}catch(exception){}
		var lang_value = "";
		try{context_value = all_css[css_context][lang][element][property];}catch(exception){}
		
		var value = "";
		if(typeof start_value != "undefined" && start_value != "") value = start_value;
		if(typeof default_value != "undefined" && default_value != "") {value = default_value;hide=false;}
		if(typeof context_value != "undefined" && context_value != "") {value = context_value;hide=false;}
		if(typeof lang_value != "undefined" && lang_value != "") {value = lang_value;hide=false;}
		
		if(!(property in reserved_properties))
			var property_control = create_property_control(property,value,element,hide);
		$(container).append(property_control);
	}*/