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

/**
  Key Control Class
  <ul>
  <li>controls<ul>
  <li>click: take focus</li>
  <li>right: right</li>
  <li>left: left</li>
  <li>up: up</li>
  <li>down: down</li>
  <li>space, PgUp: zoom</li>
  <li>BS, PgDown: unzoom</li>
  </ul></li>
  <li>Example (Click the iamge before press key.)
  <div id="keyControl-ex1" style="height:255px;width:400px;"></div>
  <script><!--
  var keyControl=new TiledImage("keyControl-ex1");
  keyControl.addLayer(new TilesLayer("chicago","../../chicago_skyview/z${z}/${x}_${y}.jpg",1920,1218).setTileSize(240,256));
  keyControl.addControl(new KeyControl());
  //--></script></li>
  </ul>
  @class KeyControl
  @constructor
 **/
function KeyControl(){
    /**
     * self: private scope of this
     * @property self
     * @type object
     * @private
     * @default this
     */
    var self=this,
    /**
     * parent (TiledImage) pointer 
     * @property parent
     * @type Object
     * @private
     */
    parent,
    /**
     * DOMElement of hidden key input box
     * @private
     * @property input
     * @type DOMElement
     */
    input;

    /**
     * This is event function for "keydown".
     * @private
     * @method keypressed
     * @param {Object} e event object
     */
    var keypressed=function(e){
	var charCode = (e.which) ? e.which : event.keyCode;
	if(charCode==37){ //left
	    parent.move(-32,0);
	} else if(charCode==38){//up
	    parent.move(0,-32);
	} else if(charCode==39){//right
	    parent.move(32,0);
	} else if(charCode==40){//down
	    parent.move(0,32);
	} else if(charCode==33 || charCode==32){// page up, space
	    parent.setZoom(parent.getZoom()+1);
	} else if(charCode==34 || charCode==8){// page down, BS
	    parent.setZoom(parent.getZoom()-1);
	}
    };

    d.mod(this,{
	setParent:function(p){
	    parent=p;
	    input=d.app(parent.target,'input',{name:'dummy',style:{position:'absolute',top:'-10px',left:'-10px',width:'1px',height:'1px'}});
	    /**
	     * Event list
	     * @property elist
	     * @type Array
	     * @required
	     * @public
	     */
	    this.elist=[{m:'click',t:parent.target,f:function(e){input.focus();}}];
	    d.addEv({m:"keydown",t:input,f:keypressed});
	    return this.elist;
	}
    });
}