var RC;
Event.observe(window, 'load', function(e) {
	RC = new RemoteControl();

		// ### Initialize ALL Autocompleter
		new Autocompleter.DWR('rc_token', 'rc_suggestions', autocomplete, {
			valueSelector :renderItemLabel,
			afterUpdateElement :itemSelectionCallback,
			minChars :2,
			delay: 0.6
		});

		// ### Initialize DESIGNER Autocompleter
		new Autocompleter.DWR('rc_designer_token', 'rc_designer_suggestions',
				autocompleteDesigner, {
					valueSelector :renderItemLabel,
					afterUpdateElement :designerSelectionCallback,
					minChars :2,
					delay: 0.6
				});

		// ### Default texts in search fields
		new DefaultText('rc_token', '');
		new DefaultText('rc_designer_token', 'e.g. name, designer, maker, color');
	});

// ### AJAX: Search ALL for Autocompleter
function autocomplete(autocompleter, query) {
	RemoteControlComponent.autocomplete(query, 'DECOPEDIA', function(items) {
		autocompleter.setChoices(items);
		$('rc_search_info').update('');
	});
}

//### AJAX: Search DESIGNER for Autocompleter
function autocompleteDesigner(autocompleter, query) {
	RemoteControlComponent.autocomplete(query, 'DESIGNER', function(items) {
		autocompleter.setChoices(items);
	});
}

// ### AJAX: Renders item label for suggestions in Autocompleter
function renderItemLabel(item) {
	return item.value + '|' + item.info;
}

// ### AJAX: Handles selected item in QuickSearch Autocompleter 
function itemSelectionCallback(inputElement, selectedElement, item) {
	$('rc_token').value = item.value;

	var name;
	if (item.bean == 'DESIGNER') {
		location.href = item.url;
	} else if (item.bean == 'PRODUCT') {
		name = 'query.tpl'
		var html = RCHTML.infoOptionHidden.evaluate( {
			name :name,
			value :item.id
		});

		RC.reset();
		$('rc_search_info').update(html);
		$('rc_search_form').submit();
	} else if (item.bean == 'MAKER') {
		location.href = item.url;
	}
}

// ### AJAX: Handles selected item in Autocompleter 
function designerSelectionCallback(inputElement, selectedElement, item) {
	$('rc_designer_token').value = item.value;
	location.href = item.url;
	
	/*RC.getPanelById('rc_designers').addOption(item.id, item.value, 'q.d');
	$(inputElement).clear();*/
}

// ### CLASS: DefaultText
DefaultText = Class.create();
DefaultText.prototype = {
	initialize : function(target, text) {
		var element = $(target);
		this.element = element;
		this.text = text;

		var color = this.element.getStyle('color');
		if (!color) {
			color = 'inherit';
		}
		var fontStyle = this.element.getStyle('font-style');
		if (!fontStyle) {
			fontStyle = 'inherit';
		}
		this.style = {
			color :color,
			fontStyle :fontStyle
		};

		var instance = this;
		this.element.observe('blur', function() {
			instance.onBlur();
		});
		this.element.observe('focus', function() {
			instance.onFocus();
		});

		var form = this.element.up('form');
		if (form) {
			form.observe('submit', function() {
				if (instance.isDefault()) {
					instance.clearText();
				}
			});
		}

		this.onBlur();
	},

	isDefault : function() {
		return (this.element.getValue() == this.text);
	},

	onFocus : function() {
		if (this.isDefault()) {
			this.hideText();
		}
		this.element.select();
	},

	onBlur : function() {
		if (this.element.getValue().strip().empty()) {
			this.showText();
		}
	},

	showText : function() {
		this.element.setStyle( {
			color :'#999999',
			fontStyle :'italic'
		});
		this.element.value = this.text;
	},

	hideText : function() {
		this.clearText();
		this.element.setStyle(this.style);
	},

	clearText : function() {
		this.element.clear();
	}
}

ShowroomSearchAction = Class.create();
ShowroomSearchAction.prototype = {}

