function displayPane(url, galleryid) {
	
	var vpCnt = document.getElementById('vpCnt');
    var properties = document.properties;
    vpCnt.style.opacity = 0;
    vpCnt.style.MozOpacity = 0; 
    vpCnt.style.filter = 'alpha(opacity=0)'; 
    vpCnt.style.position = 'absolute'; 
    vpCnt.style.top = '0px';	
    vpCnt.style.left = '0px'; 
    vpCnt.style.zIndex = 10; 
    vpCnt.style.display = 'inline';
    vpCnt.style.width = properties.docWidth+'px'; 
    vpCnt.style.height = properties.docHeight+'px'; 
    	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			//alert(ajaxRequest.responseText);
			vpCnt.innerHTML = ajaxRequest.responseText;
		}
	}
	
	var queryString = url+ "?galleryid=" + galleryid+ "&docwidth=" +properties.docWidth+"&docheight=" +properties.docHeight+"&scroll=" +properties.scrollY+ "&width="+properties.width;
	ajaxRequest.open("GET",  queryString, true);
	ajaxRequest.send(null); 
   
}

function view(url, galleryid) {
	
	var vpCnt = document.createElement('div');
	vpCnt.id = 'vpCnt';
	document.body.appendChild(vpCnt);

    document.properties = {
        width:(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth),
        height:(window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight),
    	docWidth:document.body.scrollWidth,
    	docHeight:document.body.scrollHeight,
    	scrollX:(window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft),
    	scrollY:(window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop)
    };
    
    
    displayPane(url, galleryid);
  	fade(0,100,'vpCnt',5);
}	



function printit() {
    document.getElementById('pageCnt').style['display'] = 'none';
    document.getElementById('viewWin').style['top'] = '0px';
    document.getElementById('viewWin').style['left'] = '0px';
    window.print();
    setTimeout("document.getElementById('viewWin').style['top'] = (document.properties.scrollY+50)+'px';", 1500);
    setTimeout("document.getElementById('viewWin').style['left'] = ((document.properties.width/2)-300)+'px';", 1500);
    setTimeout("document.getElementById('pageCnt').style['display'] = 'block';", 1500);
}

function fade(from,to,el,steps) {
	var target = document.getElementById(el);
	var timer = 0;
	if(from > to) {
        for(var i = from; i >= to; i-=(100/steps)) {
              setTimeout('setOpacity("' + el + '",' + i + ')',(timer*100)); 
              timer++;
		}
    }
    else if(from < to) {
        for(var i = from; i <= to; i+=(100/steps)) {
              setTimeout('setOpacity("' + el + '",' + i + ')',(timer*100)); 
              timer++;
		}
    }
}

function setOpacity(el,op) {
    var object = document.getElementById(el).style;
    object.opacity = (op / 100);
    object.MozOpacity = (op / 100);
    object.KhtmlOpacity = (op / 100);
    object.filter = "alpha(opacity=" + op + ")";
}

function showImg(pic){
var picture = document.getElementById(pic);
document.images['imageCnt_image'].src = picture.src;
//document.getElementById('vpCnt').imageCnt_image.src = picture.src;

}

function closeit() {
    var target = document.getElementById('vpCnt');
    fade(100,0,'vpCnt',5);
    setTimeout('document.getElementById(\'vpCnt\').parentNode.removeChild(document.getElementById(\'vpCnt\'));', 500);
    //target.parentNode.removeChild(target);
    
	//setTimeout('document.getElementById(\''+el+'\').style[\'display\'] = \'none\';', 500);
}


function displayOnePane(project,projectName) {
	var vpCnt = document.getElementById('vpCnt');
    var properties = document.properties;
    vpCnt.style.opacity = 0;
    vpCnt.style.MozOpacity = 0; 
    vpCnt.style.filter = 'alpha(opacity=0)'; 
    vpCnt.style.position = 'absolute'; 
    vpCnt.style.top = '0px';	
    vpCnt.style.left = '0px'; 
    vpCnt.style.zIndex = 10; 
    vpCnt.style.display = 'inline';
    vpCnt.style.width = properties.docWidth+'px'; 
    vpCnt.style.height = properties.docHeight+'px'; 
    
   	vpCnt.innerHTML = '    <div id="cover" style="background:#ffffff; opacity:.75; -moz-opacity:.75; filter:alpha(opacity=75); position:absolute; z-index:20; width:'+properties.docWidth+'px; height:'+properties.docHeight+'px;">'
                    + '    </div>'
                    + '    <div id="viewWin" style="background:#ffffff; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); border:3px solid #000000; position:absolute; z-index:30; width:550px; height:645px; top:'+(properties.scrollY+50)+'px; left:'+((properties.width/2)-300)+'px;">'
                    + '        <div id="imgPane" style="background:#ffffff; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); border:1px solid #cccccc; border-top:0px; position:absolute; z-index:40; width:450px; height:530px; top:85px; left:50px;">'
                    + '            <div id="imageCnt" style="position:absolute; width:350px; height:350px; top:50px; left:50px;">'
                    + '                <img src="photos/' + project + '.jpg" id="imageCnt_image" style="border:1px solid #cccccc; width:350px; height:234px; position:absolute; top:58px; left:0px;">'
                    + '            </div>'
                    + '            <img src="images/aslogo.jpg" id="logo" style="width:134px; height:66px; position:absolute; left:158px; bottom:30px;">'
                    + '        </div>'
                    + '        <div id="tabCnt" style="background:#ffffff; border-bottom:1px solid #cccccc; position:absolute; z-index:50; width:450px; height:25px; top:60px; left:50px;">'
                    + '            <div id="imgTab" style="background:#ffffff; border:1px solid #cccccc; border-bottom:0px; position:absolute; z-index:60; width:150px; height:25px; top:0px; left:5px;">'
                    + '                <p id="imgTab_tabLabel" style="font:11px arial,helvetica; color:#2299dd; line-height:24px; text-align:center; margin:0px;">' + ((projectName != null ) ? projectName : "Building Project") + '</p>'
                    + '            </div>'
                    + '        </div>'
                    + '        <div id="iconCnt" style="position:absolute; top:20px; right:20px; width:94px; height:15px;">'
                    + '            <a href="javascript: void(0);" onclick="printit();"><img id="iconCnt_iconPrint" src="images/icon-print.jpg" width="47" height="15" border="0" style="width:47px; height:15px; position:absolute; top:0px; right:52px; cursor:pointer;"></a>'
                    + '            <a href="javascript: void(0);" onclick="closeit();"><img id="iconCnt_iconClose" src="images/icon-close.jpg" width="47" height="15" border="0" style="width:47px; height:15px; position:absolute; top:0px; right:0px; cursor:pointer;"></a>'
                    + '        </div>'
                    + '    </div>';
}

function viewOne(project, title) {
	var vpCnt = document.createElement('div');
	vpCnt.id = 'vpCnt';
	document.body.appendChild(vpCnt);

    document.properties = {
        width:(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth),
        height:(window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight),
    	docWidth:document.body.scrollWidth,
    	docHeight:document.body.scrollHeight,
    	scrollX:(window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft),
    	scrollY:(window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop)
    };
    
    
    displayOnePane(project, title);
  	fade(0,100,'vpCnt',5);
}