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

/**
 * Layers Control Class
 * <ul>
 *   <li>example
 *     <div id="layersControl-ex1" style="height:255px;width:400px;"></div>
 *      <script><!--
 *      var layersControl=new TiledImage("layersControl-ex1");
 *      layersControl.addLayer(new TilesLayer("chicago","../../chicago_skyview/z${z}/${x}_${y}.jpg",1920,1218).setTileSize(240,256));
 *      layersControl.addControl(new LayersControl());
 *      //--></script>
 *      </li>
 * </ul>
 * @class LayersControl
 * @constructor
 **/
function LayersControl(){
    /**
     * self: private scope of this
     * @property self
     * @type Object
     * @private
     * @default this
     */
    var self=this,
    /**
     * parent (TiledImage) pointer 
     * @property parent
     * @type Object
     * @private
     */
    parent,
    /**
     * DOM Element's parent
     * @property target
     * @type Object
     * @private
     */
    target,
    /**
     * DOM Element of the list box 
     * @property list
     * @type Object
     * @private
     */
    list;
    /**
     * listener of clicking checkbox of a layer.
     * Note that the "this" is the checkbox clicked
     * @private
     * @method onLayer
     * @param {Object} e event object?
     */
    var onLayer=function(e){
	parent.modLayer(this.value,this.checked);
    };
    /**
     * listener of "changelayer".
     * Write list of the names of Layers. Called from TiledImage object
     * @private
     * @method draw
     * @param {Array[Object]} p list of array of layers.
     */
    var draw=function(p){
	var t='',key,obj;
	for(key in p){
	    obj=p[key];
	    t+='<input type="checkbox" name="a" id="'+target.id+'-LC-'+key+'" value="'
		+obj.l.getName()+'" '+((obj.show)?'  checked="yes"':'')+'/>'+obj.l.getName()+'<br/>';
	}
	list.innerHTML=t;
	for(key in p){
	    d.get(target.id+'-LC-'+key).onclick=onLayer;
	}
    };


    /**
     * Called from TiledImage object
     * @public
     * @method setParent
     * @required
     * @param {Object} p parent (TiledImage) object.
     * @return {Array} this.elist event list
     */
    this.setParent=function (p){
	parent=p;
	target=p.target;
	list=d.app(target,'div',{className:"popup box",style:{right:'0px',top:'16px',opacity:'0.7'}});
	/**
	 * Event list
	 * @public
	 * @property elist
	 * @type Array
	 * @required
	 */
	return this.elist=[
	    {m:'changelayer',f:draw}
	];
    };
};