/****************************************************************************
 * 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.
 *  
 *  cruiz10020@yahoo.com
 *
 *  ImagePanelInformation.js
 *
 *  Description:
 *    Descriptive Information for an image panel
 *
 *  Structure:
 *
 *
 *  Requires:
 *    prototype.js - http://www.prototypejs.org/
 *
 *  Development History:
 *    5-14-2007       - created
 *
 *******************************************************************************/


function ImagePanelInformation()
{
  this.mContainer = null;
  this.mPanel = null;
  this.mHeader = null;
  this.mBodyContainer = null;
  this.mBody = null;
  this.mGlassPlate = null;
  this.mResizerRight = null;
  this.mResizerLeft = null;
  this.mCloseButton = null;
  
  this.mFieldValues = null;
  this.mCurrentAction = null;
  this.mActionInProgress = null;
  this.mIsHidden = false;
  this.mAnimate = true;
  
  this.ACTION_RESIZE = 'ACTION_RESIZE';
  this.ACTION_RESIZE_LEFT = 'ACTION_RESIZE_LEFT';
  this.ACTION_MOVE = 'ACTION_MOVE';
  this.ACTION_DEFAULT = this.ACTION_MOVE;
  
  this.CLASSNAME = 'imagePanelInformation';
  this.CLASSNAME_HIDE_BUTTON = 'closeButton';  
  this.RESIZER_RIGHT_CLASSNAME = 'resizerRight';
  this.RESIZER_LEFT_CLASSNAME = 'resizerLeft'
  
  this.HEADER_TITLE = ' Image Information';
  this.HIDE_INSTRCUTIONS = 'Click to hide the ' + this.HEADER_TITLE + '!';
  this.NO_INFO = 'No information available.'
  
  this.MIN_DIMENSIONS = $( [ 200, 400 ] );
  
  
  this.init = function()
  {
    this.mPanel = $( document.createElement( 'div' ) );
    this.mHeader = $( document.createElement( 'h1' ) );
    this.mBodyContainer = $( document.createElement( 'div' ) );
    this.mBody = $( document.createElement( 'table' ) );
    this.mGlassPlate = $( document.createElement( 'div' ) );
    this.mResizerRight = $( document.createElement( 'div' ) );
    this.mResizerLeft = $( document.createElement( 'div' ) );
    this.mCloseButton = $( document.createElement( 'a' ) );

    this.mCloseButton.href = 'javascript: var HideButton;';
    this.mCloseButton.title = this.HIDE_INSTRCUTIONS;
    this.mBody.appendChild( $( document.createElement( 'tbody' ) ) );    
    this.mBodyContainer.appendChild( this.mBody );        
    this.mPanel.appendChild( this.mHeader );
    this.mPanel.appendChild( this.mBodyContainer );
    this.mPanel.appendChild( this.mResizerRight );
    this.mPanel.appendChild( this.mResizerLeft );
    this.mPanel.appendChild( this.mCloseButton );
    this.mContainer.appendChild( this.mPanel );
    this.mContainer.appendChild( this.mGlassPlate );
    
    this.mPanel.imagePanelInformation = this;
    this.mHeader.imagePanelInformation = this;
    this.mBody.imagePanelInformation = this;
    this.mResizerRight.imagePanelInformation = this;
    this.mResizerLeft.imagePanelInformation = this;
    this.mGlassPlate.imagePanelInformation = this;
    
    this.mPanel.addClassName( this.CLASSNAME );
    this.mResizerRight.addClassName( this.RESIZER_RIGHT_CLASSNAME );
    this.mResizerLeft.addClassName( this.RESIZER_LEFT_CLASSNAME );
    this.mCloseButton.addClassName( this.CLASSNAME_HIDE_BUTTON );
    
    // set inital text
    this.mHeader.update( this.HEADER_TITLE );
    
    // events
    var imi = this;
    this.mHeader.onmousedown = Static_ImagePanelInformation_StartMove;
    this.mHeader.onmouseover = function(){ imi.setCurrentAction( imi.ACTION_MOVE ); };
    this.mPanel.onmousedown = Static_ImagePanelInformation_StartMove;
    this.mCloseButton.onclick = function(){ imi.hide(); };
    
    
    this.mResizerRight.onmousedown = Static_ImagePanelInformation_StartMove;
    this.mResizerRight.onmouseover = function(){ imi.setCurrentAction( imi.ACTION_RESIZE ); };
    this.mResizerRight.onmouseout = function(){ imi.setCurrentAction( null ); };
    
    this.mResizerLeft.onmousedown = Static_ImagePanelInformation_StartMove;
    this.mResizerLeft.onmouseover = function(){ imi.setCurrentAction( imi.ACTION_RESIZE_LEFT ); };
    this.mResizerLeft.onmouseout = function(){ imi.setCurrentAction( null ); };
    
    // stylings
    this.mPanel.style.position = 'absolute';
    this.mPanel.style.top = 0 + 'px';
    this.mPanel.style.left = 0 + 'px';
    this.mPanel.style.overflow = 'hidden';
    this.mPanel.style.zIndex = 8777;
    
    this.mHeader.style.position = 'absolute';
    this.mHeader.style.top = 0 + 'px';
    this.mHeader.style.left = 0 + 'px';
    this.mHeader.style.cursor = 'move';
    
    this.mBodyContainer.style.position = 'absolute';
    this.mBodyContainer.style.top = ( this.mHeader.getHeight() ) + 'px';
    this.mBodyContainer.style.left = 0 + 'px';
    this.mBodyContainer.style.overflowX = 'hidden';   
    this.mBodyContainer.style.overflowY = 'auto';   
    
    this.mBody.cellSpacing = 0;
    this.mBody.cellPadding = 0;
    
    this.mResizerRight.style.position = 'absolute';
    this.mResizerRight.style.bottom = 0 + 'px';
    this.mResizerRight.style.right = 0 + 'px';
    
    this.mResizerLeft.style.position = 'absolute';
    this.mResizerLeft.style.bottom = 0 + 'px';
    this.mResizerLeft.style.left = 0 + 'px';
    
    this.mCloseButton.style.position = 'absolute';
    this.mCloseButton.style.top = 2 + 'px';
    this.mCloseButton.style.right = 2 + 'px';
    
    var margin = 10;
    var offset = Position.page( this.mContainer );
    var screenSize = jshGetWindowSize();
    this.mGlassPlate.hide();
    this.mGlassPlate.style.position = 'absolute';
    this.mGlassPlate.style.left = ( offset[0] + margin ) + 'px';
    this.mGlassPlate.style.top = ( offset[1] + margin ) + 'px';
    this.mGlassPlate.style.width = ( screenSize[0] - ( 2 * margin ) ) + 'px';
    this.mGlassPlate.style.height = ( screenSize[1] - ( 2 * margin ) ) + 'px';
    this.mGlassPlate.style.zIndex = 99999;
    this.mGlassPlate.style.backgroundColor = 'red';
    jshSetOpacity( this.mGlassPlate, .01 );
    
    this.resize( this.MIN_DIMENSIONS[0], this.MIN_DIMENSIONS[1] );
    this.moveToDefaultPosition();
    this.mPanel.hide();
    this.hide();
    
  };
  
  this.render = function( container )
  {
    if( container )
    {
      this.mContainer = container;
      this.init();
    }
  };
  
  this.setFieldValues = function( fieldValues )
  {
    this.mFieldValues = fieldValues;
    this.update();
  };
  
  this.update = function()
  {
    // clear what we have
    var tbody = this.mBody.getElementsBySelector( 'tbody' )[0];
    tbody.update( '' );
    
    // create all new based on the current field values
    if( this.mFieldValues )
    {
      var row;
      var col;
      var count = 0;
      for( var i = 0; i < this.mFieldValues.length; i++ )
      {
        if( this.mFieldValues[i] && this.mFieldValues[i].value && 
            this.mFieldValues[i].field && this.mFieldValues[i].field.displayName )
        {
          count++;
          row = $( document.createElement( 'tr' ) );
          if( count % 2 == 0 )
            row.addClassName( 'alternate' );
          
          col = $( document.createElement( 'td' ) );
          col.title = this.mFieldValues[i].value;
          col.vAlign = 'top';
          col.update( '<em>' + this.mFieldValues[i].field.displayName + ':' + '</em>' );
          row.appendChild( col );
          
          col = $( document.createElement( 'td' ) );
          col.update( this.mFieldValues[i].value );
          col.vAlign = 'top';
          col.title = this.mFieldValues[i].value;
          row.appendChild( col );
          tbody.appendChild( row );
        }
      }
    }
    else
    {
      row = $( document.createElement( 'tr' ) );
      col = $( document.createElement( 'td' ) );
      col.vAlign = 'top';
      col.update( this.NO_INFO );
      row.appendChild( col );
      tbody.appendChild( row );      
    }
  };
  
  this.resize = function( width, height )
  {
    // keep within bounds
    width = Math.max( width, this.MIN_DIMENSIONS[0] );
    height = Math.max( height, this.MIN_DIMENSIONS[1] );
    
    this.mPanel.style.width = width + 'px';
    this.mPanel.style.height = height + 'px';
    
    this.mBodyContainer.style.width = ( this.mPanel.getWidth() ) + 'px';
    this.mBodyContainer.style.height = ( this.mPanel.getHeight() - this.mHeader.getHeight() - this.mResizerRight.getHeight() ) + 'px';
    
    this.mBody.style.width = ( this.mPanel.getWidth() - 17 ) + 'px';
    this.mBody.style.height = ( this.mPanel.getHeight() - this.mHeader.getHeight() - this.mResizerRight.getHeight() ) + 'px';
    
    
    this.mHeader.style.width = ( this.mPanel.getWidth() ) + 'px';
  };
  
  this.moveToDefaultPosition = function()
  {
    var position = [];
    position[0] = ( this.mContainer.getWidth() - this.MIN_DIMENSIONS[0] - 28 );
    position[1] = 50;
    this.moveTo( position[0], position[1] );
  };
  
  this.moveTo = function( x, y ) 
  {
    var offset = Position.cumulativeOffset( this.mContainer );
    var screenSize = jshGetWindowSize();
  
    // keep within limits
    x = Math.max( x, offset[0] );  
    if( ( x + this.mPanel.getWidth() ) > ( screenSize[0] - offset[0] ) )
    {
      x = (  screenSize[0] - offset[0] ) - this.mPanel.getWidth();
    }
  
    y = Math.max( y, offset[1] );
    if( ( y + this.mPanel.getHeight() ) > ( screenSize[1] - offset[1] ) )
    {
      y = ( screenSize[1] - offset[1] ) - this.mPanel.getHeight();
    }
    
    this.mPanel.style.left = x + 'px';
    this.mPanel.style.top = y + 'px';
    
    return true;
  };
  
  this.getDimensions = function()
  {
    var toReturn = new Array();
    var borderWidth = parseInt( this.mPanel.getStyle( 'borderLeftWidth' ) ) + parseInt( this.mPanel.getStyle( 'borderRightWidth' ) );
    var borderHeight = parseInt( this.mPanel.getStyle( 'borderBottomWidth' ) ) + parseInt( this.mPanel.getStyle( 'borderTopWidth' ) );
    toReturn[ 0 ] = this.mPanel.getWidth() - borderWidth;
    toReturn[ 1 ] = this.mPanel.getHeight() - borderHeight;
    
    return toReturn;
  };
  
  this.getPosition = function()
  {
    var toReturn = new Array();
    toReturn[ 0 ] = parseInt( this.mPanel.getStyle( 'left' ) );
    toReturn[ 1 ] = parseInt( this.mPanel.getStyle( 'top' ) );
    
    return toReturn;
  };
  
  this.equalsCurrentAction = function( anAction )
  {
    if( anAction )
    {
      if( this.mCurrentAction == anAction )
      {
        return true;
      }
    }
          
    return false;
  };  
  
  this.setCurrentAction = function( newAction )
  {
    if( this.mActionInProgress != true )
    {
      if( ! newAction )
        newAction = this.ACTION_DEFAULT;
        
      this.mCurrentAction = newAction;
    }
  };
  
  this.hide = function()
  {
    this.mIsHidden = true;
    
    if( this.mAnimate == true )
    {
      var ipi = this;
      var postFunction = function(){ ipi.mPanel.hide(); };
      ElementEffects.fadeElement( this.mPanel, 0, 55, .25, postFunction );
    }
    else
    {
      this.mPanel.hide();
    }
  };
  
  this.show = function()
  {
    this.mIsHidden = false;
    this.mPanel.show();
    
    if( this.mAnimate == true )
    {
      ElementEffects.fadeElement( this.mPanel, 1, 55, .25, null );
    }
  };
  
  this.toggle = function()
  {
    if( this.mIsHidden == true )
    {
      this.show();
    }
    else
    {
      this.hide();
    }
  };
  
  this.setAnimate = function( animate )
  {
    this.mAnimate = animate;
  };
  
}


