// JavaScript Document
//
//Global Variables
//
var imgbase = "interface/"; 
//xml object
var xmlobj=null;
//file loaded or not
var slideTime;
//max image height in pixels
var maxImgH;
//array to store albums
var thOffset = 34;
var albums;
var groups;
var sd;
//temp array
var temp=new Array();
//number of images in current album
var numAlbumImgs=0; 
//total number of images in gallery
var numTotalImgs=0
//number of albums in gallery
var numAlbums=0;
//number of albums in each group
var numAlbumsGrp=new Array();
//stores the thumbnails from the current album
var pics=new Array();
var caps=new Array();
var imgs=new Array();
//index of current image
var curAlbum = 0;
var curImg=0;
var ct = 0;
var intDelay;
//index of current image
var ssRunning = true;
var ssPaused = true;
var justLoaded = true;
var dock=true;
var first =0;
var last=0;
var albumLoaded = new Array();
var ip = null;
// send http request
function sendRequest(elemid,file){
    // check for existing requests
    if(xmlobj!=null&&xmlobj.readyState!=0&&xmlobj.readyState!=4){
        xmlobj.abort();
    }
    try{
        // instantiate object for Mozilla, Nestcape, etc.
        xmlobj=new XMLHttpRequest();
    }
    catch(e){
        try{
            // instantiate object for Internet Explorer
            xmlobj=new ActiveXObject('Microsoft.XMLHTTP');
        }
        catch(e){
            // Ajax is not supported by the browser
            xmlobj=null;
            return false;
        }
    }
    // assign state handler
    xmlobj.onreadystatechange=function(){
        stateChecker(elemid);
    }
    // open socket connection
    xmlobj.open('GET',file,true);
    // send request
    xmlobj.send(null);
}

// check request status
function stateChecker(elemid){
    // if request is completed
    if(xmlobj.readyState==4){
        // if status == 200 display text file
        if(xmlobj.status==200){			
			//load image data into arrays
			storeImg();			
			//show album names
			showAlbumNames();
			
			//begin by showing first album
			showAlbum(0);			
        }
        else{
            alert('Failed to get response :'+ xmlobj.statusText);
        }
    }
}


function storeImg() {
	//get slideshow time
	sd = xmlobj.responseXML.getElementsByTagName('gallery');
	slideTime = sd[0].getAttribute('sdelay');
	//get main menu links
	groups = xmlobj.responseXML.getElementsByTagName('group');
	//get all album info
	albums = xmlobj.responseXML.getElementsByTagName('album');
	
	//store which albums belong to which group
	for(i=0; i<groups.length; i++) {
		numAlbumsGrp[i] = groups[i].getElementsByTagName('album').length;
	}
	//store number of albums found
	numAlbums = albums.length;
	//get images for each album
	for (i=0; i<numAlbums; i++) {
			//store images in temp array
			temp[i] = albums[i].getElementsByTagName('image');				
			//store total number of images in gllaery
			numTotalImgs += temp[i].length;
			albumLoaded[i] = false;
	}
	

}



function showAlbum(albumNum) {

	//show controls
	$('spinner').show();
	/*document.getElementById('controls').style.visibility = "hidden";
	document.getElementById('dock').style.visibility = "hidden";*/
	curAlbum = albumNum;
	if (ssRunning) {
		clearInterval(intDelay);
		ssPaused = true;
	}
	//pauseSlideShow();
	if(!justLoaded) {
	Effect.Fade("cap", {duration:0.5, from:1.0, to:0.0 });
	Effect.Fade("largepic", {duration:0.5, from:1.0, to:0.0, afterFinish: function() {
								if (!albumLoaded[curAlbum])
									Effect.Appear("spinner", {duration:0.5, from:0.0, to:1.0});
								}
							});
	} else {
	
		justLoaded = false;
	}
	curImg=0;
	removeThumbs();
	//change album link color to show its current one selected
	for (i=0; i<numAlbums; i++) {
		filterLink = document.getElementById('album'+i);		
		if (albumNum == i)
			jscss('add', filterLink, 'chosen');
		else
			jscss('remove', filterLink, 'chosen');
	}
	pics = new Array();
	caps = new Array();
	imgs = new Array();
	for (j=0; j<temp[albumNum].length; j++) {
		pics[j] = temp[albumNum][j].getAttribute('name');
		caps[j] = temp[albumNum][j].getAttribute('caption');		
	
	}

	//create slider
	createSlider();
	//load the album thumbnails		
	createThumbnails(pics.length, albumNum);
	getLast();
	//preload the main images
	preloadImages(albumNum);
		
}
var aSlider;
function createSlider() {

	createSliderElements();
	var sOptions = makeOptions();
	
	sOptions.onSlide = function(v){
		//$('logo').innerHTML = v;
		if (ssRunning) {		
			stopSlideShow(); 						
		} else {
			scrollImage(v);
		}
	}
	//$('slider').show();
	
    aSlider = new Control.Slider(
    	"handle",
    	"slider",
    	sOptions
    );
    
	aSlider.setValue(0);		
}

