//preload the flash images so it looks better loading
if (document.images) {
	pic1 = new Image();
	pic1.src = "/images/phantom-screens-1.jpg";
	pic2 = new Image();
	pic2.src = "/images/phantom-screens-2.jpg";
	pic3 = new Image();
	pic3.src = "/images/phantom-screens-3.jpg";
	pic4 = new Image();
	pic4.src = "/images/phantom-screens-4.jpg";
};

//setup of navigation to hide elements
function setupNavigation() {
	
	var sgrel = $('screen_gallery').getAttribute('title');
	var brel = $('business').getAttribute('title');
	var ccrel = $('customer_care').getAttribute('title');
	var prel = $('product').getAttribute('title');
	var arel = $('about').getAttribute('title');
	var tsrel = $('ts').getAttribute('title');
	
	if (sgrel == 'hide') { $('screen_gallery').style.display = "none"; }
	if (brel == 'hide') { $('business').style.display = "none"; }
	if (ccrel == 'hide') { $('customer_care').style.display = "none"; }
	if (prel == 'hide') { $('product').style.display = "none"; }
	if (arel == 'hide') { $('about').style.display = "none"; }
	if (tsrel == 'hide') { $('ts').style.display = "none"; }
}

//sub toggle navigations
function subToggle(id) {
	var id = Event.element(id).id;
	var elmId = $(id);
	var toggleElement = elmId.next();
	if (toggleElement.style.display == 'none') {
		elmId.addClassName('active');
		toggleElement.removeAttribute('title')
	} else {
		elmId.removeClassName('active');
	}
	new Effect.toggle(toggleElement, 'blind', { duration: 1.0 });
}

//the cool three hover effects
function hoverEvent(e) {
 	var id = Event.element(e).id;
	if (id == "" || id == "null" || id == null) { return false };
	if (id == 'door_screen') {
		new Effect.Parallel([
			new Effect.Morph('serene_screen', {style: 'width: 182px',sync: true,fps: 200, transition:Effect.Transitions.linear}),
			new Effect.Morph('executive_screen', {style: 'width: 182px',sync: true,fps: 200, transition:Effect.Transitions.linear}),
			new Effect.Morph('door_screen', {style: 'width: 263px',sync: true,fps: 200, transition:Effect.Transitions.linear})
		], {duration: .1});
	} else if (id == 'serene_screen') {
		new Effect.Parallel([
			new Effect.Morph('door_screen', {style: 'width: 182px',sync: true,fps: 200, transition:Effect.Transitions.linear}),
			new Effect.Morph('executive_screen', {style: 'width: 182px',sync: true,fps: 200, transition:Effect.Transitions.linear}),
			new Effect.Morph('serene_screen', {style: 'width: 263px',sync: true,fps: 200, transition:Effect.Transitions.linear})
		], {duration: .1});
	} else if (id == 'executive_screen') {
		new Effect.Parallel([
			new Effect.Morph('serene_screen', {style: 'width: 182px',sync: true,fps: 200, transition:Effect.Transitions.linear}),
			new Effect.Morph('door_screen', {style: 'width: 182px',sync: true,fps: 200, transition:Effect.Transitions.linear}),
			new Effect.Morph('executive_screen', {style: 'width: 263px',sync: true,fps: 200, transition:Effect.Transitions.linear})
		], {duration: .1});
	};
}
function maxxDid() {
	//browser test
	if (!document.getElementsByTagName) return false;
	
	//the menu listeners for hover
	$('about_toggle').observe('click', subToggle.bindAsEventListener(this));
	$('business_toggle').observe('click', subToggle.bindAsEventListener(this));
	$('customer_care_toggle').observe('click', subToggle.bindAsEventListener(this));
	$('product_toggle').observe('click', subToggle.bindAsEventListener(this));
	$('screen_gallery_toggle').observe('click', subToggle.bindAsEventListener(this));
	$('ts_toggle').observe('click', subToggle.bindAsEventListener(this));
	
	//box hover listeners
	var div = $('box_holder');
	var containers = div.getElementsByTagName('div');
	for (var i=0; i < containers.length; i++) {
		containers[i].observe('mouseover', hoverEvent.bindAsEventListener(this));
	};
}
document.observe('dom:loaded', function() {
	setupNavigation();
	maxxDid();
})