function displayPane(project) {
	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;"></div>'
                    + '    <iframe src="viewWin.html" frameborder="0" 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;"></iframe>';
    var cover = document.getElementById('cover');
    cover.style.width = properties.docWidth+'px';
    cover.style.height = properties.docHeight+'px';
    var viewWin = document.getElementById('viewWin');
    viewWin.style.top = (properties.scrollY+50)+'px';
    viewWin.style.left = ((properties.width/2)-300)+'px';
}

function view(project) {
    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)
    };
    window.project = project;
	var vpCnt = document.createElement('div');
	vpCnt.id = 'vpCnt';
	document.body.appendChild(vpCnt);
    
    displayPane(project);
  	fade(0,100,'vpCnt',500);
}	



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,t) {
    var speed = Math.round(t / 100); 
	var timer = 0;
	if(from > to) {
        for(var i = from; i >= to; i--) {
              setTimeout('setOpacity("' + el + '",' + i + ')',(timer*speed)); 
              timer++;
		}
    }
    else if(from < to) {
        for(var i = from; i <= to; i++) {
              setTimeout('setOpacity("' + el + '",' + i + ')',(timer*speed)); 
              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 closeit() {
    var target = document.getElementById('vpCnt');
    fade(100,0,'vpCnt',500);
    setTimeout('document.getElementById(\'vpCnt\').parentNode.removeChild(document.getElementById(\'vpCnt\'));', 500);
    //target.parentNode.removeChild(target);
    //setTimeout('document.getElementById(\'vpCnt\').style[\'display\'] = \'none\';', 500);
}