function createSliderElements() {
	$('slider').innerHTML =
	'<img src="interface/handle.png" alt="" title ="Drag to scroll images" class="selected" id="handle" />';
}

function makeOptions() {
	var sOptions = {};
    var maxRange = pics.length-1;
    sOptions.axis = 'horizontal';
    sOptions.range = $R(0,maxRange)
    sOptions.values = [];
    for (var n = 0; n <= maxRange; n++) {
    	sOptions.values.push(n);
    }
    return sOptions;
}

//Reads the names of the albums from the albums array
//and displays them with a link to load that particular album
function showAlbumNames() {
	//target div to put text into
	var aInfo = document.getElementById('filter');
	var content='';	
	var count = 1;
	for(j=0; j<groups.length; j++) {
		if (groups[j].getAttribute('name') == 'home') {
			content += "<a href='#' id='album0' onclick=showAlbum(0) >" + groups[j].getAttribute('name') + "</a>";			
		} else {
			content += "<a href='#' onclick=showGrp("+j+") >" + groups[j].getAttribute('name') + "</a>";
			content += "<ul class='menu' id='menu"+j+"' style='display:none'>";
			for (i=0; i<numAlbumsGrp[j]; i++) {
				//content += '<li><a href=\'#\' id=\'album'+count+'\' onclick=\'showAlbum('+count+')\' >' + albums[count].getAttribute('name') + '</a></li>';	
				content += "<li><a href='#' class='tooltip' id='album"+count+"' onclick=showAlbum("+count+")>++<span>" + albums[count].getAttribute('name') + "</span</a></li>";	
				count++;
			}
			content += "</ul>";
		}
	}
	//add bio link
	content += "<a href='#' id='biography' onclick=showBio()>bio</a>";
	//add blog link
	content += "<a href='http://blog.willwebster.com'>blog</a>";
	
	aInfo.innerHTML = content;
	
}
function showGrp(m) {

	Effect.toggle('menu'+m, 'blind', { duration: 1.0 });
			
}
function showBio() {

	var bioDiv = document.getElementById('bio');
	
	//if (bioDiv.style.display == "none") {
		if (ssRunning) {
			stopSlideShow();		
		}
		Effect.Fade("largepic", {duration:1.0, from:1.0, to:0.0, afterFinish: function() { bioDiv.style.display = "block"; } });
		Effect.Fade("controls", {duration:1.0, from:1.0, to:0.0});
		Effect.Fade("slider", {duration:1.0, from:1.0, to:0.0});
		Effect.Fade("filter", {duration:1.0, from:1.0, to:0.0});
		Effect.Fade("dock", {duration:1.0, from:1.0, to:0.0});
	//}
	//document.getElementById('largepic').style.display = "none";
}

function hideBio() {
	Effect.Fade("bio", {duration:1.0, from:1.0, to:0.0, afterFinish: function() { 
															Effect.Appear("largepic", {duration:1.0, from:0.0, to:1.0});
															Effect.Appear("controls", {duration:1.0, from:0.0, to:1.0});
															Effect.Appear("slider", {duration:1.0, from:0.0, to:1.0});
															Effect.Appear("filter", {duration:1.0, from:0.0, to:1.0});	 
															Effect.Appear("dock", {duration:1.0, from:0.0, to:1.0});
															} 
														});
	if (!ssRunning && curAlbum == 0) {
				stopSlideShow();
				toggleSShow();
	} 

}

function removeThumbs() {
	//set loaded to false while thumbs cleared
	
	var box = document.getElementById('bigBox');
	while (box.childNodes[0]) {
    	box.removeChild(box.childNodes[0]);	
	}
}

