Studio.Moveable = 
{
    sCurrentMoveableImg : "",
    iCurrentLayerId     : 0,
    
    bMove               : false,
    
    iInitialX           : 0,
    iInitialY           : 0,
    
    aConnection : new Array(),
    
    setMovable : function(sImgId)
    {
        this.resetMovable();
        Studio.Resizable.resetResizable();
        
        if (null == this.aConnection[0])
        {
            this.sCurrentMoveableImg = sImgId;
            this.iCurrentLayerId = Studio.LayerHandler.Select.getSelected();
            dojo.style(dojo.byId('canvasDragArea'), 'display', 'block');
            dojo.style(dojo.byId('canvasDragArea'), 'cursor', 'move');
            this.aConnection[0] = dojo.connect(dojo.byId('canvasDragArea'), 'onmousedown', this, 'startMoving');
            this.aConnection[1] = dojo.connect(dojo.byId('canvasDragArea'), 'onmousemove', this, 'processMove');
            this.aConnection[2] = dojo.connect(dojo.byId('canvasDragArea'), 'onmouseup',   this, 'stopMoving');
        }
    },
    
    startMoving : function(evt)
    {
        this.bMove = true;
        
        var pos = dojo.coords(this.sCurrentMoveableImg);
        this.iInitialX = evt.pageX - pos.x;
        this.iInitialY = evt.pageY - pos.y;
    },
    
    processMove : function(evt)
    {
        if (this.bMove)
        {
            var pos = dojo.coords(dojo.byId('canvasDragArea'));
            iX = evt.pageX - pos.x - this.iInitialX;
            iY = evt.pageY - pos.y - this.iInitialY;
            document.getElementById(this.sCurrentMoveableImg).style.left = iX + 'px';
            document.getElementById(this.sCurrentMoveableImg).style.top  = iY + 'px';
        }
    },
    
    stopMoving : function()
    {
        // updating layer position
        var aPos = new Array();
        aPos['x'] = parseInt(document.getElementById(this.sCurrentMoveableImg).style.left) / Studio.Zoom.iZoom;
        aPos['y'] = parseInt(document.getElementById(this.sCurrentMoveableImg).style.top) / Studio.Zoom.iZoom;
        
        if ('text' != Studio.LayerHandler.aLayers[this.iCurrentLayerId].oObject.sType)
        {
        	aPos['x'] += Studio.Zoom.iStartX;
        	aPos['y'] += Studio.Zoom.iStartY;
        }
        
        dojo.forEach(this.aConnection, 
                function(oConn, idx)
                {
                    dojo.disconnect(oConn);
                    Studio.Moveable.aConnection[idx] = null;
                });
        this.bMove = false;
        this.sCurrentMoveableImg = "";
        
        Studio.LayerHandler.repositionLayer(this.iCurrentLayerId, aPos);
        
        this.resetMovable();
    },
    
    resetMovable : function()
    {
        // removing event handlers
        dojo.forEach(this.aConnection, 
                function(oConn, idx)
                {
                    dojo.disconnect(oConn);
                    Studio.Moveable.aConnection[idx] = null;
                });
        dojo.style(dojo.byId('canvasDragArea'), 'cursor', 'default');
        dojo.style(dojo.byId('canvasDragArea'), 'display', 'none');
        
        this.bMove = false;
        this.sCurrentMoveableImg = "";
        Studio.Toolbar.resetButtons();
    },
    
    turnOnMovable : function()
    {
        
    },
    
    turnOffMoveable : function()
    {
        
    }
};