var W3CDOM = document.getElementById;

var dir = '.';

var curpage = "commercial";

//Using "GET" with javascript to get the curpage from url:
if(window.location != null && window.location.search.length > 1 )
{
	var urlParameters = window.location.search.substring(1);
	var parameterPair = urlParameters.split('&');
	var pos = parameterPair[0].indexOf('=');
	
	var argVal = parameterPair[0].substring(pos + 1);

	if (argVal == "inprogress")
		curpage = argVal;
		
	else if (argVal == "residential")
		curpage = argVal;
	
	else if (argVal == "commercial")
		curpage = argVal;

}

var curtile = "tile1";

var activeTile ="tile1";

var cords = new Array();

var pics = new Array();

var num_pics = 0;

var cur_pic = 0;

window.onload=start;

var request = null;
try {
  request = new XMLHttpRequest();
} catch (trymicrosoft) {
  try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (othermicrosoft) {
    try {
      request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (failed) {
      request = null;
    }
  }
}

function setPics(Dir){
	
	curtile = Dir;
	dir = "./images/gallery/" + curpage + "/" + Dir + "/";
	
	var url =  'PHP/picxml.php?path=.' + dir;
	request.open("GET", url, true);
	request.onreadystatechange = updateGallery;
	request.send(null);
	}

function updateGallery()
{
if (request.readyState == 4) 
	{
		if (request.status == 200) 
		try
		{
			var xmlDoc = request.responseXML;
			
			var img = xmlDoc.getElementsByTagName("img");
			
			num_pics = img.length;

			cur_pic = 0;
			
			if (num_pics > 0)
			{
				for (var n=0; n<num_pics; n++)
				{
					pics[n] = img[n].firstChild.nodeValue;
				}
				
				update_gallery();
				
				var tile = document.getElementById(curtile);
	
				var TileNum = get_tilenum(curtile); // the number tile that was clicked on 1,2,3, etc			
				
				var urlXML = xmlDoc.getElementsByTagName("url"); //from xml
				var descXML = xmlDoc.getElementsByTagName("desc"); //from xml
					
				var textHTML1 = document.getElementById("gallerytext1"); //from index .html
				clearText(textHTML1);
				
				var textHTML2 = document.getElementById("gallerytext2"); //from index .html
				clearText(textHTML2);
				
				tile.style.background = "url(../images/" + curpage + ".jpg) " + cords[TileNum - 1];
				
				//Address
				var h4 = document.createElement('h4');
				h4.value= descXML[0].firstChild.nodeValue;
				h4.appendChild(document.createTextNode(descXML[0].firstChild.nodeValue));
				h4.appendChild(document.createElement('br'));
				
				textHTML1.appendChild(h4);
				
				//Location
				var h5 = document.createElement('h5');
				h5.value= descXML[1].firstChild.nodeValue;
				h5.appendChild(document.createTextNode(descXML[1].firstChild.nodeValue));
				
				textHTML1.appendChild(h5);
				
				//Description
				
				var p2 = document.createElement('p');
				
				if (urlXML.length > 0)
				{
					var a1 = document.createElement('a');
					a1.setAttribute("href", urlXML[0].firstChild.nodeValue);
					a1.value = urlXML[1].firstChild.nodeValue;
					a1.appendChild(document.createTextNode(a1.value));
					p2.appendChild(a1);
					
					var img1 = document.createElement('img');
					img1.src = urlXML[2].firstChild.nodeValue;
					img1.setAttribute("width", "125px");
					a1.appendChild(img1);
					p2.appendChild(a1);
					p2.appendChild(document.createElement('br'));
				}
				
				
				for (y=2;y<descXML.length;y++)
				{
							
					{
						p2.value= descXML[y].firstChild.nodeValue;
						
						
						if (p2.value == "br")
						{
							p2.appendChild(document.createElement('br'));
						}
						else if (p2.value == "id")
						{
							var span = document.createElement('span'); // For changing font in P tag
							y++;
							//span.setAttribute("id",descXML[y].firstChild.nodeValue);
							span.id = descXML[y].firstChild.nodeValue;
							y++;
							span.appendChild(document.createTextNode(descXML[y].firstChild.nodeValue));
							p2.appendChild(span);
							
						}
						else
						{
							p2.appendChild(document.createTextNode(descXML[y].firstChild.nodeValue));
						}
						textHTML2.appendChild(p2);
					}
				}
	
				if (activeTile != curtile)
				{
					clearTile()
				}
			}
			else{curtile=activeTile;}
		}
		catch(err){curtile=activeTile}
	}
}

function clearTile() 
{
	var clearT = document.getElementById(activeTile); //clear the last tile before hilighting the new
	clearT.style.background = "";
	activeTile = curtile;
}

function clearText(el) {
  if (el != null) {
    if (el.childNodes) {
	while (el.firstChild) {
		el.removeChild(el.firstChild);
      }
    }
  }
}

function get_tilenum(t)
{
	return parseFloat(t.substring(4,t.length));
}

function get_cords()
{	
  var url = "./javascript/cords.xml?dummy=" + new Date().getTime();
  request.open("GET", url, true);
  request.onreadystatechange = updateCords;
  request.send(null);
}
var updateCords = function() 
{	  
  if (request.readyState == 4) 
	{
	if (request.status == 200) 
		{
			var xmlDoc = request.responseXML;
			
			var t_cords = xmlDoc.getElementsByTagName("tile");
			
			for (var n=0; n<t_cords.length; n++)
			{
				cords[n] = t_cords[n].firstChild.nodeValue;
			}
		}
	}
}

function getObj(idvalue) {
return document.getElementById(idvalue);
}

function projpage(proj)
{
	if (proj.id != curpage)
	{
		num_pics = 0;
		cur_pic = 0;
		var headingHTML = document.getElementById("galleryheading"); //from index .html
		clearText(headingHTML);				
		var textHTML1 = document.getElementById("gallerytext1"); //from index .html
		clearText(textHTML1);
		var textHTML2 = document.getElementById("gallerytext2"); //from index .html
		clearText(textHTML2);
		var galleryCont = document.getElementById("gallerycontainer");
		galleryCont.style.background = "";
		
		var clearNav = document.getElementById(curpage);
		clearNav.style.background = "";
		
		clearTile();
		
		var tiles = document.getElementById("tiles");
		
		if (proj.id != "aboutmosaic")
		{
			var p = document.createElement('p');
			var brochure = document.getElementById("brochure") //To change visibility
			brochure.style.visibility = "hidden";
			p.value= "&lt; click on an image at left to view project details";
			p.appendChild(document.createTextNode("< click on an image at left to view project details"));
			
			headingHTML.appendChild(p);
			
			tiles.style.background = "url(../images/" + proj.id + ".jpg) no-repeat";
				
			if (proj.id == "commercial")
			{
				proj.style.background = "url(../images/commercial.jpg) -29px -883px no-repeat";
			}
			
			if (proj.id == "residential")
			{
				brochure.style.visibility = "visible";
				proj.style.background = "url(../images/residential.jpg) -29px -908px no-repeat";
			}
			
			
			if (proj.id == "inprogress")
			{
				proj.style.background = "url(../images/commercial.jpg) -29px -933px no-repeat";
			}		
		}
		else if (proj.id == "aboutmosaic")
		{
			tiles.style.background = "url(../images/" + proj.id + ".jpg) no-repeat";
			
			proj.style.background = "url(../images/commercial.jpg) -29px -957px no-repeat";
		}
		curpage = proj.id;
	}
}

function MouseOver(c_tile)
{
	var n = get_tilenum(c_tile.id);
	c_tile.style.background = "url(../images/" + curpage + ".jpg) " + cords[n - 1];

}

function MouseOut(c_tile)
{
	var n = get_tilenum(c_tile.id);
	
	if (c_tile.id != curtile)
		c_tile.style.background = "";
}

function arrow_click(move)
{
	if (num_pics > 0)
	{
		if (move.id == "right")
		{
			cur_pic++;
			if (cur_pic >= num_pics)
				cur_pic = 0;
		}
		
		else if (move.id == "left")
		{
			cur_pic--;
			if (cur_pic < 0)
				cur_pic = num_pics -1;
		}		
		update_gallery();
	}
}

function update_gallery()
{
	var galleryCont = document.getElementById("gallerycontainer");
	
	galleryCont.style.background = "url(" + dir +  pics[cur_pic] + ") top center no-repeat";
	
	//heading
	var headingHTML = document.getElementById("galleryheading"); //from index .html
	clearText(headingHTML);	
	var p = document.createElement('p');
	p.value= (cur_pic+1) + " of " + num_pics;
	p.appendChild(document.createTextNode((cur_pic+1) + " of " + num_pics));
	
	headingHTML.appendChild(p);

}

function start() {
if (!W3CDOM) return;

get_cords();
//alert (curpage);
if (curpage != "aboutmosaic")
{
var tile = new Array();

for (tc=1; tc<22; tc++)
{
	var Tile = "tile" + tc;
	tile[tc] = getObj(Tile);
	
	try
	{tile[tc].onclick = function(){setPics(this.id)}}
	catch(err){}
	
	tile[tc].onmouseover = function(){MouseOver(this)};
	tile[tc].onmouseout = function(){MouseOut(this)};
}
}
var commercial = getObj("commercial");
commercial.onclick = function(){projpage(this)}

var residential = getObj("residential");
residential.onclick = function(){projpage(this)}

var inprogress = getObj("inprogress");
inprogress.onclick = function(){projpage(this)}

var aboutmosaic = getObj("aboutmosaic");
aboutmosaic.onclick = function(){projpage(this)}

var left = getObj("left");
left.onclick = function(){arrow_click(this)}

var right = getObj("right");
right.onclick = function(){arrow_click(this)}

var gallerycont = getObj("gallerycontainer");
gallerycont.onclick = function(){arrow_click(right)}

if (curpage == "commercial")
{
	commercial.style.background = "url(../images/commercial.jpg) -29px -883px no-repeat";	

}

if (curpage == "residential")
{
	residential.style.background = "url(../images/commercial.jpg) -29px -908px no-repeat";
	
	var tiles = document.getElementById("tiles");
	tiles.style.background = "url(../images/residential.jpg) no-repeat";
	
}

if (curpage == "inprogress")
{
	inprogress.style.background = "url(../images/commercial.jpg) -29px -933px no-repeat";
	
	var tiles = document.getElementById("tiles");
	tiles.style.background = "url(../images/inprogress.jpg) no-repeat";
	
}

     // counter
     var i = 0;


     // create object
     imageObj = new Image();


     // set image list
     images = new Array();
     images[0]="../images/inprogress.jpg"
     images[1]="../images/contact.jpg"
     images[2]="../images/aboutmosaic.jpg"
	 images[3]="../images/residential.jpg"


     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }

}