// JavaScript Document

// Configuration
var img_path = '../images/';
var projects = [
		
	// 1

	{
		'name': '3000 The Plaza',
		'image': img_path + '3000plazaBox.jpg',
		'text': '<br />',
		'text_style': 'bottom: 150px; left: 0px;',
		'weblink': '../high-rise/high-rise.php?groups=3'
	},
	
	// 2
	{
		'name': 'Marquee Park Place', 
		'image': img_path + 'marqueeBox.jpg', 
		'text': '<br />',
		'text_style': 'bottom: 120px; left: 0px;',
		'weblink': '../high-rise/high-rise.php?groups=1'
	},
	
	// 3

	{
		
		'name': 'The Plaza Irvine', 	
		'image': img_path + 'thePlazaBox.jpg', 
		'text': '<br />', 
		'text_style': 'bottom: 95px; right: 0px;',
		'weblink': '../high-rise/high-rise.php?groups=2'
	},
	
	// 4
	{
		'name': 'Cove Marina Del Rey',
		'image': img_path + 'coveBox.jpg', 
		'text': '<br />', 
		'text_style': 'bottom: 200px; left: 0px;',
		'weblink': '../high-rise/high-rise.php?groups=15'
	}
];

interval = 5; 	// Scroll every x second(s)
var menu_line_height = '18px';




////////////////////////////////////////////////////////////////////////////
// Please don't edit any lines below if you don't know what you are doing //
////////////////////////////////////////////////////////////////////////////

var images = new Array();

for(j = 0; j < projects.length ; j++)
{
	images[j] = projects[j].image;
}

new Asset.images(images); 	// Preload images


window.addEvent('domready', function(){

	var projects_count = projects.length;

	// Add links
	for(index = 0; index < projects_count; index++)
	{
		new Element('p', {'class': 'menu_link'}).setHTML(projects[index].name).injectInside($('links'));
	}
	
	$('links').setStyle('line-height', menu_line_height);
	
	var first_project = Math.round(Math.random()*(projects_count - 1));	// Highlight an element randomly
	var i = first_project;
	var links = $$('p.menu_link');
	var container1 = $('container1');
	var container2 = $('container2');
	var image1 = $('image1');
	var text1 = $('text1');
	var image2 = $('image2');
	var text2 = $('text2');	
	var image_link1 = $$('a.image_link1');
	var image_link2 = $$('a.image_link2');
	var image_container = $('image_container');	
	
	// Initialize
	var image = image1;
	var image_link = image_link1;
	var text = text1;
	var container = container1;
	
	// Load image and text for the first project
	image.setProperty('src', projects[i].image);
	text.setStyles(projects[i].text_style);
	text.setHTML(projects[i].text);
	links[i].toggleClass('menu_link_selected');
	
	// Set events for links & regions
	links.each(function(item, index){
		item.addEvent('click', function(){window.location=projects[index].weblink});
	});
	
	image_link.each(function(item, index){
		item.setProperty('href', projects[index].weblink)
	});
			
	function menu_effect()
	{
		i++;
		if(i == projects_count) {
			i = 0;
		}
		
		// Step 1: Highlight the link	
		
		links[i].toggleClass('menu_link_selected');
		if(i != 0) {
			links[i-1].toggleClass('menu_link_selected');
		} else {
			links[projects_count-1].toggleClass('menu_link_selected');
		}

		
		// Step 2: Load the image & text
		image = (image == image1) ? image2 : image1;
		text = (text == text1) ? text2 : text1;
		image_link = (image_link == image_link1) ? image_link2 : image_link1;
		container = (container == container1) ? container2 : container1;	
		
		image_link.each(function(item, index){
			item.setProperty('href', projects[index].weblink)
		});
		
		image.setProperty('src', projects[i].image);
		text.setStyle(projects[i].text_style);
		text.setHTML(projects[i].text);
		
		// Step 3: Scroll the images

		var image_effect = image_container.effect('margin-top', {duration: 1000, transition: Fx.Transitions.Quad.easeIn});
		image_effect.start(-340).chain(function(){
			image_container.setStyle('margin-top', 0);	
			container == container2 ? container1.injectAfter(container) : container2.injectAfter(container);
			image == image1 ? image2.setProperty('src', projects[i].image):image1.setProperty('src', projects[i].image);
		});
		
	}
	
	function check_timer() { // I have to use this function because it seems that periodical() doesn't work well in Firefox
		var current_timer = $time();
		if(current_timer - previous_timer >= interval*1000) {
	
			previous_timer = $time();
			menu_effect();
		}
	}
	
	previous_timer = $time();
	
	check_timer.periodical(interval*1000);

});