/**
 * Marks the end of a panel move operation
 */
function Static_ImagePanelInformation_EndMove( e, cancelAction )
{
  var sourceElement = jshGetSourceElement( e );
  if( sourceElement.imagePanelInformation )
  {
    var imagePanelInformation = sourceElement.imagePanelInformation;
    
    if( imagePanelInformation.mActionInProgress == true )
    {      
      // reset variables
      imagePanelInformation.mActionInProgress = null;
      
      // reset events
      imagePanelInformation.mGlassPlate.hide();
      imagePanelInformation.mGlassPlate.onmouseup = null;
      imagePanelInformation.mGlassPlate.onmousemove = null;
      imagePanelInformation.mGlassPlate.onmousedown = null;
      imagePanelInformation.mGlassPlate.onmouseout = null;
      
      imagePanelInformation.mContainer.imagePanelInformation = null;      
      imagePanelInformation.mContainer.onmousemove = null;
      imagePanelInformation.mContainer.onmouseup = null;
      
      // reset poistion to original
      if( cancelAction == true )
      {
       // do something? 
      }
      else
      {
        // just endf or now...later we might need to do some post op stuff
        
      }
      
      // clear current action
      imagePanelInformation.setCurrentAction( null );
      
      // reset the last of the variables       
      imagePanelInformation.mMoveStartingX = null;
      imagePanelInformation.mMoveStartingY = null;
      imagePanelInformation.mResizeStartingWidth = null;
      imagePanelInformation.mResizeStartingHeight = null;    
      imagePanelInformation.mOriginalMoveStartingX = null;
      imagePanelInformation.mOriginalMoveStartingY = null;
      imagePanelInformation.mOriginalPanStartingX = null;
      imagePanelInformation.mOriginalPanStartingY = null;
      imagePanelInformation.mOriginalStartingX = null;
      imagePanelInformation.mOriginalStartingY = null;
      imagePanelInformation.mResizeStartingWidth = null;
      imagePanelInformation.mResizeStartingHeight = null;
      imagePanelInformation.mMoveStartingX = null;
      imagePanelInformation.mMoveStartingY = null;
    }
  }
}