// create thumnails
function createThumbnails(numpics, albumNum){	
    //for each image in the album
	for(var i=0;i<numpics;i++){	
		//create a div with a link and image tag  	
		var cdiv=document.createElement('div');
		cdiv.className='thumbnail';
		var a=document.createElement('a');
        a.setAttribute('href','#');
		a.setAttribute('id',i);
		// create thumbnails
		var img=document.createElement('img');
		
		//set the thumbnail src
		img.setAttribute('src',"images/"+albums[albumNum].getAttribute('name')+"/thumbs/"+pics[i]);
		//set thumbnail size
		img.setAttribute('width','28');
		img.setAttribute('height','28');
		img.setAttribute('border','0');		
		
        //give each thumbnail an index id
		img.setAttribute('alt',i);
        a.appendChild(img);
		cdiv.appendChild(a);		
		// assign 'onclick' event handler to <a> elements
        a.onclick=function(){			
				clickThumb(this.id);         
        }
		document.getElementById('bigBox').appendChild(cdiv);
    }
}

// preload images
function preloadImages(albumNum){
	
	ip = new Array();
	for (i=0; i<pics.length; i++) {
		ip[i] = new ImagePreloader(albums[albumNum].getAttribute('name'));
		ip[i].preload(pics[i], i);
	}
}





function addImage(img, num) {
	imgs[num] = img;
	if (imgs.length == pics.length) albumLoaded[curAlbum] = true;
	var imgNode = document.getElementById(num);
   	if (imgNode !=null) {
		if (jscss('check', imgNode.parentNode, 'thumbnail')) {
			jscss('add', imgNode.parentNode, 'fullopacity');
		}
   	}
	if (curImg == num) {
		Effect.Fade("cap", {duration:1.0, from:1.0, to:0.0 });
		Effect.Fade("largepic", {duration:1.0, from:1.0, to:0.0, afterFinish: function() { displayImage(curImg); } });		
	}			
}

//starts slideshow
function startSlideShow() {			
			ssRunning = true;			
			//show the image
			var n = (curImg+1) % pics.length;
			//curImg = n;
			Effect.Fade("cap", {duration:1.0, from:1.0, to:0.0 });
			Effect.Fade("largepic", {duration:1.0, from:1.0, to:0.0, afterFinish: function() { displayImage(n); } });					
}

function toggleSShow() {
	if (ssRunning) {
		stopSlideShow();
	} else {
		ssPaused = true;
		document.getElementById('bio').style.display = "none";
		startSlideShow();
		//document.getElementById('midbtn').setAttribute('src', imgbase+'paus_on.png');
		document.getElementById('midbtn').innerHTML = "||";
		document.getElementById('midbtn').style.fontSize = "11px";
	}
}

function pauseSlideShow() {
	ssPaused = true;
	ssRunning = false;
	clearInterval(intDelay);
}
function stopSlideShow() {
	ssPaused = false;
	ssRunning = false;
	//document.getElementById('midbtn').setAttribute('src', imgbase+'play_off.png');
	document.getElementById('midbtn').innerHTML = ">";
	document.getElementById('midbtn').style.fontSize = "12px";
	clearInterval(intDelay);
}
function createSpinPic(imgSrc) {
		
	var img=document.createElement('img');
	img.className = 'displayed';	
	img.setAttribute('id','spinner');
	img.setAttribute('src',imgSrc);
	img.setAttribute('width', '36');
	img.setAttribute('height', '36');
    document.getElementById('spinner').appendChild(img);
	
}
// displays main image
function displayImage(elemid){	

	//set new curent image
	jscss('remove', document.getElementById(curImg).parentNode, 'imgActive');
	curImg = elemid;
	if (curImg == last) {			
		scrollBoxLeft();		
	}
	if (curImg == 0 && first !=0) {
		goBack(first);
	}
	//add active border for current image
	jscss('add', document.getElementById(curImg).parentNode, 'imgActive');
	
	//alert(imgs);
	if (imgs[elemid] && (imgs[elemid].complete || imgs[elemid.complete]==null)) {
		//clearInterval(intDelay);
		
		document.getElementById('cap').innerHTML = caps[elemid];
		var newpic=imgs[elemid];
		//get image and caption divs
		var oldpic=document.getElementById('largepic');			
		oldpic.setAttribute('src',newpic.src);	
		if (!jscss('check', oldpic, 'displayed'))
			jscss('add', oldpic, 'displayed');
		resizeImg();	
		Effect.Fade("spinner", {duration:0.5, from:1.0, to:0.0 });
		Effect.Appear("largepic", {duration:1, from:0.0, to:1.0});
		//Effect.Appear("cap", {duration:1, from:0.0, to:1.0});
		//show controls
		if (curAlbum !=0) {
			$('slider').style.visibility = "visible";
			document.getElementById('controls').style.visibility = "visible";
			document.getElementById('dock').style.visibility = "visible";
			aSlider.setValue(elemid);
			
		} else {
			$('slider').style.visibility = "hidden";
			document.getElementById('controls').style.visibility = "hidden";
			document.getElementById('dock').style.visibility = "hidden";	
			if (!ssRunning && curAlbum == 0) {
				stopSlideShow();
				toggleSShow();
			} 
		}	
		if (ssPaused) {
			intDelay = setInterval("startSlideShow()",slideTime*1000);
			ssPaused = false;
		}
		
	} else {
		Effect.Appear("spinner", {duration:0.5, from:0.0, to:1.0});		
		if (ssRunning)
			pauseSlideShow();
		//intDelay = setInterval("displayImage("+elemid+")",500);
	}
	
}

