/****************************************************************************
 * 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
 *
 *  ImagePanel.js
 *
 *  Description:
 *    Set of controls for use with an ImagePanel.
 *
 *  Structure:
 *
 *
 *  Requires:
 *    prototype.js - http://www.prototypejs.org/
 *
 *  Development History:
 *    5-14-2007       - created
 *
 *******************************************************************************/

function ImagePanelControls( notifyOfActionChangeFunction, notifyOfCancelActionFunction )
{
  this.mContainer = null;
  this.mControls = null;
  this.mButtonContainer = null;
  this.mGrip = null;
  this.mMoveButton = null;
  this.mPanButton = null;
  this.mZoomInButton = null;
  this.mZoomOutButton = null;
  this.mResetButton = null;
  this.mTogglePositionButton = null;
  this.mHelpButton = null;
  this.mShowGrip = false;
  
  this.mPosition = null;
  this.mOriginalSize = null;
  
  this.mCurrentAction = null;
  
  this.mNotifyOfActionChange = notifyOfActionChangeFunction;
  this.mNotifyOfCancelAction = notifyOfCancelActionFunction;
  
  // constants
  this.CLASSNAME = 'controls';  
  this.CLASSNAME_ACTIVE = 'active';
  this.GRIP_CLASSNAME = 'grip';
  
  this.POSITION_TOP = 'top';
  this.POSITION_RIGHT = 'right';
  
  this.ACTION_MOVE = 'ACTION_MOVE';
  this.ACTION_PAN = 'ACTION_PAN';
  this.ACTION_ZOOM_IN = 'ACTION_ZOOM_IN';
  this.ACTION_ZOOM_OUT = 'ACTION_ZOOM_OUT';
  this.ACTION_RESET = 'ACTION_RESET';
  this.ACTION_TOGGLE_POSITION = 'ACTION_TOGGLE_POSITION';
  this.ACTION_HELP = 'ACTION_HELP';
  
  this.ACTION_INSTRUCTION_MOVE = 'Move Tool (m)';
  this.ACTION_INSTRUCTION_PAN = 'Pan Tool (p)';
  this.ACTION_INSTRUCTION_ZOOM_IN = 'Zoom-in Tool (+)';
  this.ACTION_INSTRUCTION_ZOOM_OUT = 'Zoom-out Tool (-)';
  this.ACTION_INSTRUCTION_RESET = 'Reset Image Tool (r)';
  this.ACTION_INSTRUCTION_TOGGLE = 'Toggle Controls Position Tool (t)';
  this.ACTION_INSTRUCTION_HELP = 'Help (h)';
  
  
  // map methods
  this.init = ImagePanelControls_Init;
  this.render = ImagePanelControls_Render;
  this.hideControls = ImagePanelControls_HideControls;
  this.showControls = ImagePanelControls_ShowControls;
  this.isHidden = ImagePanelControls_IsHidden;
  this.setCurrentAction = ImagePanelControls_SetCurrentAction;
  this.getCurrentAction = ImagePanelControls_GetCurrentAction;
  this.reposition = ImagePanelControls_Reposition;
  this.positionGrip = ImagePanelControls_PositionGrip;
}