/**
 * Marks the state of a panel move operation
 */
function Static_ImagePanelInformation_StartMove( e )
{
  e = jshGetEvent( e );
  var sourceElement = jshGetSourceElement( e );  
  if( sourceElement.imagePanelInformation )
  {    
    var imagePanelInformation = sourceElement.imagePanelInformation;
    
    if( imagePanelInformation.equalsCurrentAction( imagePanelInformation.ACTION_MOVE ) || 
        imagePanelInformation.equalsCurrentAction( imagePanelInformation.ACTION_RESIZE  ) ||
        imagePanelInformation.equalsCurrentAction( imagePanelInformation.ACTION_RESIZE_LEFT  ) )
    {
      if( !( imagePanelInformation.mActionInProgress == true ) )
      { 
        imagePanelInformation.mActionInProgress = true;
        
        // back up some values incase we cancel or need a reference
        var offset = Position.page( imagePanelInformation.mPanel );        
        imagePanelInformation.mOriginalMoveStartingX = offset[0];
        imagePanelInformation.mOriginalMoveStartingY = offset[1];
        
        // this guy gets updated
        imagePanelInformation.mMoveStartingX = Event.pointerX( e );
        imagePanelInformation.mMoveStartingY = Event.pointerY( e );
        
        // this guy stays the same 
        imagePanelInformation.mOriginalStartingX = Event.pointerX( e );
        imagePanelInformation.mOriginalStartingY = Event.pointerY( e );
        
        // set events on other elements to get a "smooth" motion
        imagePanelInformation.mGlassPlate.show();
        imagePanelInformation.mGlassPlate.imagePanelInformation = imagePanelInformation;      
        imagePanelInformation.mGlassPlate.onmousemove = Static_ImagePanelInformation_Move;
        imagePanelInformation.mGlassPlate.onmouseup = Static_ImagePanelInformation_EndMove;
        imagePanelInformation.mGlassPlate.onmouseout = Static_ImagePanelInformation_EndMove;
        
        imagePanelInformation.mContainer.imagePanelInformation = imagePanelInformation;      
        imagePanelInformation.mContainer.onmousemove = Static_ImagePanelInformation_Move;
        imagePanelInformation.mContainer.onmouseup = Static_ImagePanelInformation_EndMove;
      }
    }
  }
}

