window.addEvent('domready', function() {
	vignettes = new Array();

	$$('.vignette').each(function(dom_vignette) {
		vignette = new Vignette(dom_vignette);
		vignettes[vignette.id] = vignette;
	});
});

var Vignette = new Class ({
	// @ student JSON oject
	initialize: function(in_root_dom) {
		this.self = in_root_dom;
		//this.self.js = this;

		this.id = in_root_dom.get('rel');

		this.border_top      = this.self.border_top      = this.self.getElements('.border-top')[0];
		this.border_bottom   = this.self.border_bottom   = this.self.getElements('.border-bottom')[0];
		this.image_screen    = this.self.image_screen    = this.self.getElements('.image-screen')[0];
		this.screen_content  = this.self.screen_content  = this.self.getElements('.screen-content')[0];
		this.vignette_name   = this.self.vignette_name   = this.self.getElements('.vignette-name')[0];
		this.plus		     = this.self.plus            = this.self.getElements('.vignette-plus')[0];

		this.bindFX();
	},

	bindFX: function() {
		this.border_top_fx      = new Fx.Morph(this.self.border_top, {wait: false, duration: 400});
		this.image_screen_fx    = new Fx.Morph(this.self.image_screen, {wait: false, duration: 500});
		this.plus_fx            = new Fx.Morph(this.self.plus, {wait: false, duration: 400});
		this.name_fx            = new Fx.Morph(this.self.vignette_name, {wait: false, duration: 400, transition: 'linear'});

		this.hide();

		this.self.addEvent('mouseenter', this.reveal);
		this.self.addEvent('mouseleave', this.hide);
	},
	
	reveal: function(el) {
		var temp_vignette = (el != null) ? getVignette(this.get('rel')) : this;

		temp_vignette.border_top_fx.start({
			'margin-top' : '0'
		});

		temp_vignette.image_screen_fx.start({
			'margin-top' : '0'
		});

		temp_vignette.plus_fx.start({
			'margin-left' : '16'
		});

		temp_vignette.name_fx.start({
			'margin-left' : '-400'
		});
	},

	hide: function(el) {
		var temp_vignette = (el != null) ? getVignette(this.get('rel')) : this;

		temp_vignette.border_top_fx.start({
			'margin-top' : '-21'
		});

		temp_vignette.image_screen_fx.start({
			'margin-top' : '200'
		});

		temp_vignette.plus_fx.start({
			'margin-left' : '-32'
		});

		temp_vignette.name_fx.start({
			'margin-left' : '16'
		});
	}
});

function getVignette(in_id) {
	return vignettes[in_id];
}