//### CLASS: RemoteControl
RemoteControl = Class.create();
RemoteControl.prototype = {
	initialize : function() {
		this.panels = new Hash();
		this.available = $('rc_browse_form') ? true : false;
	},

	getPanelById : function(id) {
		var panel = this.panels.get(id);

		if (!panel) {
			panel = new Panel(this, id);
			this.panels.set(id, panel);
		}

		return panel;
	},

	getPanel : function(callerElement) {
		var panel = this.getPanelById($(callerElement).up('.panel').id);
		
		/*
		if (this.currentPanel && this.currentPanel.id != panel.id) {
			this.currentPanel.closeOptions();
		}
		*/

		this.currentPanel = panel;

		return panel;
	},

	reset : function() {
		var rc = this;
		if (rc.available) {
			$('rc_sort').clear();
			$('rc_pageSize').clear();
			$('rc_page').clear();
			$('rc_browse_form').select('div.panel').each( function(element) {
				rc.getPanelById(element.id).reset();
			});
			rc.count();
		}
	},

	getFieldArray : function(type, name) {
		return $A($('rc_browse_form').getInputs(type, name).invoke('getValue')).compact();
	},

	// ### AJAX: Count products
	count : function() {
		var rc = this;

		var countryId = $F('rc_countries_values');
		var countries = (countryId > 0) ? new Array(countryId) : new Array();
		
		var query = {
			'categories' :rc.getFieldArray('checkbox', 'q.c'),
			'styles' :rc.getFieldArray('checkbox', 'q.s'),
			'designers' :rc.getFieldArray('hidden', 'q.d'),
			'countries' :countries,
			'sellerTypes' :rc.getFieldArray('checkbox', 'q.st'),
			'minPrice' :$F('rc_minPrice'),
			'maxPrice' :$F('rc_maxPrice')
		};

		try {
			RemoteControlComponent.count(query, function(count) {
				$('rc_searchResultCount').update(count);
			});
		} catch (e) {
			//alert("ERROR: " + e.message);
		}
	},

	sort : function(sort) {
		$('rc_sort').value = sort;
		this.search();
	},

	gotoPage : function(page) {
		$('rc_page').value = page;
		this.search();
	},

	gotoPreviousPage : function() {
		this.gotoPage(parseInt($('rc_page').value, 10) - 1);
	},

	gotoNextPage : function() {
		this.gotoPage(parseInt($('rc_page').value, 10) + 1);
	},

	limitPageSize : function(size) {
		$('rc_page').value = 0;
		$('rc_pageSize').value = size;
		this.search();
	},

	search : function() {
		$('rc_browse_form').submit();
	}
}