/**
 * The actual work of a Move operation which can be either a 
 * Panel move or pan based on what the control is set to
 */
function Static_ImagePanelInformation_Move( e )
{
  e = jshGetEvent( e );
  var sourceElement = jshGetSourceElement( e );  
  if( sourceElement.imagePanelInformation )
  {
    // move the panel if we are in move mode
    var imagePanelInformation = sourceElement.imagePanelInformation;
    if( imagePanelInformation.mActionInProgress == true )
    { 
      // current mouse position      
      var endingX = Event.pointerX( e );
      var endingY = Event.pointerY( e );
      
      // cal how many px we are moving
      var difference = $( [ ( endingX - imagePanelInformation.mMoveStartingX ), ( endingY - imagePanelInformation.mMoveStartingY ) ] );
      
      // update values for next time
      imagePanelInformation.mMoveStartingX = endingX;
      imagePanelInformation.mMoveStartingY = endingY;
      
      // do the action
      if( imagePanelInformation.equalsCurrentAction( imagePanelInformation.ACTION_MOVE ) )
      { 
        // calc actual new move position
        var offset = Position.cumulativeOffset( imagePanelInformation.mPanel );      
        var x = offset[0] + difference[0];
        var y = offset[1] + difference[1];
        
        imagePanelInformation.moveTo( x, y );
      }   
      else if( imagePanelInformation.equalsCurrentAction( imagePanelInformation.ACTION_RESIZE ) )
      { 
        var dimensions = imagePanelInformation.getDimensions();        
        imagePanelInformation.resize( ( dimensions[0] + difference[0] ), ( dimensions[1] + difference[1] ) );
      }
      else if( imagePanelInformation.equalsCurrentAction( imagePanelInformation.ACTION_RESIZE_LEFT ) )
      { 
        var position = imagePanelInformation.getPosition();
        var dimensions = imagePanelInformation.getDimensions();
        
        imagePanelInformation.resize( ( dimensions[0] - difference[0] ), ( dimensions[1] + difference[1] ) );
        imagePanelInformation.moveTo( ( position[0] + difference[0] ), position[1] );
      } 
    }    
  }
}