/****************************************************************************
 * Copyright (c) 1998-2007 Luna Imaging, Inc.  All Rights Reserved.
 *
 * This software is confidential and proprietary information of
 * Luna Imaging, Inc.  ("Confidential Information").  You shall not
 * disclose such Confidential Information and shall use it only in
 * accordance with the terms of the license agreement you entered into
 * with Luna Imaging, Inc.
 *
 * The software may not be copied, reproduced, translated or reduced to
 * any electronic medium or machine-readable form without
 * the prior written consent of Luna Imaging.
 *
 * You are not allowed to distribute the binary and source code
 * (if released) to third parties, without the prior written consent from
 * Luna Imaging.
 *
 * You are not allowed to reverse engineer, disassemble or decompile
 * code, or make any modifications of the binary or source code, remove
 * or alter any trademark, logo, copyright or other proprietary notices,
 * legends, symbols, or labels in the Software.
 *
 * You are not allowed to sub-license the Software or any derivative
 * work based on or derived from the Software.
 *
 * LUNA IMAGING MAKES NO REPRESENTATIONS OR WARRANTIES ABOUT THE
 * SUITABILITY OF THE SOFTWARE, EITHER EXPRESS OR IMPLIED, INCLUDING BUT
 * NOT LIMITED TO THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR
 * A PARTICULAR PURPOSE, OR NON-INFRINGEMENT, LUNA IMAGING SHALL NOT BE
 * LIABLE FOR ANY DAMAGES SUFFERED BY LICENSEE AS A RESULT OF USING, 
 * MODIFYING OR DISTRIBUTING THIS SOFTWARE OR ITS DERIVATIVES.
 * 
 *  Camille Uba
 *
 *  AuxillaryBox.js
 *
 *  Description:
 *    Dynamically renders a Auxaillary Box with text to the right of the image
 *
 *  Structure:
 *
 *    <div id="ThumbnailViewContainer">
 *      <div id="ThumbnailContainer">
 *         <img src = .../>
 *         <img scr = .../?
 *       </div>
 *    </div>
 *
 *  Requires:
 *    prototype.js - http://www.prototypejs.org/
 *    jsHelper.js
 *
 *******************************************************************************/

 
 