//### CLASS: Panel
Panel = Class.create();
Panel.prototype = {
	initialize : function() {
		this.remoteControl = arguments[0];
		this.panel = $(arguments[1]);
		this.id = this.panel.id;
		this.options = $(this.panel.id + '_options');
		this.info = $(this.panel.id + '_info');
		this.infoOptionsLimit = 8;
	},

	toggleOptions : function() {
		if (this.options.visible()) {
			this.closeOptions();
		} else {
			this.openOptions();
		}
	},

	openOptions : function() {
		var panelOffset = this.panel.positionedOffset();

		this.options
				.setStyle( {
					left :(panelOffset.left + parseInt(this.panel.getWidth()) - 7) + 'px', //parseInt(this.panel.getWidth()) + 'px',
					top :(panelOffset.top - 7) + 'px'
				});

		this.options.show();
	},

	closeOptions : function() {
		this.options.hide();
	},

	selectOption : function(callerElement) {
		var checkbox = $(callerElement);
		var isParent = checkbox.hasClassName('parent');
		var hasSelectedOptions = false;
		
		this.options.select('input[type="checkbox"]').each(function(checkbox) {
			if (!hasSelectedOptions && checkbox.checked) {
				hasSelectedOptions = true;
			}
		});

		if (isParent || !hasSelectedOptions) {
			if (hasSelectedOptions) {
				this.reset();
			}
			var parentObject = this.info.down('input[type="checkbox"]');
			parentObject.checked = true;
			parentObject.writeAttribute({'disabled': true});
		} else if(hasSelectedOptions) {
			var parentObject = this.info.down('input[type="checkbox"]');
			parentObject.checked = false;
			parentObject.writeAttribute({'disabled': false});
		}
		
		/*
		var checkbox = $(callerElement);
		var isParent = checkbox.hasClassName('parent');

		// ### Remove (previous) info option
		var dbId = checkbox.value;
		var infoOptionId = this.identifyInfoOption(dbId);
		
		this.removeInfoOption(checkbox.value);
		
		
		if (checkbox.checked) {
			var showInfo = true;
			
			if (isParent) {
				var childCount = this.selectChildOptions(checkbox);
				showInfo = (childCount == 0);
			}
			
			if (showInfo) {
				this.addInfoOption(dbId, checkbox.next('label').innerHTML,null);
			}
		} else if (isParent) {
			this.clearChildOptions(checkbox);
		}
		
		if (!isParent) {
			var childContainer = checkbox.up('.children');
			if (childContainer) {
				var children = childContainer.select('input');
				var checkedCount = 0;
				for ( var i = 0; i < children.length; i++) {
					if (children[i].checked) {
						checkedCount++;
					}
				}
				if (checkedCount == children.length) {
					this.getParentOption(checkbox).checked = true;
				} else {
					this.getParentOption(checkbox).checked = false;
				}
			}
		}
		
		if (!this.hasInfoOptions()) {
			this.showInfoLabel();
		}
		*/
	},

	selectAllOptions : function() {
		var thisPanel = this;
		this.panel.select('input[type="checkbox"]').each( function(checkbox) {
			checkbox.checked = true;
			thisPanel.selectOption(checkbox);
		});
	},

	getParentOption : function(childOption) {
		return $(childOption).up('.children').previous('.all').down('input');
	},

	getChildOptions : function(parentOption) {
		return $(parentOption).up('.all').next('.children').select('input');
	},

	selectChildOptions : function(parentOption) {
		var children = this.getChildOptions(parentOption);
		for ( var i = 0; i < children.length; i++) {
			children[i].checked = true;
			this.selectOption(children[i]);
		}
		return children.length;
	},

	clearChildOptions : function(parentOption) {
		var children = this.getChildOptions(parentOption);
		for ( var i = 0; i < children.length; i++) {
			children[i].checked = false;
			this.selectOption(children[i]);
		}
		return children.length;
	},

	addOption : function(dbId, label, field) {
		this.addInfoOption(dbId, label, field);
	},

	updatePriceRange : function() {
		var min = $F('rc_minPrice');
		var max = $F('rc_maxPrice');

		/*this.clearInfoOptions();

		if (min != '' || max != '') {
			this.hideInfoLabel();

			var html = RCHTML.infoOptionRange.evaluate( {
				min :(min != '') ? 'USD ' + Math.round(min) : 'No Minimum',
				max :(max != '') ? 'USD ' + Math.round(max) : 'No Maximum'
			});
			if(this.info != null) {
				this.info.insert( {
					bottom :html
				});
			}
		} else {
			this.showInfoLabel();
		}*/

		this.remoteControl.count();
	},

	identifyInfoOption : function(dbId) {
		if(this.info != null) {
			return (this.info.id + '_' + dbId);
		}
	},

	hasInfoOptions : function() {
		if(this.info != null) {
			var children = this.info.childElements();
			for ( var i = 0; i < children.length; i++) {
				if (children[i].visible() && !children[i].hasClassName('all')) {
					return true;
				}
			}
		}

		return false;
	},

	addInfoOption : function(dbId, label, field) {
		var infoOption = $(this.identifyInfoOption(dbId));
		
		if (infoOption) {
			// ### Show ev. hidden option
			infoOption.show();
		} else {
			// ### Add new option
			var properties = {
				styleId :this.identifyInfoOption(dbId),
				label :label,
				id :dbId,
				field :field
			}
		
			var template = (field != null) ? RCHTML.infoOptionField : RCHTML.infoOption;
			var html = template.evaluate(properties);
		
			if(this.info != null) {
				this.info.insert( {
					bottom :html
				});
			}	
	}

this.limitInfoOptions();
this.hideInfoLabel();
},

removeInfoOption : function(dbId) {
var infoOption = $(this.identifyInfoOption(dbId));
if (infoOption) {
	if (infoOption.hasClassName('option')) {
		infoOption.remove();
	} else {
		infoOption.hide();
	}
	this.limitInfoOptions();
}
},

getInfoOptions : function() {
	if(this.info != null) {
		return this.info.select('.option');
	}
},

limitInfoOptions : function() {
var infoOptions = this.getInfoOptions();
var count = infoOptions.length;
var visibleCount = 0;

if (count >= this.infoOptionsLimit) {
	for ( var i = 0; i < infoOptions.length; i++) {
		var option = infoOptions[i];
		if (visibleCount < this.infoOptionsLimit) {
			visibleCount++;
			if (!option.visible()) {
				option.show();
			}
		} else {
			option.hide();
		}
	}
}
},

unlimitInfoOptions : function() {
this.getInfoOptions().invoke('show');
},

clearInfoOptions : function() {
	if (this.info != null) {
		var children = this.info.childElements();
		for ( var i = 0; i < children.length; i++) {
			var child = children[i];
			if (!child.hasClassName('all')) {
				if (child.hasClassName('option')) {
					child.remove();
				} else {
					child.hide();
				}
			}
		}
	}
},

getInfoLabel : function() {
if (this.info != null) {
	if (!this.infoLabel) {
		this.infoLabel = this.info.down('li.all');
	}
}

return this.infoLabel;
},

showInfoLabel : function() {
var aoi = this.getInfoLabel();
if (aoi) {
	aoi.show();
}
},

hideInfoLabel : function() {
var aoi = this.getInfoLabel();
if (aoi) {
	aoi.hide();
}
},

reset : function() {
// ### Clear checkboxes
	if (this.options) {
		this.options.select('input[type="checkbox"]').each( function(checkbox) {
			checkbox.checked = false;
		});
	}

	// ### Clear textfields
	this.panel.select('input[type="text"]').invoke('clear');

	// ### Reset dropdowns
	this.panel.select('select').each( function(select) {
		select.value = '';
	});
	
	if (this.panel.select('select') == 'rc_countries_values') {
		this.panel.select('select').each( function(select) {
			select.value = '-1';
		});
	}

	// ### Clear info
	this.clearInfoOptions();

	this.showInfoLabel();
	//this.closeOptions();

	//this.remoteControl.count();
}
}

