var slideshow = null;

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

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

	slideshow = new CCSlideShow($('slideshow'));
	setSlideContent(slideshow.slide_data_array[slideshow.index]);
});

var CCSlideShow = new Class({
	initialize: function(in_root_dom) {
		this.self = null;
		this.slides = null;
		this.slide_data_array = null;

		this.copy_pane = null;
		this.copy_container_a = null;
		this.copy_container_b = null;

		this.image_pane = null;
		this.title_pane = null;
		this.controls = null;

		this.focus_image = null;
		this.focus_title = null;
		this.focus_description = null;

		this.index = 0;

		// initialize data
		this.self = in_root_dom;
		this.slide_data_array = new Array();
		this.slides = in_root_dom.getElements('ul#slides li');

		for(var i = 0; i < this.slides.length; i++) {
			var slide_data_element = {
				'description' : this.slides[i].getElements('div.description')[0],
				'image' : this.slides[i].getElements('img')[0],
				'href' : 'http://www.google.com/',
				'title' : this.slides[i].getElements('div.title')[0]
			}
			this.slide_data_array.push(slide_data_element);
		}
		
		this.data_source = $('slides');
		
		//$(this.data_source).style.height = '0';
		//$(this.data_source).style.overflow = 'hidden';
		$(this.data_source).style.position = 'absolute';
		$(this.data_source).style.zIndex = '-1';

		// build slideshow display elements

		// for copy
		this.copy_pane  = document.createElement("div");
		this.copy_pane.id = "slide-copy";
		
		// --
		this.copy_container_a = document.createElement('div');
		this.copy_container_a.className = 'copy-container';
		this.copy_pane.appendChild(this.copy_container_a);
		// --
		this.copy_container_b = document.createElement('div');
		this.copy_container_b.setAttribute('class', 'copy-container');
		this.copy_pane.appendChild(this.copy_container_b);

		// for image
		this.image_pane = document.createElement("div");
		this.image_pane.className = 'slide-images';
		//this.focus_image = document.createElement("img");
		//this.image_pane.appendChild(this.focus_image);

		// for title
		this.title_pane = document.createElement("div");
		this.title_pane.id = "slide-titles";
		
		this.controls = document.createElement('div');
		this.controls.className = 'slide-controls';

		var btn_previous = document.createElement('a');
		btn_previous.appendChild(document.createTextNode('<'));
		var btn_next = document.createElement('a');
		btn_next.appendChild(document.createTextNode('>'));
		$(btn_previous).addEvent('click', previousImage);
		$(btn_next).addEvent('click', nextImage);
		this.controls.appendChild(btn_previous);
		this.controls.appendChild(btn_next);

		// attach it all to visible element
		this.self.appendChild(this.copy_pane);
		this.self.appendChild(this.image_pane);
		this.self.appendChild(this.title_pane);
		this.self.appendChild(this.controls);
	}
});

function previousImage() {
	slideshow.index = (slideshow.index - 1) % slideshow.slide_data_array.length;
	slideshow.index = slideshow.index >= 0 ? slideshow.index : (slideshow.slide_data_array.length + slideshow.index);
	setSlideContent(slideshow.slide_data_array[slideshow.index]);
}
function nextImage() {
	slideshow.index = (slideshow.index + 1) % slideshow.slide_data_array.length;
	setSlideContent(slideshow.slide_data_array[slideshow.index]);
}
function setSlideContent(data) {
	if(slideshow.focus_title != null) {
		slideshow.title_pane.removeChild(slideshow.focus_title);
		slideshow.copy_container_a.removeChild(slideshow.focus_description);
		slideshow.image_pane.removeChild(slideshow.focus_image);
	}
	
	slideshow.focus_title       = data.title;
	slideshow.focus_description = data.description;
	slideshow.focus_image       = data.image;

	slideshow.copy_container_a.appendChild(slideshow.focus_description);
	slideshow.image_pane.appendChild(slideshow.focus_image);
	slideshow.title_pane.appendChild(slideshow.focus_title);

	$(slideshow.focus_image).set('opacity', 0);
	$(slideshow.focus_image).set('morph', {duration: 'long', transition: 'linear'});
	$(slideshow.focus_image).morph({'opacity': 1});

}

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' : '-5'
		});

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

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

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

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

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

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

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

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

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