////////////////////////////////////////////////////////////////////////////////////////////////////
// PictureState
////////////////////////////////////////////////////////////////////////////////////////////////////
var PictureState =
{
    Out: 'out',
    MoveIn: 'movein',
    In: 'in',
    MoveOut: 'moveout'
};


////////////////////////////////////////////////////////////////////////////////////////////////////
// PictureCloseUp contructor
////////////////////////////////////////////////////////////////////////////////////////////////////
function PictureCloseUp(iId, iTargetWidth, iTargetHeight)
{
    var self = this;
    
    self._super = Widget;
    self._super(iId);

    self.button = new Widget(iId + '_button');
    self.control = new Widget(iId + '_control');
    self.controlClass = null;

    self.animation = null;
    self.initialWidth = 0;
    self.initialHeight = 0;
    self.targetWidth = iTargetWidth;
    self.targetHeight = iTargetHeight;
    self.state = PictureState.Out;


    self.init = function()
        {
            self.initialWidth = self.getElement().width;
            self.initialHeight = self.getElement().height;
            self.getElement().onclick = self.onClick;
            self.button.getElement().onclick = self.onClick;
            
            self.animation = new Animation(AnimationTrends.Smooth, 500, 30);
            self.animation.onUpdate.add(self.onZoomUpdate);  
            self.animation.onComplete.add(self.onZoomComplete);               
            
            self.controlClass = self.control.getElement().className;
        }

    self.onClick = function()
        {
            if (self.state == PictureState.Out)
                self.zoomIn();
            else if (self.state == PictureState.In)
                self.zoomOut();            
        }

    self.zoomIn = function()
        {
            self.state = PictureState.MoveIn;
            self.animation.start();        
        }
        
    self.zoomOut = function()
        {
            self.state = PictureState.MoveOut;
            self.animation.start();
        }

    self.onZoomUpdate = function(iProgress)
        {
            if (self.state == PictureState.MoveIn)
            {
                self.getElement().width = self.initialWidth + (iProgress * (self.targetWidth - self.initialWidth));
                self.getElement().height = self.initialHeight + (iProgress * (self.targetHeight - self.initialHeight));
            }
            else if (self.state == PictureState.MoveOut)
            {
                self.getElement().width = self.targetWidth - (iProgress * (self.targetWidth - self.initialWidth));
                self.getElement().height = self.targetHeight - (iProgress * (self.targetHeight - self.initialHeight));
            }
        }

    self.onZoomComplete = function()
        {
            if (self.state == PictureState.MoveIn)
            {
                self.state = PictureState.In;
                self.control.getElement().className = self.controlClass + '-on';                
            }
            else if (self.state == PictureState.MoveOut)
            {
                self.state = PictureState.Out;
                self.control.getElement().className = self.controlClass;
            }
        }

 
    self.init();

}