var StyliseForm = new Class({
	initialize: function() {
		this.form = $(document.body).getElement('form[name=brandoptions]');
		this.form.setStyle('visibility', 'visible');
		
		this.prepareInput(this.form.getElement('input'));
		this.prepareSelect(this.form.getElement('select'));
	},
	prepareInput: function(input) {
		var div = new Element('div', {'class': 'input'});
		div.inject(input, 'after');
		div.grab(input);
		input.addEvent('focus', function() { this.getParent().setStyle('background-position', '0 -24px'); });
		input.addEvent('blur', function() { this.getParent().setStyle('background-position', '0 0'); });
		input.addEvent('keyup', function() { form.input(this.get('value')); });
	},
	prepareSelect: function(select) {
		select.setStyles({'position': 'absolute', 'left': '-2000em'});
		var options = select.getChildren();
		var div = new Element('div', {'class': 'select-long', 'html': select.getSelected().get('html')});
		div.inject(select, 'after');
		div.addEvent('click', function(event) {
			this.removeEvents('click');
			var list = new Element('ul', {'class': 'select-long', 'id': 'fphonetypelist'});
	    	list.inject(div);
	    	options.each(function(element, index) {
	    		var option = new Element('li', {'html': element.get('html')});
	    		option.inject(list);
	    		option.addEvent('click', function() {
	    			options.each(function(element){
	    				if (element.get('html')!=option.get('html')) element.set('selected', false);
	    				else element.set('selected', true);
	    			});
	    			var div = this.getParent('div');
	    			div.destroy();
	    			stylise.prepareSelect(select);
	    			form.select();
	    		});
	    		option.addEvent('mouseenter', function() { this.setStyle('background-color', '#bfc3c6'); });
	    		option.addEvent('mouseleave', function() { this.setStyle('background-color', '#a0a3a6'); });
	    		if (element.get('html')==select.getSelected().get('html')) {
	    			var pos = index;
					list.setStyle('top', '-'+(pos*24)+'px');
	    		}
	    	});
		});
	}
});

var Form = new Class({
	initialize: function() {
		this.form = $(document.body).getElement('form[name=brandoptions]');
		this.form.addEvent('submit', function(event) { event.stop(); });
	},
	select: function() {
		var select = $('bcategory').getSelected().get('value');
		var jsonRequest = new Request.JSON({url: '/sync/brands/'+select, onComplete: function(jsonObj) {
			brands.addBrands(jsonObj.brands);
		}}).send();
	},
	input: function(value) {
		var jsonRequest = new Request.JSON({url: '/sync/brands/search/'+value, onComplete: function(jsonObj) {
			brands.addBrands(jsonObj.brands);
		}}).send();
	}
});

var Brands = new Class({
	initialize: function() {
		var jsonRequest = new Request.JSON({url: "/sync/brands/all", onComplete: function(jsonObj) {
			brands.addBrands(jsonObj.brands);
		}}).send();
	},
	addBrands: function(brands) {
		$('brands').empty();
		brands.each(function(element) {
			var div = new Element('div', {'class': 'brand', 'html': element.text});
			var img = new Element('img', {'src': '/images/pages/brands/'+element.logo, 'width': '44px', 'height': '44px', 'alt': '', 'styles': {'padding-top': '4px'}}).inject(div);
			var hdr = new Element('h4', {'html': element.brand+'&nbsp;&nbsp;&nbsp;<span>(<a href="'+element.url+'" target="_blank">Official website</a>)</span>'}).inject(div);
			var pgr = new Element('p', {'html': element.content}).inject(div);
			div.inject($('brands'));	
			var hr = new Element('hr').inject(div, 'after');
		});
	}
});

var stylise;
var brands;
var form;

window.addEvent('domready', function() {
	stylise = new StyliseForm;
	brands = new Brands;
	form = new Form;
});