var Accordion = new Class({
	initialize: function(triggers, targets) {
		// Objects
		this.targets = targets;
		this.effects = new Array();
		var obj = this;
		// Initialize targets
		$each(targets, function(item, key) {
			item.set('open', 'false').setStyle('display', 'none');
			obj.effects[key] = new Fx.Morph(item, {onComplete: function(item) { if(item.get('open')!='true') item.setStyle('display', 'none'); }});
		});
		// Initialize triggers
		$each(triggers, function(item, key) {
 			item.addEvent('click', function() { obj.toggle(key); });
		});
	},
	// Toggle targets
	toggle: function(key) {
		var target = this.targets[key];
		var obj = this;
		$each(this.targets, function(item, key) {
			// If target open
			if (item==target&&item.get('open')!='true') {
				item.setStyles({'display': 'block', 'opacity': 0});
				item.set('open', 'true');
				obj.effects[key].start({'opacity': 1});
			} 
			// If open close
			else if (item.get('open')=='true') {
				item.set('open', 'false');
				obj.effects[key].start({'opacity': 0});
			}
		});
	}
});

var setBold = function (event) {
	var varImage = document.getElement('div.product-list').getElements('img');
	if (event.target.get('open')==null) {
		varImage.set('open',null).setStyles({'border':'0', 'margin':'0'});
		event.target.set('open','true').setStyles({'border':'3px solid #c2cabd', 'margin':'-3px -3px'});
	} else {
		event.target.set('open',null).setStyles({'border':'0', 'margin':'0'});
	}
}

function setFirstItem() {
	var firstImg = document.getElement('div.product-list').getElement('img');
	var firstProduct = document.getElement('div.products').getElement('div.accordion');
	firstImg.set('open','true').setStyles({'border':'3px solid #c2cabd', 'margin':'-3px -3px'});
	firstProduct.set('open', 'true').setStyles({'display': 'block', 'opacity': 1});
}

var accordion;
window.addEvent('domready', function() {
	var accordion = new Accordion($$('a[target=accordion] img'), $$('div.accordion'));
	$$('a[target=accordion] img').addEvent('click', setBold);
	setFirstItem();
});