function ImagePanelControls_Init()
{
  // create the different sections/actions
  this.mControls = document.createElement( 'div' );
  this.mButtonContainer = document.createElement( 'div' );
  this.mGrip = document.createElement( 'div' );
  this.mMoveButton = document.createElement( 'a' );
  this.mPanButton = document.createElement( 'a' );
  this.mHideButton = document.createElement( 'a' );
  this.mZoomOutButton = document.createElement( 'a' );
  this.mZoomInButton = document.createElement( 'a' );
  this.mResetButton = document.createElement( 'a' );
  this.mTogglePositionButton = document.createElement( 'a' );
  this.mHelpButton = document.createElement( 'a' );  
  
  // add the sections to the container
  //this.mButtonContainer.appendChild( this.mHideButton );
  this.mButtonContainer.appendChild( this.mMoveButton );
  this.mButtonContainer.appendChild( this.mPanButton );
  this.mButtonContainer.appendChild( this.mZoomOutButton );
  this.mButtonContainer.appendChild( this.mZoomInButton );
  this.mButtonContainer.appendChild( this.mResetButton );
  this.mButtonContainer.appendChild( this.mTogglePositionButton );
  this.mButtonContainer.appendChild( this.mHelpButton );
  
  // add it all to controls
  this.mControls.appendChild( this.mButtonContainer );
  this.mControls.appendChild( this.mGrip );
  
  // make them prototype objects
  this.mContainer = $(this.mContainer);
  this.mGrip = $(this.mGrip);
  this.mHideButton = $(this.mHideButton);
  this.mMoveButton = $(this.mMoveButton);
  this.mPanButton = $(this.mPanButton);
  this.mZoomOutButton = $(this.mZoomOutButton);
  this.mZoomInButton = $(this.mZoomInButton);
  this.mResetButton = $(this.mResetButton);
  this.mTogglePositionButton = $(this.mTogglePositionButton);
  this.mHelpButton = $(this.mHelpButton);
  
  // put references to ImagePanelControl
  this.mGrip.imagePanelControls = this;
  this.mHideButton.imagePanelControls = this;
  this.mMoveButton.imagePanelControls = this;
  this.mPanButton.imagePanelControls = this;
  this.mZoomOutButton.imagePanelControls = this;
  this.mZoomInButton.imagePanelControls = this;
  this.mResetButton.imagePanelControls = this;
  this.mTogglePositionButton.imagePanelControls = this;
  this.mHelpButton.imagePanelControls = this;
  
  // each action button has a name name
  this.mMoveButton.actionName = this.ACTION_MOVE;
  this.mMoveButton.href = 'javascript:var move';
  this.mMoveButton.title = this.ACTION_INSTRUCTION_MOVE;
  this.mPanButton.actionName = this.ACTION_PAN;
  this.mPanButton.href = 'javascript:var Pan';
  this.mPanButton.title = this.ACTION_INSTRUCTION_PAN;
  this.mZoomOutButton.href = 'javascript:var ZoomOut';
  this.mZoomOutButton.actionName = this.ACTION_ZOOM_OUT;
  this.mZoomOutButton.title = this.ACTION_INSTRUCTION_ZOOM_OUT;
  this.mZoomInButton.href = 'javascript:var ZoomIn';
  this.mZoomInButton.actionName = this.ACTION_ZOOM_IN;
  this.mZoomInButton.title = this.ACTION_INSTRUCTION_ZOOM_IN;
  this.mResetButton.href = 'javascript:var Reset';
  this.mResetButton.actionName = this.ACTION_RESET;  
  this.mResetButton.title = this.ACTION_INSTRUCTION_RESET;
  this.mTogglePositionButton.href = 'javascript:var TogglePosition';
  this.mTogglePositionButton.actionName = this.ACTION_TOGGLE_POSITION;  
  this.mTogglePositionButton.title = this.ACTION_INSTRUCTION_TOGGLE;
  this.mHelpButton.href = 'javascript:var Help';
  this.mHelpButton.actionName = this.ACTION_HELP;  
  this.mHelpButton.title = this.ACTION_INSTRUCTION_HELP;
  
  
  // add events
  this.mMoveButton.onclick = Static_ImagePanelControls_ButtonPressed;
  this.mPanButton.onclick = Static_ImagePanelControls_ButtonPressed;
  this.mZoomOutButton.onclick = Static_ImagePanelControls_ButtonPressed;
  this.mZoomInButton.onclick = Static_ImagePanelControls_ButtonPressed;
  this.mResetButton.onclick = Static_ImagePanelControls_ButtonPressed;
  this.mTogglePositionButton.onclick = Static_ImagePanelControls_ButtonPressed;
  this.mHelpButton.onclick = Static_ImagePanelControls_ButtonPressed;
  
  //this.mGrip.onmouseover = Static_ImagePanelControls_Show;
  //this.mGrip.onmouseover = Static_ImagePanelControls_Show;
  //this.mGrip.onclick = Static_ImagePanelControls_Hide;  
  this.mGrip.onclick = Static_ImagePanelControls_ToggleDisplay;
  
  // map the action name to its button
  this.mMapActionNameToButton = 
  { 
    'ACTION_PAN': this.mPanButton,
    'ACTION_MOVE': this.mMoveButton,
    'ACTION_ZOOM_OUT': this.mZoomOutButton,
    'ACTION_ZOOM_IN': this.mZoomInButton,
    'ACTION_RESET' : this.mResetButton,
    'ACTION_HELP' : this.mHelpButton
  };
  
  // set any css class names
  $(this.mControls).addClassName( this.CLASSNAME );
  this.mGrip.addClassName( this.GRIP_CLASSNAME );
  
  this.mMoveButton.addClassName( 'move' );
  this.mPanButton.addClassName( 'pan' );
  this.mZoomOutButton.addClassName( 'zoomOut' );
  this.mZoomInButton.addClassName( 'zoomIn' );
  this.mResetButton.addClassName( 'reset' );
  this.mTogglePositionButton.addClassName( 'toggle' );
  this.mHelpButton.addClassName( 'help' );
  
  // store the classname for later since we will be toggling
  this.mMoveButton.mOgClassName = this.mMoveButton.className;
  this.mPanButton.mOgClassName = this.mPanButton.className;
  this.mZoomOutButton.mOgClassName = this.mZoomOutButton.className;
  this.mZoomInButton.mOgClassName = this.mZoomInButton.className;
  this.mResetButton.mOgClassName = this.mResetButton.className;
  this.mTogglePositionButton.mOgClassName = this.mTogglePositionButton.className;
  this.mHelpButton.mOgClassName = this.mHelpButton.className;
  
  // finally add the panel to the container
  //this.mContainer.appendChild( this.mControls );
  
  document.body.appendChild( this.mControls );
  
  // set some stylings
  this.mControls.style.overflow = 'hidden';
  this.mControls.style.position = 'absolute';
  this.mGrip.style.position = 'absolute';  
  
  // position our selves
  //this.reposition( this.POSITION_RIGHT );
  this.reposition( this.POSITION_TOP );  
  
  // set the default action
  this.setCurrentAction( this.ACTION_MOVE );
  
  // make our selves a bit translucent
  jshSetOpacity( this.mControls, .90 );
  
  // helpful text
  this.mGrip.title = 'Click to show/hide';
  
  // key listeners
  var ipc = this;
  new YAHOO.util.KeyListener( 
    document, 
    { keys:77 }, // m keys
    { fn:function(){ipc.setCurrentAction( ipc.ACTION_MOVE )}, correctScope:false }, 
    "keyup" ).enable();
    
  new YAHOO.util.KeyListener( 
    document, 
    { keys:86 }, // v keys
    { fn:function(){ipc.setCurrentAction( ipc.ACTION_MOVE )}, correctScope:false }, 
    "keyup" ).enable();
    
  new YAHOO.util.KeyListener( 
    document, 
    { keys:80 }, // p keys
    { fn:function(){ipc.setCurrentAction( ipc.ACTION_PAN )}, correctScope:false }, 
    "keyup" ).enable();
    
  new YAHOO.util.KeyListener( 
    document, 
    { keys:72 }, // h keys
    { fn:function(){ipc.setCurrentAction( ipc.ACTION_PAN )}, correctScope:false }, 
    "keyup" ).enable();
    
  new YAHOO.util.KeyListener( 
    document, 
    { keys:82 }, // r keys
    { fn:function(){ipc.setCurrentAction( ipc.ACTION_RESET )}, correctScope:false }, 
    "keyup" ).enable();
    
  new YAHOO.util.KeyListener( 
    document, 
    { keys:43 }, // + keys
    { fn:function(){ipc.setCurrentAction( ipc.ACTION_ZOOM_IN )}, correctScope:false }, 
    "keyup" ).enable();
    
  new YAHOO.util.KeyListener( 
    document, 
    { keys:61 }, // = keys
    { fn:function(){ipc.setCurrentAction( ipc.ACTION_ZOOM_IN )}, correctScope:false }, 
    "keyup" ).enable();
    
  new YAHOO.util.KeyListener( 
    document, 
    { keys:22 }, // z keys
    { fn:function(){ipc.setCurrentAction( ipc.ACTION_ZOOM_IN )}, correctScope:false }, 
    "keyup" ).enable();
    
  new YAHOO.util.KeyListener( 
    document, 
    { keys:189 }, // - keys
    { fn:function(){ipc.setCurrentAction( ipc.ACTION_ZOOM_OUT )}, correctScope:false }, 
    "keyup" ).enable();
    
  new YAHOO.util.KeyListener( 
    document, 
    { keys:27 }, // esc key
    { fn:function(){ ipc.mNotifyOfCancelAction( ipc ) }, correctScope:false }, 
    "keyup" ).enable();
}

