function displayPane(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:650px; height:762px; top:'+(properties.scrollY+25)+'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:550px; height:662px; top:80px; left:45px;">'
                    + '            <div id="imageCnt" style="position:absolute; width:450px; height:450px; top:50px; left:50px;">'
                    + '                <img id="imageCnt_image" name="imageCnt_image" src="photos/' + project + '.jpg" style="border:1px solid #cccccc; width:450px; height:300px; position:absolute; top:58px; left:0px;">'
                   	+ '            </div>'
                   	+ '        <div id="galley" style="position:absolute; width:450px; height:70px; top:450px; left:50px;">'
                   	+ '			<table width="450" height="70" cellspacing="0" cellpadding="0">'
                    + '				<tr>'
                    + '				<td>'
                    + '                 <a href="javascript: void(0);" >'
                    + '					<img id="img0" onclick="showImg(this.id);" border="0" src="photos/' + project + '.jpg" width="105" height="70">'
                    + '                 </a>'
                    + '				</td>'
                    + '				<td width="10"></td>'
                    + '				<td>'
                    + '                 <a href="javascript: void(0);" >'
                    + '					<img id="imgA" onclick="showImg(this.id);" border="0" src="photos/' + project + '_A' +'.jpg" width="105" height="70">'
                    + '                 </a>'
                    + '				</td>'
                    + '				<td width="10"></td>'
                    + '				<td>'
                    + '                 <a href="javascript: void(0);" >'
                    + '					<img id="imgB" onclick="showImg(this.id);" border="0" src="photos/' + project + '_B' +'.jpg" width="105" height="70">'
                    + '                 </a>'
                    + '				</td>'
                    + '				<td width="10"></td>'
                    + '				<td>'
                    + '                 <a href="javascript: void(0);" >'
                    + '					<img id="imgC" onclick="showImg(this.id);" border="0" src="photos/' + project + '_C' +'.jpg" width="105" height="70">'
                    + '                 </a>'
                    + '				</td>'
                   	+ '				</tr>'
                    + '			</table>'
                   	+ '        </div>'
                    + '            <img src="images/aslogo.jpg" id="logo" style="width:134px; height:66px; position:absolute; left:210px; bottom:30px;">'
                    + '        </div>'
                    + '        <div id="tabCnt" style="background:#ffffff; border-bottom:1px solid #cccccc; position:absolute; z-index:50; width:550px; height:25px; top:55px; left:45px;">'
                    + '            <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 view(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)
    };
    
    
    displayPane(project, title);
  	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);
}