function scrollImage(n) {
	
	//set new curent image
	jscss('remove', document.getElementById(curImg).parentNode, 'imgActive');
	curImg = n;
	if (curImg == last) {			
		scrollBoxLeft();		
	}
	if (curImg == 0 && first !=0) {
		goBack(first);
	}
	
	//add active border for current image
	jscss('add', document.getElementById(curImg).parentNode, 'imgActive');
	if (imgs[n] && (imgs[n].complete || imgs[n.complete]==null)) {
		//clearInterval(intDelay);
		
		document.getElementById('cap').innerHTML = caps[n];
		var newpic=imgs[n];
		//get image and caption divs
		var oldpic=document.getElementById('largepic');			
		oldpic.setAttribute('src',newpic.src);	
		if (!jscss('check', oldpic, 'displayed'))
			jscss('add', oldpic, 'displayed');
		resizeImg();	
		Effect.Fade("spinner", {duration:0.5, from:1.0, to:0.0 });
		
	} else {
		Effect.Appear("spinner", {duration:0.1, from:0.0, to:1.0});		
		if (ssRunning)
			pauseSlideShow();
		//intDelay = setInterval("displayImage("+elemid+")",500);
	}
}

function clickThumb(imgID) {
	stopSlideShow();
	
	var imgCount = parseInt(imgID);
	Effect.Fade("cap", {duration:1.0, from:1.0, to:0.0 });
	Effect.Fade("largepic", {duration:1.0, from:1.0, to:0.0, afterFinish: function() { displayImage(imgCount); } });	
	
}

function nextImg() {
	stopSlideShow();
	
	var n = (curImg+1) % pics.length;
	//curImg = n;
	Effect.Fade("cap", {duration:1.0, from:1.0, to:0.0 });
	Effect.Fade("largepic", {duration:1.0, from:1.0, to:0.0, afterFinish: function() { displayImage(n); } });
}

function prevImg() {
	stopSlideShow();
	
	var n = curImg-1
	//if (n<0) n = (pics.length-1); else n = n % pics.length;
	if (n<0) n = 0; else { n = n % pics.length;
	//curImg = n;
	Effect.Fade("cap", {duration:1.0, from:1.0, to:0.0 });
	Effect.Fade("largepic", {duration:1.0, from:1.0, to:0.0, afterFinish: function() { displayImage(n); } });
	}
}

function changeBg(colour){

	//var bg = document.getElementById('container');
	
	switch(colour)
	{
	case 'white':
  		//set bg colour and caption colour		
		document.body.style.backgroundColor="#FFFFFF";		
		curBg = 'w';
  		break;    
	case 'grey':
		//set bg colour and caption colour		
		document.body.style.backgroundColor="#3b3c3d";		
		curBg = 'g';
		break;
	default:
		//set bg colour and caption colour 		
		document.body.style.backgroundColor="#000000";	
		curBg = 'b';
	}	
}