function ImagePanelControls_Render( element )
{
  if( element )
  {
    this.mContainer = element;
    this.init();
  }
}

function ImagePanelControls_ShowControls()
{
  if( this.mPosition == this.POSITION_TOP )
  {
    this.mControls.style.height = this.mOriginalSize + 'px';
    this.mButtonContainer.style.display = '';
  }
  else
  {
    this.mControls.style.width = this.mOriginalSize + 'px';    
    this.mButtonContainer.style.display = '';
  }
  
  this.mOriginalSize = null;
}

function ImagePanelControls_HideControls()
{
  if( this.mPosition == this.POSITION_TOP )
  {
    this.mOriginalSize = this.mControls.getHeight();
    this.mButtonContainer.style.display = 'none';
    this.mControls.style.height = this.mGrip.getHeight() + 'px';
  }
  else
  {
    this.mOriginalSize = this.mControls.getWidth();
    this.mButtonContainer.style.display = 'none';
    this.mControls.style.width = this.mGrip.getWidth() + 'px';    
  }
}

function ImagePanelControls_IsHidden()
{
  if( this.mOriginalSize != null )
  {
    return true;
  }
  
  return false;
}

function ImagePanelControls_Reposition( position )
{
  this.mPosition = position;
  this.mControls.style.zIndex = '1000';
  if( this.mPosition == this.POSITION_TOP )
  {
    // display the controls near the top of the container
    var offset = Position.positionedOffset( this.mContainer );    
    this.mControls.style.top = offset[1] + 'px';
    this.mControls.style.right = '5px';
    
    //this.mControls.style.width = '500px';
    //this.mControls.style.height = '30px';
    //this.mControls.style.borderWidth = '0 2px 2px 2px';
    
    this.mControls.style.width = '160px';
    this.mControls.style.height = '25px';
    
  }
  else
  {
    // display the controls to the right in the container
    this.mControls.style.top = '10%';
    this.mControls.style.right = '0';
    
    //this.mControls.style.width = '50px';
    //this.mControls.style.height = '500px';
    //this.mControls.style.borderWidth = '2px 0 2px 2px';
    
    this.mControls.style.width = '30px';
    this.mControls.style.height = '155px';    
  }
  
  // update the grip position
  this.positionGrip();
}

