Type.registerNamespace("MobileSystem.UI");
MobileSystem.UI.DemoColorPicker = function(){
    MobileSystem.UI.DemoColorPicker.initializeBase(this);
    this._hexlist = null;               //Webカラー用カラーパレット作成用データ
    this._colorPickerTbl = null;        //カラーピッカーTable
    this._parentAreaElm = null;         //カラーピッカーが属する親のエレメント
    this._selectAreaElm = null;         //カラーピッカーを表示する為のトリガーを定義する対象（アイコン配置対象）エレメント
    this._selectedAreaElm=null;         //選択された色を表示する対象エレメント
    this._onSelectHandler=null;         //色が選択された際に実行されるハンドラー
    this._onHoverHander =null;          //色テーブルの各要素をHover時に実行されるハンドラー
    this._wFontElm = null;
    this._bFontElm = null;
    this._selectedColor="";
    this._popupBehavior=null;
    this._callBackFunc=null;            //Color選択時のコールバック関数
    this._pickerIconElm=null;
    //this._onSelectIconHandler =null;
    //property
    this.paretnAreaID="";               //カラーピッカーが属する親のエレメントID
    this.selectedAreaID="";             //選択結果の色を表示するエリアのID
    this.popupBehaviorID="";            //PopupBehaviorID
    this.pickerType="";
    this.parentIconAreaID="";
};

