self.csw_PreviousGrowedImageId = null;
function csw_GrowImage( imgId )
{
  if( self.csw_PreviousGrowedImageId )
  {
    csw_UnGrowImage( self.csw_PreviousGrowedImageId );
  }
  self.csw_PreviousGrowedImageId = imgId;
  if( ! $(imgId+'Big') )
  {
    var pos;
    var iterationCount;

    document.body.innerHTML += '<img class="csw_GrowableImageBig" src="'+$(imgId).src+'" id="'+imgId+'Big'+'"/>';
    //$(imgId).absolutize();
    pos = $(imgId).cumulativeOffset();
    $(imgId+'Big').absolutize();
    $(imgId+'Big').style.left = pos[0] + 'px';
    $(imgId+'Big').style.top = pos[1] + 'px';
    
    $(imgId+'Big').style.width = $(imgId).getWidth() + 'px';
    $(imgId+'Big').style.height = 'auto';
    
    $(imgId+'Big').show();

    csw_GrowNextStep( imgId, null );
  }
}

function csw_Max( a, b )
{
  var result;
  if( a < b )
  {
    result = b;
  }
  else
  {
    result = a;
  }
  return result;
}

function csw_Sign( a )
{
  var result;

  if( a < 0 )
  {
    result = -1;
  }
  else
  {
    result = 1;
  }
  
  return result;
}
function csw_GetScrollOffsetLeft()
{
  var so;
  var result;

  so = document.viewport.getScrollOffsets();

  if( so.left )
  {
    result = so.left;
  }
  else
  {
    result = so[0];
  }
  return result;
}
function csw_GetScrollOffsetTop()
{
  var so;
  var result;

  so = document.viewport.getScrollOffsets();
  
  if( so.top )
  {
    result = so.top;
  }
  else
  {
    result = so[1];
  }
  return result;
}
function csw_GetImageRealWidth( src )
{
  var newImg = new Image();
  newImg.src = src;
  var width = newImg.width;
  return width;
}
function csw_GetImageRealHeight( src )
{
  var newImg = new Image();
  newImg.src = src;
  var height = newImg.height;
  return height;
}
function csw_GrowNextStep( imgId, iterationCount )
{
  var targetLeft;
  var targetTop;
  var targetWidth;
  var targetHeight;
  var step;
  var minStep = 15;
  var percent = 90 / 100;
 
  if( $(imgId).getWidth() > $(imgId).getHeight() )
  {
    targetWidth = document.viewport.getDimensions().width * percent;
    targetHeight = $(imgId).getHeight() / $(imgId).getWidth() * targetWidth;
    if( targetHeight > document.viewport.getDimensions().height * percent )
    {
      targetHeight = document.viewport.getDimensions().height * percent;
      targetWidth = $(imgId).getWidth() / $(imgId).getHeight() * targetHeight;
    }
  }
  else
  {
    targetHeight = document.viewport.getDimensions().height * percent;
    targetWidth = $(imgId).getWidth() / $(imgId).getHeight() * targetHeight;
    if( targetWidth > document.viewport.getDimensions().width * percent )
    {
      targetWidth = document.viewport.getDimensions().width * percent;
      targetHeight = $(imgId).getHeight() / $(imgId).getWidth() * targetWidth;
    }
  }
  
  if( targetWidth > csw_GetImageRealWidth( $(imgId).src ) )
  {
    targetWidth = csw_GetImageRealWidth( $(imgId).src );
    targetHeight = $(imgId).getHeight() / $(imgId).getWidth() * targetWidth;
  }
  if( targetHeight > csw_GetImageRealHeight( $(imgId).src ) )
  {
    targetHeight = csw_GetImageRealHeight( $(imgId).src );
    targetWidth = $(imgId).getWidth() / $(imgId).getHeight() * targetHeight;
  }
  //targetLeft =  ( document.body.getWidth() - targetWidth ) / 2 + csw_GetScrollOffsetLeft();
  targetLeft =  ( document.viewport.getWidth() - targetWidth ) / 2 + csw_GetScrollOffsetLeft();
  targetTop = ( document.viewport.getDimensions().height - targetHeight ) / 2 + csw_GetScrollOffsetTop() ;
  
  if( ( targetWidth - $( imgId+'Big' ).getWidth() ) / targetWidth > 0.10 )
  {
    var l,t,w,h,pos;
  
    if( ! iterationCount )
    {
      iterationCount = 10;
    }
    pos = $( imgId+'Big' ).cumulativeOffset();
    l = pos[0];
    t = pos[1];
    w = $( imgId+'Big' ).getWidth();
    
    
    step = ( targetLeft - l ) / iterationCount
    //step = csw_Sign( step ) * csw_Max( minStep, Math.abs( step ) );
    l += step;

    step = ( targetTop - t ) / iterationCount;
    //step = csw_Sign( step ) * csw_Max( minStep, Math.abs( step ) );
    t += step;

    step = ( targetWidth - w ) / iterationCount;
    step = csw_Sign( step ) * csw_Max( minStep, Math.abs( step ) );
    w += step; 
        
    $( imgId+'Big' ).style.left = l + 'px';
    $( imgId+'Big' ).style.top = t + 'px';
    $( imgId+'Big' ).style.width = w + 'px';
    $( imgId+'Big' ).style.height = 'auto';
    
    self.setTimeout( 'csw_GrowNextStep( \''+imgId+'\','+iterationCount+' )', 1 );
    /**/
  }
  else
  {
    /*$( imgId+'Big' ).style.left = targetLeft + 'px';
    $( imgId+'Big' ).style.top = targetTop + 'px';
    $( imgId+'Big' ).style.width = w + 'px';
    $( imgId+'Big' ).style.height = 'auto';*/
    $(imgId+'Big').onclick = new Function( 'csw_UnGrowImage( \''+imgId+'\' );' );
    /*function()
    {
      csw_UnGrowImage( imgId );
    }*/
  }
}

