var MainListingItem = Class.create();

MainListingItem.prototype = {

	initialize: function(container) {
		this.container = $(container);
		this.wrapper = this.container.getElementsByClassName('wrapper')[0];
		this.shade = this.wrapper.getElementsByClassName('shade')[0];
		this.subitems = [];

		this.registerEvents();
	},

	registerEvents: function() {
		if (Prototype.Browser.IE) {
			Event.observe(this.container, 'mouseenter', this.showBackground.bind(this));
			Event.observe(this.container, 'mouseleave', function() { this.hideBackground(); this.hide(); }.bind(this));
			Event.observe(this.wrapper, 'mouseenter', this.show.bind(this));
			Event.observe(this.shade, 'mouseenter', this.show.bind(this));
			Event.observe(this.shade, 'mouseleave', this.hide.bind(this));
		} else {
			Event.observe(this.container, 'mouseover', this.showBackground.bind(this));
			Event.observe(this.container, 'mouseout', function() { this.hideBackground(); this.hide(); }.bind(this));
			Event.observe(this.wrapper, 'mouseover', this.show.bind(this));
			Event.observe(this.shade, 'mouseover', this.show.bind(this));
			Event.observe(this.shade, 'mouseout', this.hide.bind(this));
		}
	},

	addSubitem: function(wrapper, link, img, imgOver, width, height) {
		var subitem = new MainListingSubitem(wrapper, link, img, imgOver, width, height);
		subitem.parent = this;
		this.subitems.push(subitem);
	},

	showBackground: function() {
		this.container.className = 'item_hover';
	},
	hideBackground: function() {
		this.container.className = 'item';
	},
	show: function() {
		this.showShade();
		this.showSubitems();
	},
	hide: function() {
		this.hideShade();
		this.hideSubitems();
	},

	showShade: function() {
		this.shade.setStyle({ display: 'block' });
	},
	hideShade: function() {
		this.shade.setStyle({ display: 'none' });
	},

	showSubitems: function() {
		this.subitems.each(function(subitem) { subitem.show() });
	},
	hideSubitems: function() {
		this.subitems.each(function(subitem) { subitem.hide() });
	}

}

include('MainListingSubitem.js');