var DefaultValueField = new Class({
	initialize: function(element) {
		this.element = $(element);
		this.hasFocus = false;
		this.element.addEvent('focus', function() {
			this.hasFocus = true;
			this.update()
		}.bind(this));
		this.element.addEvent('blur', function() {
			this.hasFocus = false;
			this.update();
		}.bind(this));
		this.update.bind(this).periodical(100);
		this.update();
	},
	update: function() {
		if (!this.hasFocus && this.element.value == '') {
			this.element.addClass('default-value');
		} else {
			this.element.removeClass('default-value');
		}
	}
});

var originalBrandValue = '';

window.addEvent('domready', function () {
	var products_header = $('products_header');
	if (products_header) {
		$E('input', products_header).remove();
		$E('select', products_header).addEvent('change', function () {
			this.form.submit();
		});
	}
	
	//initDefaultFieldValue('#header #id_email', 'Email address');
	//initDefaultFieldValue('#header #id_password', 'Password');
	new DefaultValueField($E('#account #id_email'));
	new DefaultValueField($E('#account #id_password'));
	
	var product_lists = $ES('.product_list');
	for (var k = 0; k < product_lists.length; k++) {
		var product_names = $ES('h3', product_lists[k]);
		var max_height = 0;
		var height;
		for (var i = 0; i < product_names.length; i++) {
			height = product_names[i].getSize().size.y
			if (height > max_height) max_height = height;
			if (i%3 == 2 || i == product_names.length-1) {
				for (var j = Math.floor(i/3)*3; j <= i; j++) {
					product_names[j].setStyle('height', max_height+'px');
				}
				max_height = 0;
			}
		}
		var product_wrappers = $ES('.product_wrapper', product_lists[k]);
		max_height = 0;
		for (var i = 0; i < product_wrappers.length; i++) {
			height = product_wrappers[i].getSize().size.y - 18;
			if (height > max_height) max_height = height;
			if (i%3 == 2 || i == product_wrappers.length-1) {
				for (var j = Math.floor(i/3)*3; j <= i; j++) {
					product_wrappers[j].setStyle('height', max_height+'px');
				}
				max_height = 0;
			}
		}
		var product_prices = $ES('.price', product_lists[k]);
		var max_offset = 0;
		var offset;
		var adjustment;
		for (var i = 0; i < product_prices.length; i++) {
			offset = product_prices[i].getPosition().y;
			if (offset > max_offset) max_offset = offset;
			if (i%3 == 2 || i == product_prices.length-1) {
				for (var j = Math.floor(i/3)*3; j <= i; j++) {
					adjustment = max_offset - product_prices[j].getPosition().y + 6;
					product_prices[j].setStyle('margin-top', adjustment+'px');
				}
				max_offset = 0;
			}
		}
	}
	if ($('bestsellers')) {
		var bestsellers = $ES('#bestsellers li');
		var max_height = 0;
		var height;
		for (var i = 0; i < bestsellers.length; i++) {
			height = bestsellers[i].getSize().size.y
			if (height > max_height) max_height = height;
			if (i%3 == 2 || i == bestsellers.length-1) {
				for (var j = Math.floor(i/3)*3; j <= i; j++) {
					bestsellers[j].setStyle('height', max_height+'px');
				}
				max_height = 0;
			}
		}
	}
	if ($E('.brand_search')) {
		var input = $('id_brand_name');
		var suggestions = $E('.brand_search .suggestions')
		input.addEvent('keyup', function (event) {
			if (event.code == 27) {
				suggestions.setStyle('display', 'none');
				this.value = originalBrandValue;
				return true;
			}
			if (event.code == 13 || this.value == '') {
				suggestions.setStyle('display', 'none');
				return true;
			}
			if (event.code == 39 || event.Code == 37) {
				return true;
			}
			if (event.code == 40) {
				if (suggestions.getStyle('display') == 'none') return;
				var lis = $ES('li', suggestions);
				var current_li, next_li;
				for (var i = 0; i < lis.length; i++) {
					if (lis[i].hasClass('over')) {
						current_li = lis[i];
						if (i < lis.length-1) next_li = lis[i+1];
						else next_li = lis[0];
					}
				}
				if (typeof(next_li) == 'undefined') next_li = lis[0];
				if (current_li) current_li.removeClass('over');
				next_li.addClass('over');
				this.value = next_li.getText();
				event.stop();
				return false;
			}
			if (event.code == 38) {
				if (suggestions.getStyle('display') == 'none') return;
				var lis = $ES('li', suggestions);
				var current_li, next_li;
				for (var i = 0; i < lis.length; i++) {
					if (lis[i].hasClass('over')) {
						current_li = lis[i];
						if (i > 0) next_li = lis[i-1];
						else next_li = lis[lis.length-1];
					}
				}
				if (typeof(next_li) == 'undefined') next_li = lis[0];
				if (current_li) current_li.removeClass('over');
				next_li.addClass('over');
				this.value = next_li.getText();
				event.stop();
				return false;
			}
			// brandNames defined in /brands/api/list
            var brandList = [];
            numBrands = brandNames.length;
            var brandListSize = 0;
            for (var i=0;(i<numBrands && brandListSize<10);i++) {
                if (brandNames[i].toLowerCase().search(this.value.toLowerCase()) == 0) {
                    brandList.include(brandNames[i]);
                    brandListSize++;
                }
            }
			if (brandList.length > 0) {
				$ES('li', suggestions).each(function (el) {el.remove();});
				var li, attrs;
				for (var i = 0; i < brandList.length; i++) {
					li = new Element('li');
					if (i == 0) li.addClass('first');
					if (i == brandList.length-1) li.addClass('last');
					li.setText(brandList[i]);
					li.addEvent('mouseover', function (event) {
						$ES('li', suggestions).each(function (el) {el.removeClass('over');});
						this.addClass('over');
					});
					li.addEvent('mouseout', function (event) {
						this.removeClass('over');
					});
					li.addEvent('mousedown', function () {
						this.removeClass('over');
						input.value = this.getText();
					});
					li.injectInside(suggestions);
				}
				suggestions.setStyle('display', 'block');
			} else {
				suggestions.setStyle('display', 'none');
			}
		}.bindWithEvent(input));
		input.addEvent('blur', function () {
			suggestions.setStyle('display', 'none');
		});
	}
});