/*
 * 1. Check to see if the popup exists. If not, build it and attach it to the body.
 * 2. Check to see if the dark div exists. If not, build it and attach it to the body.
 * 3. Check isUp (Boolean). If isUp is true then display the divs and watch for a click on "Close"
 * 4. If isUp is false then hide both divs.
 */
function managePopup( isUp, elementId ) {
     var docBody = $('body');
     if ( !($('darkDiv')) ) {
          //build and attach the darkDiv to the body of the page
          docBody.appendChild( buildDark() );
     }     
     var darkDiv = $('darkDiv');
     if ( !($('popup')) ) {
          //build and attach the popup to the body of the page
          $('popContainer').appendChild( buildPopup( elementId ) );
          positionPopup();
     }
     var popup = $('popup');
     // handle the case when the total height from the top of the viewport to
     // the bottom of the rendered popup is greater than the orginal content
     // on the page.
     if ( document.body.scrollHeight > $('frame').getHeight() ) {
          $('darkDiv').height = $('darkDiv').getHeight() + 150 + "px";
          $('footer').setStyle( {marginBottom:'150px'} );
     }
     var closePop = $('right');
     if ( isUp == true ) {
          //set a clickWatcher  on the 'right' element (close links) in the popup window
          cw.setWatchedElement( closePop );
          //and watch for a click
          cw.watchElement( closePop );
          Element.hide( darkDiv ); 
          new Effect.Appear( darkDiv, {to:0.7, duration:0.3} );
          Element.hide( popup );
          new Effect.Appear( popup, {duration:0.3} );
     } else if ( isUp == false ) {
          new Effect.Fade( popup, {duration:0.3} );
          new Effect.Fade( darkDiv, {duration:0.3} );
          cw.stopWatchingElement( closePop );
          $('popContainer').removeChild( popup );
     }
}

function positionPopup() {
     /* Position the popup horizontally.
      * ((allContentWidth - popupWidth) / 2) - (x coord of the popup's actual position)
      * - (20px (the popup div actually shows up 20 px off the left edge)) 
      * I presume that it's something in my style sheet, but the cause is not obvious at all.
      */
     //var viewportWidth = document.viewport.getWidth(); This Prototype.js function does not work in IE6
     var allContentWidth = Element.getWidth( $('frame') );
     //alert( "allContentWidth: " + allContentWidth );
     var allContentXPos = Element.cumulativeOffset( $('frame') ).left;
     //alert( "allContentXPos: " + allContentXPos );
     var popupWidth = Element.getWidth( $('popContainer') );
     //alert( "popupWidth: " + popupWidth );
     var popupX = Element.cumulativeOffset( $('popContainer') ).left;
     //alert( "popupX: " + popupX );
     //var one = viewportWidth - popupWidth;
     //alert( "one: " + one );
     //var two = Math.floor( one / 2 );
     //alert( "two: " + two );
     var moveItHor = Math.floor( ((allContentWidth - popupWidth)/2) ) + allContentXPos;
     //alert( "moveItHor: " + moveItHor );
     $('popContainer').style.left = moveItHor + 'px';

     // Position the popup vertically
     var allContentHeight = $('frame').getHeight();
     //alert( 'allContentHeight: ' + allContentHeight );
     var moveItVert = 50;
     $('popContainer').style.top = moveItVert + 'px';
}

var ClickWatcher = Class.create();
Event.observe( window, 'load', function() {
     cw = new ClickWatcher;
} );

ClickWatcher.prototype = {
     initialize: function() { return false; },
     setWatchedElement: function( anElement ) { this.watchedElement = anElement },
     handler: function( event ) {
          if ( cw.watchedElement.id == 'right' ) {
               managePopup( false );
               return;
          }
     },
     watchElement: function( watchedElement ) {
          Event.observe( watchedElement, 'click', this.handler.bindAsEventListener( ClickWatcher ) );
     },
     stopWatchingElement: function( watchedElement ) {
          Event.stopObserving( watchedElement, 'click', this.handler.bindAsEventListener( ClickWatcher ) ); 
     }
};

function buildDark() {
     var gray = Builder.node('div', {id:'darkDiv'}); 
    
     /* Calculate the page width and height 
      * Use the body to get the width and the main table to get the height.
      * getDimensions() does not include the non-visible part of the page in IE6.
      */
     var bodyWidth = $('body').getWidth();
     var mainTableHeight = $('frame').getHeight();
     gray.style.width = bodyWidth + 'px';
     gray.style.height = mainTableHeight + 'px';
     return gray;
}

function buildPopup( anElementId ) {
     var pop = Builder.node('div', {id:'popup'}, [ 
          Builder.node('div', {id:'popContent'}, [
               Builder.node('div', [
                    Builder.node('div', {id:'right'}, [
                         Builder.node('a', {className:'unitDetailLink', href:'#'}, [
                              Builder.node('img', {id:'close', src:'images/close.png', height:'16', width:'16', alt:'Close'})
                         ]),
                         Builder.node('a', {className:'unitDetailLink', href:'#'}, [
                              Builder.node('span', {className:'bumpUp'}, 'Close')
                         ]),
                    ]),
               ]),
          ]),
     ]);
     // This is done the 'old-fashioned' way because using Builder for these items does not work in IE6. No time to figure out why.
     var imgDiv = document.createElement( 'div' );
     var img = document.createElement( 'img' );
     img.src = "images/gallery/floorplans/"+anElementId+".gif";
     imgDiv.appendChild( img );
     var linkDiv = document.createElement( 'div' );
     var link = document.createElement( 'a' );
     link.className = 'unitDetailLink';
     link.href = "images/gallery/floorplans/"+anElementId+".pdf";
     link.innerHTML = "Download a PDF of this floorplan.";
     linkDiv.appendChild( link );
     pop.appendChild( imgDiv );
     pop.appendChild( linkDiv );
     pop.style.zIndex = '99';
     return pop;
}