/* 
grid.js

Copyright 2010 Lifespaces, Inc., all rights reserved. 

Any copying or redistribution of any part of this document 
(or it's respective code) is strictly 
prohibited by law unless explicitly 
permitted by Lifespaces, Inc. 
*/

var grid_ref = null; // grid DOM reference
var bar_interval; // time interval for bar timeout recursion
var inc_t = 3; // incremental animation value
var preset = 1;
var imgs = new Array("ixi","ixii","ixiii","ixiiii","ixiiiii","iixi","iixii","iixiii","iixiiii","iixiiiii","iiixi","iiixii","iiixiii","iiixiiii","iiixiiiii");
var o = 1.0; // used by fadeout and fadein
var o_lay = 0.7;
var interv = 50; // fadeout/fadein interval
var over_p = 1;
var first;
var trans;


function grid() { // initialize
	grid_ref = document.getElementById("grid"); // set globals...
	bar_interval = 1;
	inc_t = 3;
	preset = 1;
	o = new Number(0.0);
	o = o.toFixed(1);
	o_lay = new Number(0.7);
	o_lay = o_lay.toFixed(1);
	over_p = 1;
	first = new Boolean(true);
	trans = 1;
	
	
	setTimeout("preload()",1); // preload the images in the background
	
	setTimeout("black_bars()",1350);
	
	if(navigator.appName=="Microsoft Internet Explorer") {
		if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ 
 		var ieversion=new Number(RegExp.$1);
 		if (ieversion>=8) bars(); // only load bars if the browser can do it; IE <= 7 sucks
 	}
 	}
	else bars(); // bring in the bars
	
	setTimeout("swapper()",2);
}

function black_bars() {
	if(navigator.appName=="Microsoft Internet Explorer") {
		if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ 
 		var ieversion=new Number(RegExp.$1);
 		if (ieversion < 8) return; // only load bars if the browser can do it; IE <= 7 sucks
 	}
 	}
	
	document.getElementById("vi").style.backgroundColor = "white";
	document.getElementById("vii").style.backgroundColor = "white";
	document.getElementById("viii").style.backgroundColor = "white";
	document.getElementById("viiii").style.backgroundColor = "white";
	document.getElementById("viiiii").style.backgroundColor = "white";
	document.getElementById("hi").style.backgroundColor = "white";
	document.getElementById("hii").style.backgroundColor = "white";
}