function imgOn(oImg)
{
   	var strOver  = "_on"    // image to be used with mouse over
  	var strOff = "_off"     // normal image
   	var strImg = oImg.src
    oImg.src = strImg.replace(strOff,strOver)
}
function imgOff(oImg) {
	var strOver  = "_on"    // image to be used with mouse over
   	var strOff = "_off"     // normal image
   	var strImg = oImg.src
   	oImg.src = strImg.replace(strOver,strOff)
   	
}

//helper function to add, remove and swap class names for objects
//very useful function
function jscss(a,o,c1,c2)
{
  switch (a){
    case 'swap':
      o.className=!jscss('check',o,c1)?o.className.replace(c2,c1): o.className.replace(c1,c2);
    break;
    case 'add':
      if(!jscss('check',o,c1)){o.className+=o.className?' '+c1:c1;}
    break;
    case 'remove':
      var rep=o.className.match(' '+c1)?' '+c1:c1;
      o.className=o.className.replace(rep,'');
    break;
    case 'check':
      return new RegExp('\\b'+c1+'\\b').test(o.className)
    break;
  }
}
function coor(e) {
	var posy =0;
	if (!e) var e = window.event;
	if (e.pageY) 	{
		posy = e.pageY;
	}
	else if (e.clientY) 	{
		posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	}
	
}
function getBrowserW() {
	var windowWidth=0;
	if (typeof(window.innerWidth)=='number') {
		windowWidth=window.innerWidth;
	}
	else {
		if (document.documentElement&&document.documentElement.clientWidth) {
			windowWidth = document.documentElement.clientWidth;
		}
		else {
			if (document.body&&document.body.clientWidth) {
				windowWidth=document.body.clientWidth;
			}
		}
	}
	return windowWidth;
}
function getBrowserH() {
	var windowHeight=0;
	if (typeof(window.innerHeight)=='number') {
		windowHeight=window.innerHeight;
	}
	else {
		if (document.documentElement&&document.documentElement.clientHeight) {
			windowHeight = document.documentElement.clientHeight;
		}
		else {
			if (document.body&&document.body.clientHeight) {
				windowHeight=document.body.clientHeight;
			}
		}
	}
	return windowHeight;
}
//called whenever the user resizes the browser window
function resizeImg() {

	//Element.hide('menuBox');
	//get image original dimensions
	var mybg = document.getElementById('largepic');
	
	if (imgs[curImg]) {
	var origImgW = imgs[curImg].width;
	var origImgH = imgs[curImg].height;
	
	//get browsers height and width
	var browserW = getBrowserW();
	var browserH = getBrowserH();
	
	//get the x and y scaling factor
	var xscale =  browserW/origImgW;
	var yscale =  browserH/origImgH;
	
	//save the scale which is bigger
	if (origImgW > origImgH)
		var maxScale = Math.max(xscale, yscale);
	else
		var maxScale = Math.min(xscale, yscale);
		
	//adjust the image's dimensions using maxScale to maintain aspect
	var newImgW = origImgW * maxScale;
	var newImgH = origImgH * maxScale;
	//adjust container	
	if ((newImgH * 0.6) > maxImgH) {
		newImgW = (maxImgH/newImgH) * newImgW;	
		newImgH = maxImgH;
		//update image with new dimensions	
		mybg.setAttribute('width',newImgW);
		mybg.setAttribute('height',newImgH);
	} else {
	//update image with new dimensions	
		mybg.setAttribute('width',newImgW* 0.6);
		mybg.setAttribute('height',newImgH* 0.6);
		
	}	
		document.getElementById('mainpic').style.height = mybg.getAttribute('height') + 'px';
		
	}
	
	
	
}