// ### HTML Templates for rendering
var RCHTML = {
	infoOption :new Template(
			'<li id="#{styleId}" class="option"><img src="img/checked-blue.gif" alt="Checked Blue" /><span>#{label}</span></li>'),
	infoOptionField :new Template(
			'<li id="#{styleId}" class="option"><img src="img/checked-blue.gif" alt="Checked Blue" /><span>#{label}<input type="hidden" name="#{field}" value="#{id}" /></span></li>'),
	infoOptionRange :new Template(
			'<li id="#{styleId}" class="option"><img src="img/checked-blue.gif" alt="Checked Blue" /><span>#{min} to #{max}</span></li>'),
	infoOptionType :new Template(
			'<li id="#{styleId}" class="option"><span class="seller-type-#{label}">#{letter}</span><img src="img/checked-blue.gif" alt="Checked Blue" /><span>#{label}</span></li>'),
	infoOptionHidden :new Template(
			'<input type="hidden" name="#{name}" value="#{value}" class="option" />')
};

function display(id) {
	if ($('children' + id).style.display == 'none') {
		$('down-arrow' + id).style.display = '';
		$('right-arrow' + id).style.display = 'none';
		$('children' + id).style.display = '';
	} else {
		$('down-arrow' + id).style.display = 'none';
		$('right-arrow' + id).style.display = '';
		$('children' + id).style.display = 'none';
	}
}