function swapper() {
	var lnk; // link target of whole grid
	var lnk_t; // link title (tooltip) of whole grid
	var np = 0; // (hack) control flow, enable random jumps
	o_lay = 0.7;
	
	if(first) first = false; 
	else fadeout_lay("lay");
	
	switch(preset) {
		case 1:
			lnk = "/home-theater.php";
			lnk_t = "Reference Home Theaters";
			np = 5;
		break;
	
		case 2:
			lnk = "/audio.php";
			lnk_t = "Integrated Audio";
			np = 22;
		break;
		
		case 3:
			lnk = "/commercial.php";
			lnk_t = "Commercial Applications";
			np = 13;
		break;
		
		case 4:
			lnk = "/access-control.php";
			lnk_t = "Access Control";
			np = 20;
		break;
		
		case 5:
			lnk = "/boardrooms.php";
			lnk_t = "Boardrooms";
			np = 17;
		break;
		
		case 6:
			lnk = "/entertainment.php";
			lnk_t = "Entertainment Rooms";
			np = 2;
		break;
		
		case 7:
			lnk = "/meeting-room.php";
			lnk_t = "Meeting Rooms";
			np = 11;
		break;
		
		case 8:
			lnk = "/electrical.php";
			lnk_t = "Energy Management";
			np = 15;
		break;
		
		case 9:
			lnk = "/apple-integration.php";
			lnk_t = "Authorized Resellers";
			np = 8;
		break;
		
		case 10:
			lnk = "/apple-integration.php";
			lnk_t = "Apple Integration Specialists";
			np = 4;
		break;
		
		case 11:
			lnk = "/systems-installation.php";
			lnk_t = "Structured Wiring";
			np = 16;
		break;
		
		case 12:
			lnk = "/entertainment.php";
			lnk_t = "Media Rooms";
			np = 19;
		break;
		
		case 13:
			lnk = "/climate.php";
			lnk_t = "HVAC Integration";
			np = 12;
		break;
		
		case 14:
			lnk = "/control.php";
			lnk_t = "Control Systems";
			np = 1;
		break;
		
		case 15:
			lnk = "/video-conferencing.php";
			lnk_t = "Video Teleconferencing";
			np = 6;
		break;
		
		case 16:
			lnk = "/video.php";
			lnk_t = "Distributed Video";
			np = 14;
		break;
		
		case 17:
			lnk = "/cctv.php";
			lnk_t = "Security Cameras";
			np = 9;
		break;
		
		case 18:
			lnk = "/Developer.php";
			lnk_t = "Apple Developers";
			np = 3;
		break;
		
		case 19:
			lnk = "/system-design.php";
			lnk_t = "System Design";
			np = 7;
		break;
		
		case 20:
			lnk = "/security.php";
			lnk_t = "Security Systems";
			np = 21;
		break;
		
		case 21:
			lnk = "/video.php";
			lnk_t = "HDTV";
			np = 18;
		break;
		
		case 22:
			lnk = "#";
			lnk_t = "Community Commitment";
			np = 10;
		break;
		
		default:
			preset = 1;
			return; // setInterval() will call this again with the new preset variable
		break;
	}
	
	grid_ref.style.backgroundColor = "white";
	
	switch(trans){
		case 1:
			setTimeout('swapout(0) ',1200);
			setTimeout('swapout(1) ',1700);
			setTimeout('swapout(2) ',1900);
			setTimeout('swapout(3) ',1100);
			setTimeout('swapout(4) ',1500);
			setTimeout('swapout(5) ',1000);
			setTimeout('swapout(6) ',1600);
			setTimeout('swapout(7) ',900 );
			setTimeout('swapout(8) ',600 );
			setTimeout('swapout(9) ',1400);
			setTimeout('swapout(10)',700 );
			setTimeout('swapout(11)',1800);
			setTimeout('swapout(12)',800 );
			setTimeout('swapout(13)',500 );
			setTimeout('swapout(14)',1300);
		break;
		
		case 2:
			setTimeout('swapout(0) ',1000);
			setTimeout('swapout(1) ',1300);
			setTimeout('swapout(2) ',800 );
			setTimeout('swapout(3) ',1600);
			setTimeout('swapout(4) ',1900);
			setTimeout('swapout(5) ',900 );
			setTimeout('swapout(6) ',1500);
			setTimeout('swapout(7) ',700 );
			setTimeout('swapout(8) ',1200);
			setTimeout('swapout(9) ',1700);
			setTimeout('swapout(10)',500 );
			setTimeout('swapout(11)',1800);
			setTimeout('swapout(12)',1100);
			setTimeout('swapout(13)',1400);
			setTimeout('swapout(14)',600 );
		break;
	
		case 3:
			setTimeout('swapout(0) ',1100);
			setTimeout('swapout(1) ',1400);
			setTimeout('swapout(2) ',1500);
			setTimeout('swapout(3) ',1300);
			setTimeout('swapout(4) ',1500);
			setTimeout('swapout(5) ',1000);
			setTimeout('swapout(6) ',1600);
			setTimeout('swapout(7) ',600 );
			setTimeout('swapout(8) ',500 );
			setTimeout('swapout(9) ',1400);
			setTimeout('swapout(10)',300 );
			setTimeout('swapout(11)',1900);
			setTimeout('swapout(12)',400 );
			setTimeout('swapout(13)',800 );
			setTimeout('swapout(14)',1000);
			
			trans = 0; // always must be in the last case
		break;
	
	}
	trans++; 
	
	setTimeout('overlay('+over_p+');',2500);
	
	o = 1.0;
	setTimeout('sidekick()',1500);
	document.getElementById("link").setAttribute("href",lnk);
	document.getElementById("link").setAttribute("title",lnk_t);
	document.getElementById("link2").setAttribute("href",lnk);
	document.getElementById("link2").setAttribute("title",lnk_t);
	document.getElementById("side_link").setAttribute("href",lnk);
	document.getElementById("side_link").setAttribute("title",lnk_t);
	document.getElementById("sk").setAttribute("alt",lnk_t);
	
	setTimeout("preset = "+np+";",2501);
	if(!window.timer) window.timer = window.setInterval("swapper()",5000);
	if(over_p == 22) over_p = 0;
	over_p++;
	return;
}

function overlay(lay_ref) {
	document.getElementById("lay").style.backgroundImage = "url('/Images/home-grid/images/bars/"+lay_ref+".png')";
	o_lay = 0.0;
	fadein_lay("lay");
}

function preload() {
	var instances = new Array();
	instances.length = 22;
	for(var p = 1; p <= 22; p++) {
	instances[p] = new Array();
	instances[p].length = 20;
		for(var i = 1; i <= 15; i++) {
		instances[p][i] = new Image();
			if(p == 1){
				instances[p][i].src = "/Images/home-grid/images/1a_"+seq(i)+".png";
			}
			else {
				instances[p][i].src = "/Images/home-grid/images/image-"+(p)+"a_"+seq(i)+".png";
			}
		}
	instances[p][16] = new Image(); instances[p][17] = new Image();
	instances[p][16].src = "/Images/home-grid/images/Sidekicks/image-"+p+"b.jpg"; // sidekick image
	instances[p][17].src = '/Images/home-grid/images/bars/'+p+'.png'; // overlay image
	}
}