MobileSystem.UI.DemoColorPicker.prototype ={
    initialize:function() {
        MobileSystem.UI.DemoColorPicker.callBaseMethod(this,'initialize');
        this._selectedColor="#000000";//default black
        this._hexlist = new Array("FF","CC","99","66","33","00");
        if(this.paretnAreaID!=""){
            this._parentAreaElm = $get(this.paretnAreaID);
        }
        if(this.selectedAreaID!=""){
            this._selectedAreaElm = $get(this.selectedAreaID);
        }
        //ハンドラーとイベントを定義
        this._onSelectHandler=Function.createDelegate(this, this._onSelect);
        this._onHoverHander =Function.createDelegate(this, this._onHover);
        
        //カラーピッカーを作成
        this._createColorPicker();
        //親領域にアイコンを作成
        this._createPickerIcon(this.pickerType);
                                                                                                 
        //this._popupBehavior = $create(AjaxControlToolkit.PopupControlBehavior,{"PopupControlID":"ctl00_ContentPlaceHolder1_Panel1","Position":3,"id":"ctl00_ContentPlaceHolder1_PopupControlExtender2"}, null, null, $get("ctl00_ContentPlaceHolder1_TextBox1"));
        this._popupBehavior = $find(this.popupBehaviorID);
    },
    /*********カラー選択時処理************/
    _onSelect : function(e){
        this._selectedColor = e.target.id;
        if(null!=this._selectedAreaElm){
            this._selectedAreaElm.style.backgroundColor=this._selectedColor;
        }
        
        if(null!=this._callBackFunc){
            this._callBackFunc(this._selectedColor);
        }
        this._getPopup().hidePopup();
    },
    getSelectedColor :function(){
        return this._selectedColor;
    },
    setSelectedColor :function(color){
        this._selectedColor = color;
        if(null!=this._selectedAreaElm){
            this._selectedAreaElm.style.backgroundColor=this._selectedColor;
        }
        if(null!=this._callBackFunc){
            this._callBackFunc(this._selectedColor);
        }
    },
    _getPopup : function(){
        if(null==this._popupBehavior){
            this._popupBehavior = $find(this.popupBehaviorID);
        }
        return this._popupBehavior;
    },
    /**********マウスオーバー時処理****************
    ・選択色エリアの背景色を設定
    ・選択色エリアに色情報（16進数色文字）を設定
    */
    _onHover : function(e){
        var selectID = e.target.id;
        if(null!=this._selectAreaElm){
            this._selectAreaElm.style.backgroundColor=selectID;
            
            if(null==this._wFontElm){
                this._wFontElm = document.createElement("font");
                this._wFontElm.setAttribute("color","#ffffff");
                this._wFontElm.appendChild(document.createTextNode(selectID));
                this._selectAreaElm.appendChild(this._wFontElm);
            }else{
                this._wFontElm.childNodes[0].data = selectID;
            }
            if(null==this._bFontElm){
                this._bFontElm = document.createElement("font");
                this._bFontElm.setAttribute("color","#000000");
                this._bFontElm.appendChild(document.createTextNode("  "+selectID));
                this._selectAreaElm.appendChild(this._bFontElm);
            }else{
                this._bFontElm.childNodes[0].data = "  "+selectID;
            }
        }
    },
    _createColorPicker :function(){
        if(null==this._colorPicker){
            //選択色表示エリアを作成
            this._selectAreaElm = document.createElement("div");
            this._selectAreaElm.className = "colorPickerSelectArea";
        
            //カラーピッカーを作成
            var tmplist = new Array();
            this._colorPickerTbl = document.createElement("table");
            this._colorPickerTbl.className="colorPickerTbl";
            var tblBody = document.createElement("tbody");

            for(var i=0;i<6;i++){
                var trelm1 = document.createElement("tr");
                var trelm2 = document.createElement("tr");
                for(var j=0;j<6;j++){
                    for(var k=0;k<6;k++){
                        var hexColor = "#"+this._hexlist[i]+this._hexlist[j]+this._hexlist[k];
                        var tdelm = document.createElement("td");
                        tdelm.setAttribute("width","10px");
                        tdelm.setAttribute("height","10px");
                        
                        tdelm.style.backgroundColor=hexColor;
                        tdelm.id=hexColor;
                        $addHandler(tdelm, "click", this._onSelectHandler);
                        //clickだとEditorからフォーカスが外れてからイベントが発生するので、色が変えられないのでmousedownに変更
                        //$addHandler(tdelm, "mousedown", this._onSelectHandler);
                        $addHandler(tdelm, "mousemove", this._onHoverHander);
                        if(k<3){
                            trelm1.appendChild(tdelm);
                        }else{
                            trelm2.appendChild(tdelm);
                        }
                    }
                }
                tblBody.appendChild(trelm1);
                tmplist.push(trelm2);
            }
            for(i=0;i<tmplist.length;i++){
                tblBody.appendChild(tmplist[i]);
            }
            this._colorPickerTbl.appendChild(tblBody);
            if(null!=this._parentAreaElm){
                this._parentAreaElm.appendChild(this._selectAreaElm);
                this._parentAreaElm.appendChild(this._colorPickerTbl);
            } 
        }
           
    },
    setCallBackFunc :function(func){
        this._callBackFunc = func;
    },
    /***********カラーピッカーの親領域にアイコンを設定する処理*************
    type:   0　 線色用
            1   フォント色用
            2   背景色用
            3   QRコード用
            ※アイコンのタイトルを変更します。
    */
    _createPickerIcon :function(type){
        if(this.parentIconAreaID!=""){
            
            var elm = document.createElement("img");
            //elm.setAttribute("id",id);
            //elm.setAttribute("src","./img/color_swatch.png");
            elm.setAttribute("src","./img/icon/color_swatch.gif");
            elm.setAttribute("height","24");
            elm.setAttribute("width","24");
            elm.setAttribute("border","0");
            elm.setAttribute("align","texttop");
            var title="";
            if(type==0){
                title = "線の色を設定";
            }else if(type==1){
                title = "文字の色を設定";
            }else if(type==2){
                title = "背景色を設定";
            }else if(type==3){
                title = "QRコード色を設定";
            }
            elm.setAttribute("title",title);
            elm.className="colorPickerIcon";
            
            this._pickerIconElm = elm;
            
            var parentIconAreaElm = $get(this.parentIconAreaID);
            parentIconAreaElm.appendChild(this._pickerIconElm);
            parentIconAreaElm.style.width=24;//Popup時のクリック範囲をアイコンと同じエリアにする為、親領域のサイズを設定
            
        }
    },
    dispose: function() {
        MobileSystem.UI.DemoColorPicker.callBaseMethod(this, 'dispose');
        if(null!=this._colorPickerTbl){
            var tdlist = this._colorPickerTbl.getElementsByTagName("td");
            for(var i=0;i<tdlist.length;i++){
                //イベントの削除
                $removeHandler(tdlist[i],"click",this._onSelectHandler);
                //$removeHandler(tdlist[i],"mousedown",this._onSelectHandler);
                $removeHandler(tdlist[i],"mousemove",this._onHoverHander);
            }
        }
    }
};


MobileSystem.UI.DemoColorPicker.registerClass('MobileSystem.UI.DemoColorPicker', Sys.Component);

if (typeof(Sys) !== 'undefined')
   Sys.Application.notifyScriptLoaded();