/****************************************************************************
 * 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
 *
 *  MediaImagesPanel.js
 *
 *  Description:
 *    Source of Images to use within the Thumbnail view page
 *
 *  Structure:
 *
 *
 *  Requires:
 *    prototype.js - http://www.prototypejs.org/
 *
 *  Development History:
 *    10-2-2007       - created
 *
 *******************************************************************************/


function MediaImagesPanel()
{
  // html elements
  this.mContainer = null;
  this.mPanel = null;
  this.mTab = null;
  this.mContent = null;
  this.mOperationsContainer = null;
  this.mImagesContainer = null;
  this.mGroupsList = null;
  this.mGroupInstructions = null;
  //this.mHelpButton = null;
  this.mCloseButton = null;
  this.mLoadingContainer = null;
  this.mDragPlaceHolder = null;
  this.mGlassPlate = null;
  
  // js elements
  this.mMediaInfos = null;
  this.mManager = null;
  this.mErrorImageUrl;
  
  // functions
  this.mFunctionRequestMediaGroupImages = null;
  this.mFunctionRequestSearchImages = null;
  
  // flags
  this.mHidden = null;
  this.mLoading = null;
  this.mDimensions = null;
  this.mAnimate = true;
    
  this.CLASSNAME = 'imagesPanel';
  this.TAB_CLASSNAME = 'tab';
  this.CONTENT_CLASSNAME = 'content';
  this.IMAGES_CONTAINER_CLASSNAME = 'imagesContainer';
  this.OPERATIONS_CONTAINER_CLASSNAME = 'operationsContainer';
  this.LOADING_CONTAINER_CLASSNAME = 'loadingContainer';
  this.MEDIA_ITEM_CLASSNAME = 'mediaItem';
  this.HELP_BUTTON_CLASSNAME = 'helpButton';
  this.CLOSE_BUTTON_CLASSNAME = 'closeButton';
  this.DROPZONE_CLASSNAME = 'dropzone';
  this.PLACE_HOLDER = 'placeHolder';
  
  
  this.TAB_INSTRCUTIONS = 'Click to open/close the panel.';
  this.HELP_INSTRCUTIONS = 'Opens the help page.';
  this.CLOSE_INSTRCUTIONS = 'Close the panel.';
  
  
  this.TAB_HEIGHT = 22;
  this.MAX_OPEN_DISTANCE = 11;
  this.MARGIN = 9;
  this.MAX_LOADING_TIME = 46000; // 46 sec
  this.MIN_LOADING_TIME = 800;
  
  this.defaultMediaGroupId;
  this.defaultMediaGroupName ;
  
  this.setDefaultMediaGroupId = function(mgid) {
    this.defaultMediaGroupId = mgid;
  }
  
  this.getDefaultMediaGroupId = function() {
    return this.defaultMediaGroupId;
  }  
  
  this.setDefaultMediaGroupName = function(groupName) {
    this.defaultMediaGroupName  = groupName;
  }
  
  this.getDefaultMediaGroupName = function() {
    return this.defaultMediaGroupName ;
  }  
  
  //set default error images for different types of media
  this.setErrorImageUrls = function( errorImageUrl )
  {
    this.mErrorImageUrl = errorImageUrl;
  };  
    
  this.init = function()
  {
    // create elements
    this.mPanel = $( document.createElement( 'div' ) );
    this.mPanel.id = 'imagesPanel';
    this.mDragPlaceHolder = $(document.createElement( 'div' ));
    this.mTab = $( document.createElement( 'div' ) );
    this.mContent = $( document.createElement( 'div' ) );
    this.mOperationsContainer = $( document.createElement( 'div' ) );
    this.mImagesContainer = $( document.createElement( 'div' ) );
    this.mLoadingContainer = $( document.createElement( 'div' ) );
    this.mGroupInstructions = $( document.createElement( 'p' ) );
    //this.mHelpButton = $( document.createElement( 'a' ) );
    this.mCloseButton = $( document.createElement( 'a' ) );
    this.mGlassPlate = $( document.createElement( 'div' ) );
    
    // create structure
    this.mOperationsContainer.appendChild( this.mGroupInstructions );
    
    //this.mOperationsContainer.appendChild( this.mHelpButton );
    this.mOperationsContainer.appendChild( this.mCloseButton );
    
    this.mContent.appendChild( this.mOperationsContainer );
    this.mContent.appendChild( this.mImagesContainer );
    this.mPanel.appendChild( this.mContent );
    this.mPanel.appendChild( this.mTab );
    this.mPanel.appendChild( this.mLoadingContainer );
    this.mContainer.appendChild( this.mGlassPlate );
    this.mContainer.appendChild( this.mPanel );
    
    // set class names
    this.mPanel.addClassName( this.CLASSNAME );
    this.mTab.addClassName( this.TAB_CLASSNAME );
    this.mContent.addClassName( this.CONTENT_CLASSNAME );
    this.mOperationsContainer.addClassName( this.OPERATIONS_CONTAINER_CLASSNAME );
    //this.mHelpButton.addClassName( this.HELP_BUTTON_CLASSNAME );
    this.mCloseButton.addClassName( this.CLOSE_BUTTON_CLASSNAME );
    this.mImagesContainer.addClassName( this.IMAGES_CONTAINER_CLASSNAME );    
    this.mLoadingContainer.addClassName( this.LOADING_CONTAINER_CLASSNAME );
    this.mDragPlaceHolder.addClassName( this.PLACE_HOLDER );
    this.mGlassPlate.addClassName( 'glassPlate' );
    
    // default values
    this.mGroupInstructions.update( 'Active Media Group : '+this.getDefaultMediaGroupName () );
    this.mTab.title = this.TAB_INSTRCUTIONS;
    //this.mHelpButton.href = 'javascript: var helpButton;';
    //this.mHelpButton.title = this.HELP_INSTRCUTIONS;
    this.mCloseButton.href = 'javascript: var closeButton;';
    this.mCloseButton.title = this.CLOSE_INSTRCUTIONS;
    this.mDragPlaceHolder.imagesPanel = this;
    
    // events
    var ip = this;
    this.mTab.onclick = function(){ ip.toggle(); };
    //this.mHelpButton.onclick = function(){ ip.mHelpButton.blur(); if(ip.mManager){ip.mManager.showHelpPage();} };
    this.mCloseButton.onclick = function(){ ip.mCloseButton.blur(); ip.toggle(); };
    
    // stylings
    this.mPanel.style.position = 'absolute';
    this.mPanel.style.overflow = 'hidden';
    this.mPanel.style.zIndex = 9888;
    
    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;
    
    // originally for debugging, turns out IE7 needs a color other wise its as if the div is not there.
    this.mGlassPlate.style.backgroundColor = 'red';
    jshSetOpacity( this.mGlassPlate, .01 );
    

    
    this.mTab.style.position = 'absolute';
    this.mTab.style.right = 0 + 'px';
    this.mTab.style.top = 1 + 'px';
    
    this.mContent.style.position = 'absolute';
    this.mContent.style.left = 0 + 'px';
    this.mContent.style.top = this.TAB_HEIGHT + 'px';
    
    //this.mHelpButton.style.position = 'absolute';
    //this.mHelpButton.style.right = 29 + 'px';
    //this.mHelpButton.style.top = 3 + 'px';
    
    this.mCloseButton.style.position = 'absolute';
    this.mCloseButton.style.right = 12 + 'px';
    this.mCloseButton.style.top = 3 + 'px';
    
    this.mImagesContainer.style.overflow = 'auto';
    
    this.mGroupInstructions.style.display = 'inline';

    
    this.mDragPlaceHolder.style.backgroundColor = 'transparent';
    this.mDragPlaceHolder.style.display = 'block';
    this.mDragPlaceHolder.style.border = '0 solid white';
    
    this.mLoadingContainer.hide();
    this.mLoadingContainer.style.position = 'absolute';
    this.mLoadingContainer.style.left = 1 + 'px';
    this.mLoadingContainer.style.top = ( this.TAB_HEIGHT + 1 ) + 'px';
    this.mLoadingContainer.style.width = 150 + 'px';
    this.mLoadingContainer.style.height = 500 + 'px';
    this.mLoadingContainer.style.zIndex = 99999;
    jshSetOpacity( this.mLoadingContainer, .75 );
    
    this.reposition();
    this.moveTo( this.MARGIN, ( this.TAB_HEIGHT - this.mPanel.getHeight() ) );
    var screenSize = jshGetWindowSize();
    this.mContainer.style.top = (screenSize[1])+ 'px';
    this.mPanel.style.bottom = '0px';
    floatingContainer = new fixedDiv('imagesPanel');
    this.close();
    floatingContainer.init();
    YAHOO.util.Event.addListener( window, 'scroll', floatingContainer.init);    
    
    
  };
  
  this.render = function( element )
  {
    if( element )
    {
      this.mContainer = element;
      this.init();
    }
  }; 

  
  this.moveTo = function( x, y )
  {
    
    if( ( x != NaN ) && ( y != NaN ) )
    { 
      //var offset = Position.cumulativeOffset( this.mContainer );
      //var minBottom = offset[1] + this.mContainer.getHeight() - this.mPanel.getHeight();
      //x = Math.max( x, 0 );
      //y = Math.max( y, minBottom );
      
      
      this.mPanel.style.right = x + 'px';
      this.mPanel.style.bottom = ( y )+ 'px';
    }    
  };
  
  this.reposition = function()
  {
    var screenSize = jshGetWindowSize();
    this.mDimensions = [( screenSize[0] - 20 ), 185]; // 307 or 185
    this.resize( this.mDimensions[0], this.mDimensions[1] );
  };
  
  this.resize = function( width, height )
  {
    if( width && height )
    {
      // resize panel
      this.mPanel.style.width = width + 'px';
      this.mPanel.style.height = height + 'px';
      
      // update the tab's size
      this.mTab.style.width = ( width ) + 'px';
      this.mTab.style.height = ( this.TAB_HEIGHT ) + 'px';
      
      // update the content size
      var border = jshBorderOffset( this.mContent, [0,0] );
      this.mContent.style.width = ( width - border[0] ) + 'px';
      this.mContent.style.height = ( height - this.TAB_HEIGHT - border[1] ) + 'px';
      
      // set the images container
      //this.mImagesContainer.style.position = 'absolute';
      this.mImagesContainer.style.top = '14px';
      this.mImagesContainer.style.width = ( width - border[0] ) + 'px';
      this.mImagesContainer.style.height = ( this.mContent.getHeight() - border[1] - this.mOperationsContainer.getHeight() ) + 'px';
      
    }
  };
  
  /**
   * Opens the panel so that its content is fully visible on screen.
   */
  this.open = function()
  {
    var position = [ this.MARGIN, this.MAX_OPEN_DISTANCE ];
    this.mIsClosed = false;
    jshSetOpacity( this.mTab, 1 );
    if( this.mAnimate == true )
    {
      ElementEffects.animateElementPosition( this.mPanel, position, 55, .40  );
    }
    else
    {
      //this.moveTo( position[0], position[1] );
      this.moveTo( position[0], 0);
    }
  };
  
  /**
   * Closes the panel so that it takes up little room
   */
  this.close = function()
  {
    var position = [ this.MARGIN, ( this.TAB_HEIGHT - this.mPanel.getHeight() ) ];
    this.mIsClosed = true;
    
    if( this.mAnimate == true )
    {
      var ip = this;
      var postFunction = function(){ jshSetOpacity( ip.mTab, .60 ); }; //ip.mContent.hide();
      ElementEffects.animateElementPosition( this.mPanel, position, 55, .45, postFunction );
    }
    else
    {
      this.moveTo( position[0], position[1] );
      jshSetOpacity( this.mTab, .60 );
    }
  };
  
  /**
   * Toggles between open and close
   */
  this.toggle = function()
  {
    if( this.mIsClosed == true )
    {
      this.open();
    }
    else
    {
      this.close();
    }
  };
  
  /**
   * Hides the panel so that it can not be seen
   */
  this.hide = function()
  {
    this.mPanel.hide();
  };
  
  /**
   * Shows the panel so that it can seen
   */
  this.show = function()
  {
    this.mPanel.show();
  };
  

  
  this.setAnimate = function( animate )
  {
    this.mAnimate = animate;
  };
  
  this.setManager = function( manager )
  {
    this.mManager = manager;
  };
  
  this.setRequestMediaGroupImagesFunction = function( requestMediaGroupFunction )
  {
    this.mFunctionRequestMediaGroupImages = requestMediaGroupFunction;
  };
  

  
  this.requestImages = function( mgid, query )
  {
    if( mgid && ( mgid != NaN ) && ( mgid >= 0 ) )
    {
      this.startLoadingState();
      this.mFunctionRequestMediaGroupImages( mgid );
      

    }
    else if( query )
    {
      this.startLoadingState();
      this.mFunctionRequestSearchImages( query );
      //jshSetOptionSelected( this.mGroupsList, -1 );
    }
  };
  

  
  this.setMediaInfos = function( mediaInfos )
  {
    this.mMediaInfos = mediaInfos;
    
    // end the loading
    this.endLoadingState();
    
    this.updateImages();
  };
  
  this.updateImages = function()
  {
    // clear images we have
    this.mImagesContainer.update( '' );
    
    if( this.mMediaInfos )
    {      
      var mediaInfo;
      var container;
      
      for( var i = 0; i < this.mMediaInfos.length; i++ )
      {
        mediaInfo = this.mMediaInfos[ i ];
        if( mediaInfo )
        {
          // create a new image with values from the info         
          
          container = document.createElement( 'div' );
          container = $(container);
          container.addClassName( this.MEDIA_ITEM_CLASSNAME );  
	  
          //container.style.backgroundImage = 'url(' + img[i].src + ')';
          container.style.backgroundRepeat = 'no-repeat';
          container.style.cssFloat = 'left';
          container.style.styleFloat = 'left';
          
          
          container.title = mediaInfo.displayName;
          container.imagesPanel = this;
          container.mediaInfo = mediaInfo;
          
          // add it to the panel
          this.mImagesContainer.appendChild( container );
          
          //Load the media image 
          this.preloadImage(mediaInfo.urlSize0, container, mediaInfo.mediaType);
          
          
          container.style.cursor = 'move';
        }
      }
      
    }    
  };

  //Load the media image. If the image is not available add the default error image based on the media type
  this.preloadImage = function( url, container, mediaType )
  {
     var preloadImage = $(new Image());
     var mediaPanel = this;      
  
     // when the image loads populate the one the visitor sees
     preloadImage.onerror = function()
     { 
        if( mediaType &&
          mediaPanel.mErrorImageUrl[ mediaType ] )
        {
          this.src = mediaPanel.mErrorImageUrl[ mediaType ];
        }
     }
  
     preloadImage.onload = function()
     {
        this.onload = null;  	  
        container.style.backgroundImage = 'url(' + this.src + ')';
     };
     preloadImage.src = url;     
       
  };
  
  this.startLoadingState = function()
  {
    if( this.mLoading != true )
    {
      this.mLoading = true;
      this.mLoadingStartTime = new Date();
      this.mLoadingContainer.style.width = ( this.mContent.getWidth() - 2 ) + 'px';
      this.mLoadingContainer.style.height = ( this.mContent.getHeight() - 2 ) + 'px';
      this.mLoadingContainer.show();    
      
      // make sure loading state ends
      var sp = this;
      setTimeout( function(){ sp.endLoadingState( true ) }, this.MAX_LOADING_TIME ); 
    } 
  };
  
  /**
   * Ends the loading state
   */
  this.endLoadingState = function( forceClose )
  {
    // close if enough time has elapsed or if we are told to
    if( ( forceClose == true ) || 
        ( ( this.mLoadingStartTime - new Date() ) > this.MIN_LOADING_TIME ) )
    {
      // stop the loading process
      if( this.mLoading != null )
      {
        this.mLoading = null;
        this.mLoadingStartTime = null;
        this.mLoadingContainer.hide();
      }
    }
    else
    {
      // make sure we dont just flash, give us a few before remving our selves
      var timeout = this.MIN_LOADING_TIME - ( this.mLoadingStartTime - new Date() );
      timeout = Math.min( timeout, this.MIN_LOADING_TIME );    
      
      // call our selves in a bit
      var sp = this;
      setTimeout( function(){ sp.endLoadingState( true ) }, timeout ); 
    }
  }; 

  
}