function SummaryDescription()
{
  // html elements
  this.mContainer = null;
  this.mPanel = null;
  this.mHeader = null;
  this.mContent = null;
  this.mPointer = null;
  
  // js objects
  this.mContext = null;
  
  this.mCurrentElement = null;
  
  // flags
  this.mHidden = true;
  this.mAnimate = true;
  
  // passed functions
  this.mFunctionRequestContent
  
  // constants
  this.MAX_FIELD_VALUES = 4;
  this.MAX_VALUE_LENGTH = 70;
  this.MAX_SEGMENT_LENGTH = 15;
  this.NO_CONTENT = 'No Information Available.'
  
  this.CLASSNAME = 'summaryDescriptionContainer';
  this.CLASSNAME_RIGHT_POINTER = 'rightPointer';
  this.CLASSNAME_LEFT_POINTER = 'leftPointer';
  
  this.HEADER_TEXT = '&nbsp;Media Summary';
  
  
  this.init = function()
  {
    this.mPanel = $( document.createElement( 'div' ) );
    this.mHeader = $( document.createElement( 'h1' ) );
    this.mContent = $( document.createElement( 'table' ) );
    this.mContent.body = $( document.createElement( 'tbody' ) );
    this.mPointer = $( document.createElement( 'div' ) );
    
    this.mPanel.style.position = 'absolute';
    this.mPanel.style.display = 'none';
    
    this.mPanel.appendChild( this.mHeader );
    this.mContent.appendChild(this.mContent.body );
    this.mPanel.appendChild( this.mContent );
    this.mPanel.appendChild( this.mPointer );
    this.mContainer.appendChild( this.mPanel );
    
    this.mHeader.update( this.HEADER_TEXT );
    
    this.mPanel.addClassName( this.CLASSNAME );
    
    this.mPointer.style.position = 'absolute';
    this.mPointer.style.left = '0px';
    this.mPointer.style.top = '0px';
    
    
    this.hide();
    
    this.initalizeListeners();
  };
  
  this.initalizeListeners = function()
  {
    var listeners = this.mContext.getElementsBySelector( 'a img' );
    var sd = this;
    for( var i = 0; i < listeners.length; i++ )
    {
      var item = listeners[i];
      item.summaryDescription = this;
      item.onmouseover = function(e){ sd.show(); sd.update( jshGetSourceElement( e ) ); };
      item.onmouseout = function(e){ sd.hide(); };
      item.title = '';
      item.alt = '';
      if( item.up() )
      {
        item.up().title = '';
      }
    }    
  }
   
  this.render = function( container, context )
  {
    if( container && context )
    {
      this.mContext = context;
      this.mContainer = container;
      this.init();
    }
  };
  
  this.show = function()
  {
    this.mHidden = false;
    this.mPanel.show();
    if( this.mAnimate == true )
    {
      ElementEffects.fadeElement( this.mPanel, 1, 55, .25, null ); 
    }
  };
  
  this.hide = function()
  {
    this.mHidden = true;
    if( this.mAnimate == true )
    {
     var sd = this;
     var postFunction = function(){ sd.mPanel.hide(); };
     ElementEffects.fadeElement( this.mPanel, 0, 55, .25, postFunction ); 
    }
    else
    {
      this.mPanel.hide();
    }
  };
  
  this.update = function( element )
  {
    if( element )
    {

      this.mCurrentElement = $(element);
      
      // clear any exsiting values
      this.clearContent();
      
      // start loading
      
      
      // fetch contnet to display 
      this.requestContent( this.mCurrentElement );
      
      this.position( this.mCurrentElement )
      
      
    }
  };
  
  this.position = function( element )
  {
    // position our selves in the right spot 
    var offset = Position.cumulativeOffset( element );    
    this.mPointer.className = this.CLASSNAME_LEFT_POINTER;
    
    var position = [];
    position[0] = offset[0] + element.getWidth();
    position[1] = offset[1] + Math.round( element.getHeight() / 4 );
    
    var windowSize = jshGetWindowSize();
    if( ( position[0] + this.mPanel.getWidth() ) >= windowSize[0] )
    {
      this.mPointer.className = this.CLASSNAME_RIGHT_POINTER;
      position[0] = offset[0] - this.mPanel.getWidth();
    }    
    
    this.mPanel.style.left = position[0] + 'px';
    this.mPanel.style.top = position[1] + 'px';
    
  };
  
  this.requestContent = function( element )
  {
    if( element && this.mFunctionRequestContent )
    {
      this.mFunctionRequestContent( element );
    }
  };
  
  this.clearContent = function()
  {
    this.mContent.body.update( '' );
  }
    
  this.updateContent = function( element, hMap )
  {
    this.clearContent();
    
    if( element && hMap )
    {      
      // add new
      var count = 0;
      var row;
      var col;
      var value;
      var span;
      var text;
      for( var key in hMap )
      {
        if( hMap[key] && ( count < this.MAX_FIELD_VALUES ) )
        {
          row = document.createElement( 'tr' );
           
          col = document.createElement( 'td' );       
          col.width = '30%';
          col.height = '1';
          col.style.textAlign= 'right';
          col.align='right';
          col.vAlign = 'top';
          
          value = document.createElement( 'td' );         
          value.width = '70%';
          value.height = '1';
          value.vAlign = 'top';
          
          span = $( document.createElement( 'span' ) );           
          col.appendChild( span );
          span.update(key + ":");
        
          value = $( value );
          text = hMap[key].truncate( this.MAX_VALUE_LENGTH, '&#133;' );
          value.update( jshForceSpaces( text, this.MAX_SEGMENT_LENGTH ) );
                   
          row.appendChild( col );
          row.appendChild( value );
           
          this.mContent.body.appendChild( row ); 
        }
      }
    }
    else
    {
      var row = document.createElement( 'tr' );
      var col = document.createElement( 'td' ); 
      
      col.appendChild( $( document.createElement( 'span' ) ).update( this.NO_CONTENT ) );
      col.vAlign = 'top';
      row.appendChild( col );
      
      this.mContent.body.appendChild( row );
    }
    
    var lastCol = document.createElement( 'td' );
    lastCol.height = '99';
    lastCol.colSpan = '2'; 
   
    var lastRow = document.createElement( 'tr' );
    lastRow.appendChild( lastCol );  
 
    this.mContent.body.appendChild( lastRow );
    
    this.show();
  };
  
  this.setRequestContentFunction = function( functionRequestContent )
  {
    this.mFunctionRequestContent = functionRequestContent;
  };
  
  this.setAnimate = function( animate )
  {
    this.mAnimate = animate;
  }
}