function ImagePanelControls_PositionGrip( newPosition )
{
  if( this.mShowGrip != true )
  {
    this.mGrip.hide();
  }
  else
  {
    if( newPosition )
    {
      this.mPosition = newPosition;
    }
      
    var offset = Position.positionedOffset( this.mControls );  
    if( this.mPosition == this.POSITION_TOP )
    {
      this.mGrip.style.width = ( this.mControls.getWidth() - 8 ) + 'px';
      this.mGrip.style.height = '5px';
      
      this.mGrip.style.bottom = '0';
      this.mGrip.style.left = '0';
      
    }
    else
    {
      //this.mGrip.style.height = '100%';
      //this.mGrip.style.width = '4px';
      
      //this.mGrip.style.bottom = '0';
      //this.mGrip.style.left = '0';
    }
  }
}

function ImagePanelControls_SetCurrentAction( actionName )
{
  //debug( 'ImagePanelControls_SetCurrentAction: ' + actionName );
  var oldAction = this.mCurrentAction;
  this.mCurrentAction = actionName;
  
  // set the active function
  if( actionName == this.ACTION_TOGGLE_POSITION )
  {
    // internal action
    var position = (this.mPosition == this.POSITION_TOP)? this.POSITION_RIGHT: this.POSITION_TOP;
    this.reposition( position );
  }
  else
  {
    for( var key in this.mMapActionNameToButton )
    {
      if( key == this.mCurrentAction )
      {
        this.mMapActionNameToButton[ key ].addClassName( this.CLASSNAME_ACTIVE );
      }
      else
      {
        this.mMapActionNameToButton[ key ].className = this.mMapActionNameToButton[ key ].mOgClassName;
      }
    }
    
    this.mNotifyOfActionChange( this, oldAction, this.mCurrentAction );
  }
}

function ImagePanelControls_GetCurrentAction()
{
  return this.mCurrentAction;
}


function Static_ImagePanelControls_ButtonPressed( e )
{
  var sourceElement = jshGetSourceElement( e );
  
  if( sourceElement.imagePanelControls )
  {
    var imagePanelControls = sourceElement.imagePanelControls;
    
    imagePanelControls.setCurrentAction( sourceElement.actionName );
    sourceElement.blur();    
  }
}

function Static_ImagePanelControls_Show( e )
{
  e = jshGetEvent( e );
  var sourceElement = jshGetSourceElement( e );
  
  if( sourceElement.imagePanelControls )
  {
    var imagePanelControls = sourceElement.imagePanelControls;
    
    // toggle
    if( imagePanelControls.isHidden() )
    {
      imagePanelControls.showControls();
    }
  }
}

function Static_ImagePanelControls_Hide( e )
{
var sourceElement = jshGetSourceElement( e );
  
  if( sourceElement.imagePanelControls )
  {
    var imagePanelControls = sourceElement.imagePanelControls;
    
    // show only if hidden
    if( !imagePanelControls.isHidden() )
    {
      imagePanelControls.hideControls();
    }
  }
}

function Static_ImagePanelControls_ToggleDisplay( e )
{
var sourceElement = jshGetSourceElement( e );
  
  if( sourceElement.imagePanelControls )
  {
    var imagePanelControls = sourceElement.imagePanelControls;
    
    // show only if hidden
    if( !imagePanelControls.isHidden() )
    {
      imagePanelControls.hideControls();
    }
    else
    {
      imagePanelControls.showControls();
    }
  }
}