window.addEvent('domready', function() {
	var container = $('key_visual');
	var image_fade_duration = 200;
	var row_fade_duration = 300;
	var initial_delay = 1000;
	
	var images = container.getElements('img');
	var images_still_hidden = images;
	images.setStyle('opacity', 0);

	var rows = container.getElements('div.row');
	
	/*
	images = container.getElements('a img');
	images_still_hidden = images;


	rows.setStyle('opacity', 0);
	var row_periodical;
	var which_row = 0;
	function fade_in_row(){
		if (which_row == rows.length) {
			$clear(row_periodical);
			//container.setStyle('background-image', 'url(/media/images/animation/pinstripe_bg.gif)');
		}
		else {
			rows[which_row].fade('in');
			which_row++;
		}
	}
	row_periodical = fade_in_row.periodical(row_fade_duration);
	*/
	
	//images of all rows except the first need to be shifted up by -1px
	/*
	Does not work in IE
	container.getElements('div.row').each(function(row, i){
		row.setStyle('margin-bottom', '-1px');
	});
	*/

	/*
	container.getElements('img').each(function(row, i){
		//row.setStyle('position', 'relative');
		//row.setStyle('top', '-1px');
	});
	*/
	
	var text;
	container.getElements('a').addEvent('mouseenter', function(e){
		//this.getParent().setStyle('opacity', '0');
		this.getParent().getElements('img').erase(this.getElement('img')).fade('0.2');

		text = new Element('div', {'text': this.get('title'), 'styles': {'opacity': '0', 'position': 'absolute'}});
		this.getParent().adopt(text);

		var position = this.getCoordinates();
		var set_position = {};

		if (Browser.Engine.trident){
			position.left = this.getBoundingClientRect().left;
			position.top = this.getBoundingClientRect().top;

			position.top -= 55;
			position.left -= 275;
		}

		set_position['y'] = position.top - 30;
		if (this.hasClass('right')) {
			set_position['x'] = position.left + (position.width + 15);
		}
		else {
			set_position['x'] = position.left - (position.width + 185);
			text.setStyles({'text-align': 'right', 'width': 300});
		}
		text.setPosition(set_position);
		text.fade('in');
	});
	container.getElements('a').addEvent('mouseleave', function(e){
		//this.getParent().setStyle('opacity', '1');
		this.getParent().getElements('img').erase(this.getElement('img')).fade('in');
		text.dispose();
	});
	
	var periodical;
	function fade_in_random() {
		if (images_still_hidden.length == 0) {
			$clear(periodical);
			container.setStyle('background-image', 'none');
		}
		else {
			var to_fade_in = images_still_hidden.getRandom();
			to_fade_in.fade('in');
			images_still_hidden.erase(to_fade_in);
		}
		};

	(function(){
		periodical = fade_in_random.periodical(image_fade_duration);
	//}).delay(rows.length * row_fade_duration);
	}).delay(initial_delay);
});