function swapout(iter) {
	var newsrc;
	if((preset) == 1) newsrc = "/Images/home-grid/images/1a_"+seq(iter + 1)+".png";
	else newsrc = "/Images/home-grid/images/image-"+(preset)+"a_"+seq(iter + 1)+".png";
	// document.getElementById(imgs[iter]).setAttribute("src","/Images/What_We_Do/images/images/45.jpg");
	setTimeout('document.getElementById("'+imgs[iter]+'").setAttribute("src","'+newsrc+'")',300);
}

function sidekick() { 
	FadeInImage('sk',"/Images/home-grid/images/Sidekicks/image-"+preset+"b.jpg",'side')
	return;
}

function seq(num) { // format image sequence, fairly simplistic
	if(num < 10) return "0"+num.toString();
	else return num.toString();
}


function fadeout(id){
	var e = document.getElementById(id);
	if(o > 0.0) {
		o -= 0.1;
		if(navigator.appName=="Microsoft Internet Explorer") e.style.filter = "alpha(opacity="+(o * 100)+")";
		else e.style.opacity = o;
		if(!e.timer) e.timer = window.setInterval('fadeout("'+id+'")',interv);
	}
	else {
		o = 0.0;
		clearInterval(e.timer);
		if(navigator.appName=="Microsoft Internet Explorer") e.style.filter = "alpha(opacity=0)";
		else e.style.opacity = 0.0;
		e.timer = null;
	}
}

function fadein(id) {
	var e = document.getElementById(id);
	if(o.toFixed(1) < 1.0) {
		o += 0.1;
		if(navigator.appName=="Microsoft Internet Explorer") e.style.filter = "alpha(opacity="+(o * 100)+")";
		else e.style.opacity = o;
		if(!e.timer) e.timer = window.setInterval('fadein("'+id+'")',interv);
	}
	else {
		o = 1.0;
		clearInterval(e.timer);
		if(navigator.appName=="Microsoft Internet Explorer") e.style.filter = "alpha(opacity=100)";
		else e.style.opacity = 1.0;
		e.timer = null;
	}
}

function fadeout_lay(id){
	var e = document.getElementById(id);
	if(o_lay > 0.0) {
		o_lay -= 0.1;
		if(navigator.appName=="Microsoft Internet Explorer") e.style.filter = "alpha(opacity="+(o_lay * 100)+")";
		else e.style.opacity = o_lay;
		if(!e.timer) e.timer = window.setInterval('fadeout_lay("'+id+'")',interv);
	}
	else {
		o_lay = 0.0;
		clearInterval(e.timer);
		if(navigator.appName=="Microsoft Internet Explorer") e.style.filter = "alpha(opacity=0)";
		else e.style.opacity = 0.0;
		e.timer = null;
	}
}

function fadein_lay(id) {
	var e = document.getElementById(id);
	if(o_lay.toFixed(1) < 0.7) {
		o_lay += 0.1;
		if(navigator.appName=="Microsoft Internet Explorer") e.style.filter = "alpha(opacity="+(o_lay * 100)+")";
		else e.style.opacity = o_lay;
		if(!e.timer) e.timer = window.setInterval('fadein_lay("'+id+'")',interv);
	}
	else {
		o_lay = 0.7;
		clearInterval(e.timer);
		if(navigator.appName=="Microsoft Internet Explorer") e.style.filter = "alpha(opacity=70)";
		else e.style.opacity = 0.7;
		e.timer = null;
	}
}

function bars() { // brings in the bars
	var vi = document.createElement("div"); // create the DOM div's
	var vii = document.createElement("div");
	var viii = document.createElement("div");
	var viiii = document.createElement("div");
	var viiiii = document.createElement("div");
	var viiiiii = document.createElement("div");
	var hi = document.createElement("div");
	var hii = document.createElement("div");
	
	// document.removeChild(document.getElementById("hi"));
	// document.removeChild(document.getElementById("hii"));
	
	vi.setAttribute("id","vi"); // set the IDs for both DOM reference and CSS styling (yes, this works)
	vii.setAttribute("id","vii");
	viii.setAttribute("id","viii");
	viiii.setAttribute("id","viiii");
	viiiii.setAttribute("id","viiiii");
	viiiiii.setAttribute("id","viiiiii");
	hi.setAttribute("id","hi");
	hii.setAttribute("id","hii");
	
	grid_ref.appendChild(hi); // first the horizontal bars
	hi_in();
	grid_ref.appendChild(hii);
	hii_in();
	
	grid_ref.appendChild(vi); // then the verticals
	vi_in();
	grid_ref.appendChild(vii);
	vii_in();
	grid_ref.appendChild(viii);
	viii_in();
	grid_ref.appendChild(viiii);
	viiii_in();
	grid_ref.appendChild(viiiii);
	viiiii_in();
	
	recede(); // then bring in the bars from the right, for asthetics
	
	return 1; // JS-opt hack
}

