/**
 * dynamic html for Tiled Image
 * $Id: ResizeControl.js 11 2013-04-06 21:25:54Z nazotoko $
 * Copyright 2013 Shun N. Watanabe <nazotoko (a+) users.sourceforge.net>
 * @module TiledImage
 */

/**
 * Resize Control Class
 * <ul>
 *   <li>example
 *     <div id="resizeControl-ex1" style="height:255px;width:400px;"></div>
 *      <script><!--
 *      var resizeControl=new TiledImage("resizeControl-ex1");
 *      resizeControl.addLayer(new TilesLayer("chicago","../../chicago_skyview/z${z}/${x}_${y}.jpg",1920,1218).setTileSize(240,256));
 *      resizeControl.addControl(new ResizeControl());
 *      //--></script>
 *      </li>
 * </ul>
 * @class ResizeControl
 * @constructor
 * @since 0.9.2
 **/
function ResizeControl(){
    /**
     * self: private scope of this
     * @property self
     * @type object
     * @private
     * @default this
     */
    var self=this,
    /**
     * parent (TiledImage) pointer 
     * @property parent
     * @type object
     * @private
     */
    parent,
    /**
     * startPosition: position when the drag starts.
     * @private
     * @property startPosition
     * @type Array[Number,Number]
     */
    startPosition,
    /**
     * dragFlag: true when drag started
     * @private
     * @property dragFlag
     * @type Boolean
     */
    dragFlag,
    /**
     * DOMElement of the button
     * @private
     * @property button
     * @type DOMElement
     */
    button;

    /**
     * This is event function for "mousemove".
     * @private
     * @method move
     * @param {Object} e event object
     */
    var move=function(e){
	if(!dragFlag) return true;
	if(!e) e=window.event;
	var ws=parent.getWindowSize();
	parent.resize(ws[0]-startPosition[0]+e.clientX,ws[1]-startPosition[1]+e.clientY);
	startPosition=[e.clientX,e.clientY];
	return false;
    },
    /**
     * This is event function for "mousedown", pusing a button of your mouse.
     * @private
     * @method dragStart
     * @param {Object} e event object
     */
    dragStart=function(e){
	if(!e){e=window.event;}
        dragFlag=true;
        startPosition=[e.clientX,e.clientY];
	button.style.cursor='move';
	if(e.preventDefault){e.preventDefault();e.stopPropagation();}
	return false;
    },
    /**
     * This is event function for "mouseup", releasing a button of your mouse.
     * @private
     * @method dragEnd
     * @param {Object} e event object
     */
    dragEnd=function(e){
	if(!e){e=window.event;}
	dragFlag=false;
	button.style.cursor='auto';
    };

    /**
     * Called from TiledImage object.
     * Creating properties and elist.
     * @public
     * @method setParent
     * @required
     * @return {Array} this.elist event list
     */
    this.setParent=function (p){
	parent=p;
	button=d.app(p.target,'input',{
	    className:'popup button',type:'button',
	    style:{right:'0px',bottom:'0px',width:'16px',height:'16px',backgroundPosition:"16px 16px",opacity:0.7}});
	/**
	 * Event list
	 * @property elist
	 * @type Array
	 * @required
	 * @public
	 */
	return this.elist=[
	    {m:'mouseup',t:d.d,f:dragEnd},
	    {m:'mousemove',t:d.d,f:move},
	    {m:'mousedown',t:button,f:dragStart}
	];
    };
}