var ColorPicker = "";
$addHandler(window, 'load', function(){
    ColorPicker = $create(CodeSample.ColorPicker, 
                        {"popupBehaviorID":"colorPickerBehavior",
                        "parentIconAreaID":"ctl00_ContentPlaceHolder1_pnlColorIconArea",
                        "selectedAreaID":"ctl00_ContentPlaceHolder1_pnlSelectedColorArea",
                        "paretnAreaID":"ctl00_ContentPlaceHolder1_pnlColorPicker"}, null, null, null);
});

Type.registerNamespace("CodeSample");
CodeSample.ColorPicker = function(){
    CodeSample.ColorPicker.initializeBase(this);
    this._hexlist = null;       //Webカラー用カラーパレット作成用データ
    this._colorPickerTbl = null;//カラーピッカー
    this._parentAreaElm = null; //カラーピッカーが属する親のエレメント
    this._selectAreaElm = null; //カラーピッカーを表示する為のトリガーを定義する対象（アイコン配置対象）エレメント
    this._selectedAreaElm=null; //選択された色を表示する対象エレメント
    this._onSelectHandler=null;
    this._onHoverHander =null;
    this._wFontElm = null;
    this._bFontElm = null;
    this._selectedColor="";
    this._popupBehavior=null;
    
    //property
    this.paretnAreaID="";       //カラーピッカーが属する親のエレメントID
    this.selectedAreaID="";     //選択結果の色を表示するエリアのID
    this.popupBehaviorID="";    //PopupBehaviorID
    this.parentIconAreaID="";   //ColorPicerアイコン表示エリアのID
}

CodeSample.ColorPicker.prototype ={
    initialize:function() {
        CodeSample.ColorPicker.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 = $find(this.popupBehaviorID);
    },
    _onSelect : function(e){
        this._selectedColor = e.target.id;
        if(null!=this._selectedAreaElm){
            this._selectedAreaElm.style.backgroundColor=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;
        }
    },
    _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);
                        $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);
            } 
        }
    },
    _createPickerIcon :function(){
        if(this.parentIconAreaID!=""){
            
            var elm = document.createElement("img");
            elm.setAttribute("src","../../../img/color_swatch.png");
            elm.setAttribute("height","24");
            elm.setAttribute("width","24");
            elm.setAttribute("border","0");
            elm.setAttribute("title","色の選択");
            elm.className="colorPickerIcon";
            
            this._pickerIconElm = elm;
            
            var parentIconAreaElm = $get(this.parentIconAreaID);
            parentIconAreaElm.appendChild(this._pickerIconElm);
            parentIconAreaElm.style.width=24;
            //↑アイコンを配置した親エリアのサイズをアイコン画像と同じサイズに設定
        }
    },
    dispose: function() {
        CodeSample.ColorPicker.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],"mousemove",this._onHoverHander);
            }
        }
    }
}


CodeSample.ColorPicker.registerClass('CodeSample.ColorPicker', Sys.Component);

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