//scrolls box left <-
function scrollBoxLeft()
{
	var limit = pics.length-1;
	var temp = first;
	var length = Math.floor(document.getElementById('dockB').offsetWidth/thOffset);
	first = last;
	if (first >= limit) {
		first = temp;
		return;
	}
	last = last + length;
	
	if (last >= limit)
		last = limit;
	
	
	
	var pxmove = length * thOffset;
	//move the container bigBox BUT don't hide the last thumbnail
	//document.getElementById('info').innerHTML = pxmove;
	new Effect.MoveBy('bigBox', 0, -pxmove, 
								  {
									  duration: 0.4,  
									  transition: Effect.Transitions.sinoidal
								  });
	
	
	
}
function goBack(amt) {
	var pxmove = amt * thOffset;
	new Effect.MoveBy('bigBox', 0, pxmove, 
								  {
									  duration: 0.4,  
									  transition: Effect.Transitions.sinoidal
								  });
	first = 0;
	getLast();
}
//scrolls box right ->
function scrollBoxRight()
{
	var length = Math.floor(document.getElementById('dockB').offsetWidth/thOffset);
	var temp = first;
	var pxmove;
	if (first !=0) {
		last = first;		
		first = first - length; 
	
		if (first < 0)
			first = 0;
			 
		if ((temp -length) < 0) {
			last = length;
			pxmove = temp * thOffset;
		} else {
			pxmove = length * thOffset;
		}
	
	
	//move the container bigBox BUT don't hide the last thumbnail
	//document.getElementById('info').innerHTML = pxmove;
	new Effect.MoveBy('bigBox', 0, pxmove, 
								  {
									  duration: 0.4,  
									  transition: Effect.Transitions.sinoidal
								  });
	}
}
function getLast() {
	 last = first + Math.floor(document.getElementById('dockB').offsetWidth/thOffset);
	 
	 if (last > (pics.length-1))
	 	last = (pics.length-1);
	
}

function toggleDock() {
	if (dock)
		dockHide();
	else
		dockShow();

}

//unhide the dick and move into position at bottom of browser window using a move effect
function dockShow() {
	if (!dock) {
		var dockDiv = document.getElementById('dock');
		dockDiv.style.visibility = 'visible';
		var h = getBrowserH() - 36;
		dockDiv.style.top = (getBrowserH()+36) +"px";
		//move dock
		new Effect.Move ('dock',{ x: 0, y: h, duration: 1.0, mode: 'absolute', afterFinish: function() {
								dock = true;	
								dockDiv.style.bottom = '0px';	
								dockDiv.style.top = "";
							}
						});
			
	}
}
//hides the dock by moving it to the bottom of the browser window and then calling hideDock to make it invisible
function dockHide() {
	//if dock is visible
	if (dock) {	
		var dockDiv = document.getElementById('dock');
		//get height + height of dock	
		var h = getBrowserH() + 36;
		dockDiv.style.top = (getBrowserH()-36) +"px";
		//move dock into position
		new Effect.Move ('dock',{ x: 0, y: h, duration: 1.0, mode: 'absolute', afterFinish: function() {
								dockDiv.style.visibility = 'hidden';
								dockDiv.style.bottom = '0px';	
								dockDiv.style.top = "";
								dock = false;
							}
						});			
	} 	
}


//whenever the mouse moves this is called
//if the mouse coordinates are over the area occupied by the dock when its visible then the dock is
//slid into place otherwise the dock is hidden
function coor(e) {
	var posy =0;
	if (!e) var e = window.event;
	if (e.pageY) 	{
		posy = e.pageY;
	}
	else if (e.clientY) 	{
		posy = e.clientY + (document.documentElement.scrollTop || 
            document.body.scrollTop) - 
            document.documentElement.clientTop;
	}
	
	document.getElementById('cap').innerHTML = posy;
	//var cap = document.getElementById('cap');	
	//cap.innerHTML = posy;	
	if (posy >= (getBrowserH() - 36)) {
		if(!dock)
		dockShow();
	} else {
		//flag to prevent dock hiding until 5 seconds after a new album load has elapsed 
		//if (!albumLoad)
			if(dock)
			dockHide();
	}
}
function init() {
	var spinpic = document.getElementById('spinner');
	spinpic.setAttribute('src',imgbase+'loading.gif');	
	jscss('add', spinpic, 'displayed');
	 if(document.getElementById&&document.getElementsByTagName&&document.createElement){
        sendRequest(0,'images.xml');
		
	}
}
window.onresize = function () { resizeImg(); getLast(); }

//after page has loaded start loading the xml file
window.onload=function(){
	var loadgif = new Image(36,36);
	loadgif.onload = init;
	loadgif.src = imgbase+'loading.gif';
	if ((screen.width<=1024) && (screen.height<=768)) {
 		maxImgH = 360;
	}
	else {
   		maxImgH = 500;
	}
    // check if browser is DOM compatible
   
}