var hi_t = 0;
function hi_in() {
	ref = document.getElementById("hi");
	if(hi_t < 105){
		hi_t += inc_t;
		ref.style.top = hi_t+"px";
		setTimeout(hi_in,bar_interval);
	}
	else {	
		ref.style.top = "105px";
		return;
	}
}

var hii_t = 0;
function hii_in() {
	ref = document.getElementById("hii");
	if(hii_t < (105*2)){
		hii_t += inc_t;
		ref.style.top = hii_t+"px";
		setTimeout(hii_in,bar_interval);
	}
	else {
		ref.style.top = (105*2)+"px";
		return;
	}
}

var vi_t = 0;
function vi_in() {
	ref = document.getElementById("vi");
	if(vi_t < 108){
		vi_t += inc_t;
		ref.style.left = vi_t+"px";
		setTimeout(vi_in,bar_interval);
	}
	else {
		ref.style.left = "108px";
		return;
	}
}

var vii_t = 0;
function vii_in() {
	ref = document.getElementById("vii");
	if(vii_t < (108*2)){
		vii_t += inc_t;
		ref.style.left = vii_t+"px";
		setTimeout(vii_in,bar_interval);
	}
	else {
		ref.style.left = (108*2)+"px";
		return;
	}
}

var viii_t = 0;
function viii_in() {
	ref = document.getElementById("viii");
	if(viii_t < (108*3)){
		viii_t += inc_t;
		ref.style.left = viii_t+"px";
		setTimeout(viii_in,bar_interval);
	}
	else {
		ref.style.left = (108*3)+"px";
		return;
	}
}

var viiii_t = 0;
function viiii_in() {
	ref = document.getElementById("viiii");
	if(viiii_t < (108*4)){
		viiii_t += inc_t;
		ref.style.left = viiii_t+"px";
		setTimeout(viiii_in,bar_interval);
	}
	else {
		ref.style.left = (108*4)+"px";
		return;
	}
}

var viiiii_t = 0;
function viiiii_in() {
	ref = document.getElementById("viiiii");
	if(viiiii_t < (108*5)){
		viiiii_t += inc_t;
		ref.style.left = viiiii_t+"px";
		setTimeout(viiiii_in,1);
	}
	else {
		ref.style.left = (108*5)+"px";
		return;
	}
}

var w_t = (790);
function recede() {
	ref = document.getElementById("hi");
	reff = document.getElementById("hii");
	if(w_t > 540){
		w_t -= inc_t;
		ref.style.width =  w_t.toString()+"px";
		reff.style.width = w_t.toString()+"px";
		setTimeout(recede,bar_interval);
	}
	else {
		ref.style.width = "540px";
		reff.style.width = "540px";
		return;
	}
}

function SetOpacity(object,opacityPct)
{
  // IE.
  object.style.filter = 'alpha(opacity=' + opacityPct + ')';
  // Old mozilla and firefox
  object.style.MozOpacity = opacityPct/100;
  // Everything else.
  object.style.opacity = opacityPct/100;
}
function ChangeOpacity(id,msDuration,msStart,fromO,toO)
{
  var element=document.getElementById(id);
  var opacity = element.style.opacity * 100;
  var msNow = (new Date()).getTime();
  opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;
  if (opacity<0) 
    SetOpacity(element,0)
  else if (opacity>100)
    SetOpacity(element,100)
  else
  {
    SetOpacity(element,opacity);
    element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",1);
  }
}
function FadeIn(id)
{
  var element=document.getElementById(id);
  if (element.timer) window.clearTimeout(element.timer); 
  var startMS = (new Date()).getTime();
  element.timer = window.setTimeout("ChangeOpacity('" + id + "',1000," + startMS + ",0,100)",1);
}
function FadeOut(id)
{
  var element=document.getElementById(id);
  if (element.timer) window.clearTimeout(element.timer); 
  var startMS = (new Date()).getTime();
  element.timer = window.setTimeout("ChangeOpacity('" + id + "',1000," + startMS + ",100,0)",1);
}
function FadeInImage(foregroundID,newImage,backgroundID)
{
  var foreground=document.getElementById(foregroundID);
  if (backgroundID)
  {
    var background=document.getElementById(backgroundID);
    if (background)
    {
      background.style.backgroundImage = 'url(' + foreground.src + ')';
      background.style.backgroundRepeat = 'no-repeat';
    }
  }
  SetOpacity(foreground,0);
  foreground.src = newImage;
  if (foreground.timer) window.clearTimeout(foreground.timer); 
  var startMS = (new Date()).getTime();
  foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "',1000," + startMS + ",0,100)",10);
}