/*
 * sIFR
 */
// Clothinglines headerImage h1
sIFR.replace(eurofurence, {
	  selector: '#clothinglines div.hoverbox h1',
	  css: '.sIFR-root { cursor: pointer; text-transform: uppercase; color: #96b33c; font-size: 42px;} .sIFR-root a { outline-style: none; color: #96b33c; text-decoration: none; } .sIFR-root a:hover { outline-style: none; color: #96b33c; text-decoration: none; }',
	  wmode: 'transparent'
});
// Clothinglines headerImage h3
sIFR.replace(gazette, {
	  selector: '#clothinglines div.hoverbox h3',
	  css: '.sIFR-root { cursor: pointer; color: #98906f; font-size: 15px; font-style: italic;}, .sIFR-root a { color: #98906f; text-decoration: none;}, .sIFR-root a:hover { color: #98906f; text-decoration: none;}',
	  wmode: 'transparent'
});
document.observe("dom:loaded", function() {
	
	$$('#clothinglines .clothingline').each(function(clothingline) {
		new ClothinglineZoom(clothingline);
	});
});

var ClothinglineZoom = Class.create({
	initialize: function(element) {
		this.element = element;
		
		this.options = Object.extend({
			overlayOpacity: 0.35
		}, arguments[1] || {});
		
		this.element.down('.overlay').setOpacity(0);
		
		this.startObserving();
	},
	
	startObserving: function() {
		this.element.down('div.hoverbox .link').observe(Katoenenzo.useEvent['mouseover'], Katoenenzo.capture(this.toggleZoom.bindAsEventListener(this)))
		.observe(Katoenenzo.useEvent['mouseout'], Katoenenzo.capture(this.toggleZoom.bindAsEventListener(this)))
		.observe('click', this.clickZoom.bindAsEventListener(this));
	},
	
	clickZoom: function(event) {
		event.stop();
		var element = event.findElement('.clothingline');
		if (element) {
			var number = (/_([0-9]+)*$/.exec(element.id) || [null, null])[1];
			window.location.href = Katoenenzo.options.webroot + 'clothinglines/clothingline/' + number;
		}
	},
	
	toggleZoom: function(event) {
		// cancel running effect
		if (this._toggleZoomEffect) this._toggleZoomEffect.cancel();
	
		var opacity = (event.type == Katoenenzo.useEvent['mouseover']) ? this.options.overlayOpacity : 0;
		var ext = {};
		// hiding
		if (opacity > 0) {
			ext.afterFinish = Element.show.curry(this.element.down('.icon'));
		}
		// showing
		else {
			this.element.down('.icon').hide();			
		}
		
		this._toggleZoomEffect = new Effect.Opacity(this.element.down('.overlay'), Object.extend(ext, {
			to: opacity,
			duration: 0.15
		}));		
	}
});