function csw_UnGrowImage( imgId )
{
  self.csw_PreviousGrowedImageId = null;
  csw_UnGrowNextStep( imgId );
}

function csw_UnGrowNextStep( imgId )
{
  var iterationCount = 5;
  var targetLeft;
  var targetTop;
  var targetWidth;
  var targetHeight;
  var pos;

  pos = $(imgId).cumulativeOffset();
  targetWidth = $(imgId).getWidth();
  targetHeight = $(imgId).getHeight();
  targetLeft =  pos[0];
  targetTop = pos[1];
  
  if( ( $( imgId+'Big' ).getWidth() - targetWidth ) / targetWidth > 0.1 )
  {
    var l,t,w,h;
    
    pos = $( imgId+'Big' ).cumulativeOffset();
    l = pos[0];
    t = pos[1];
    w = $( imgId+'Big' ).getWidth();
    
    
    l += ( targetLeft - l ) / iterationCount;
    t += ( targetTop - t ) / iterationCount;
    w += ( targetWidth - w ) / iterationCount;
        
    $( imgId+'Big' ).style.left = l + 'px';
    $( imgId+'Big' ).style.top = t + 'px';
    $( imgId+'Big' ).style.width = w + 'px';
    $( imgId+'Big' ).style.height = 'auto';
    //alert( $( imgId+'Big' ).getHeight() );
    self.setTimeout( 'csw_UnGrowNextStep( \''+imgId+'\' )', 10 );
    /*$( imgId+'Big' ).style.left = targetLeft + 'px';
    $( imgId+'Big' ).style.top = targetTop + 'px';
    $( imgId+'Big' ).style.width = w + 'px';
    $( imgId+'Big' ).style.height = 'auto';*/
  }
  else
  {
    $( imgId+'Big' ).remove();
  }
}