Wiking.widgets.LookConfig = new function(){
    function LookConfig(){
        Wiking.widgets.BlackScreen.draw();
        Wiking.getMap().addControl(this);
    } 
    LookConfig.prototype = new GControl(); 
    LookConfig.prototype.selectable = function(){return true;}
    LookConfig.prototype.printable = function(){return true;}
    LookConfig.prototype.initialize = function(map){
        var
          width=259,
          height=400,
          obj = Wiking.getObjects(),
          names = "",
          markers="",
          m = Wiking.PojazdMarkers.getList(),
          len = obj.length;
          
        for (var i=0, l = obj.length;i<l; i++)
        {
            names+='<option value="'+obj[i].getImei()+'">'+obj[i].getName()+'</option>';
        }
        for (var i=0, l = m.length; i<l; i++)
        {
            markers += '<option value="'+i+'">'+m[i]+'</option>';
        }        
        var html = '<div id="pickstylex" style="cursor:pointer;position:absolute;left:'+(width-17)+'px;top:-9px;width:27px;height:27px;background: url(\'wimg/x.png\')"></div>'+
                 '<div>'+
                 '<div style="float:left;width:8px;height:39px;background:url(\'wimg/eclefttop.png\')"></div>'+
                 '<div style="float:left;background:url(\'wimg/ectop.png\');height:39px;width:'+(width-16)+'px">'+
                    '<p style="font-size:14px;font-weight:bold;margin-top:12px;margin-left:5px;">Zmiana wyglądu obiektu</p>'+
                 '</div>'+
                 '<div style="float:left;width:8px;height:39px;background:url(\'wimg/ecrighttop.png\')"></div>'+
                 
                 '<div style="clear:left;float:left;width:8px;background:url(\'wimg/cleft.png\');height:'+(height-47)+'px"></div>'+
                 '<div style="float:left;background:#fff;height:'+(height-47)+'px;width:'+(width-16)+'px">'+
                    //TREŚĆ
                   '<div style="padding:0 10px 10px 10px">'+
                      '<p><strong>Wybrany obiekt:</strong></p>'+
                      '<select id="pickstyleobject">'+
                        names +
                      '</select>'+
                      "<p><strong>Kolor:</strong></p>"+
                      '<div id="cstylecolor" style="height:20px;padding-top:4px;font-size:11px;text-decoration:underline;color:#c22f00;cursor:pointer;"><div id="stylecolor" style="float:left;margin-top:-4px;margin-right:15px;width:20px; height:20px; border:1px solid #000;"></div>'+
                      'Zmień</div>'+
                      '<p><strong>Marker:</strong></p>'+
                      '<select id="pickstylemarker">'+
                        markers+
                      '</select>'+
                   '<p><strong>Podgląd:</strong></p>'+
                   '<div id="prestyledobject" style="background:url(\'wimg/stylebg.png\') no-repeat; width:223px;height:70px;"></div>'+
                   '<p><input type="image" src="wimg/savestyle.png" id="savestyle" /></p>'+
                   '</div>'+
                 '</div>'+
                 '<div style="float:left;width:8px;background:url(\'wimg/cright.png\');height:'+(height-47)+'px"></div>'+
               
                 '<div style="float:left;clear:left;width:8px;height:8px;background:url(\'wimg/cleftbottom.png\')"></div>'+
                 '<div style="float:left;background:url(\'wimg/cbottom.png\');height:8px;width:'+(width-16)+'px"></div>'+
                 '<div style="float:left;width:8px;height:8px;background:url(\'wimg/crightbottom.png\')"></div>'+
               '</div>';
        
        var div = document.createElement('div');
        div.innerHTML=html;
        div.style.zIndex="300";
               
        map.getContainer().appendChild(div);
        
        GEvent.bindDom(document.getElementById('pickstylex'),'click',this,this.clear_);
        GEvent.bindDom(document.getElementById('savestyle'),'click',this,this.saveStyle);
        this.div_ = div;
        return div;
    };
    LookConfig.prototype.saveStyle = function(){
        var obj = Wiking.getObjectByImei(document.getElementById('pickstyleobject').value);
        var color = Wiking.widgets.LookConfig.rgbcolor;
           
        var marker = document.getElementById('pickstylemarker').value;
        obj.setColor(color);
        obj.setMarker(marker);
        //temp: TODO pozbyć się tego, i zrobić to w bardziej elegancki sposób
        Wiking.tools.ObjDivManager.init();
        //inicjujemy kontrolery checkboxów przy obiektach z template
        Wiking.tools.allController.init();
        Wiking.tools.grayizer();
            
        new Ajax.Request("/thingy/setstyle?imei="+obj.getImei()+"&m="+marker+"&c="+color.replace(' ','','g'));   
        this.clear_();
    };
    LookConfig.prototype.clear_ = function(){
        Wiking.widgets.BlackScreen.clear();
        Wiking.getMap().removeControl(this);
    }
    LookConfig.prototype.enable_ = function(){
        this.div_.style.zIndex="300";
    }
    LookConfig.prototype.disable_ = function(){
        this.div_.style.zIndex="60";
    }
    LookConfig.prototype.getDefaultPosition = function(){
        var size = Wiking.getMap().getSize();
        return new GControlPosition(G_ANCHOR_TOP_LEFT,new GSize(size.width/2-199,size.height/2-199));
    };
    
    function Palette(parent){
        this.parent_ = parent;
        parent.disable_();
        Wiking.getMap().addControl(this);
    } 
    Palette.prototype = new GControl(); 
    Palette.prototype.selectable = function(){return true;}
    Palette.prototype.printable = function(){return true;}
    Palette.prototype.initialize = function(map){   
        var width = 128;
        var height = 120;    
        var colors = '<div class="colorbox"><div id="rgb(255,0,0)" style="background:rgb(255,0,0);"></div></div>'+ //ok
                '<div class="colorbox"><div id="rgb(255,122,0)" style="background:rgb(255,122,0);"></div></div>'+
                '<div class="colorbox"><div id="rgb(125,0,172)" style="background:rgb(125,0,172);"></div></div>'+ //ok
                '<div class="colorbox" style="clear:both;"><div  id="rgb(120,33,10)" style="background:rgb(120,33,10);"></div></div>'+
                '<div class="colorbox"><div id="rgb(10,10,10)" style="background:rgb(10,10,10);"></div></div>'+ //ok
                '<div class="colorbox"><div id="rgb(20,0,106)" style="background:rgb(20,0,106);"></div></div>'+ //ok              
                '<div class="colorbox" style="clear:both;"><div  id="rgb(2,55,255)" style="background:rgb(2,55,255);"></div></div>'+
                '<div class="colorbox"><div id="rgb(2,55,0)" style="background:rgb(2,55,0);"></div></div>'+
                '<div class="colorbox"><div id="rgb(205,122,22)" style="background:rgb(205,122,22);"></div></div>'  
        var html = '<div id="closePalette" style="cursor:pointer;position:absolute;left:'+(width-17)+'px;top:-9px;width:27px;height:27px;background: url(\'wimg/x.png\')"></div>'+
               '<div>'+
                 '<div style="float:left;width:8px;height:8px;background:url(\'wimg/clefttop.png\')"></div>'+
                 '<div style="float:left;background:url(\'wimg/ctop.png\');height:8px;width:'+(width-16)+'px"></div>'+
                 '<div style="float:left;width:8px;height:8px;background:url(\'wimg/crighttop.png\')"></div>'+
                 
                 '<div style="clear:left;float:left;width:8px;background:url(\'wimg/cleft.png\');height:'+(height-16)+'px"></div>'+
                 '<div style="float:left;background:#fff;height:'+(height-16)+'px;width:'+(width-16)+'px">'+
                    //TREŚĆ
                    colors+
                 '</div>'+
                 '<div style="float:left;width:8px;background:url(\'wimg/cright.png\');height:'+(height-16)+'px"></div>'+
               
                 '<div style="float:left;clear:left;width:8px;height:8px;background:url(\'wimg/cleftbottom.png\')"></div>'+
                 '<div style="float:left;background:url(\'wimg/cbottom.png\');height:8px;width:'+(width-16)+'px"></div>'+
                 '<div style="float:left;width:8px;height:8px;background:url(\'wimg/crightbottom.png\')"></div>'+
               '</div>';
        var div = document.createElement('div');
        div.innerHTML=html;
        div.style.zIndex="400";
        
        map.getContainer().appendChild(div);         
    
        GEvent.bindDom(document.getElementById('closePalette'),'click',this,this.clear_);
        
        var boxes = $$('.colorbox'); //Prototype
        var b;
        for (var i=0, l=boxes.length;i<l;i++){
            b = boxes[i];
            GEvent.addDomListener(b,'mouseover',GEvent.callbackArgs(this,function(el){
                el.style.background=el.childNodes[0].style.background;
            },b));
            GEvent.addDomListener(boxes[i],'mouseout',GEvent.callbackArgs(this,function(el){
                el.style.background="#FFF";
            },b));
            var self = this;
            GEvent.addDomListener(boxes[i],'click',GEvent.callbackArgs(this,function(color){
                document.getElementById('stylecolor').style.background = color;
                Wiking.widgets.LookConfig.rgbcolor=color;
                Wiking.widgets.LookConfig.setColor(color);
                self.clear_();
            },b.childNodes[0].id));
           // boxes[i].observe('click',this.click.bind({self:this,color:boxes[i].childNodes[0].id}));
        }

        return div;
    }
    Palette.prototype.clear_ = function(){
        this.parent_.enable_();
        Wiking.getMap().removeControl(this);
    }
    Palette.prototype.getDefaultPosition = function(){
        var size = Wiking.getMap().getSize();
        return new GControlPosition(G_ANCHOR_TOP_LEFT,new GSize(size.width/2-339,size.height/2-90));
    };
    
    var path;
    this.setColor = function(color)
    {
        color = color.replace(" ","","g");
        var
          inc = function(c){
              c = parseInt(c) - 180;
              return c<0 ? "0" : String(c);
          },
          g = color.split(/[\(\,\)]/),
          grad = "rgb("+inc(g[1])+","+inc(g[2])+","+inc(g[3])+")";
        path.setFill('linear',{
            color:color,
            direction:"V",
            arr:[
              [color,0],
              [grad,100]
            ]
        });
    };
    this.runConfig = function(obj){
        var parent = new LookConfig();
        
        changelock = true;
        var pso = document.getElementById('pickstyleobject')
        pso.value=obj.getImei();
        GEvent.addDomListener(pso,'change',changeObject);
        GEvent.addDomListener(document.getElementById('cstylecolor'),'click',function(){
            new Palette(parent);
        });
         
        var surface = new RysownikSurface(223,70);
            surface.attach(document.getElementById('prestyledobject'));
            surface.getNode().style.margin="20px 0 0 110px";
            
        path = new RysownikPath(surface);
        GEvent.addDomListener(document.getElementById('pickstylemarker'),'change',function(){
            pickMarker(path)
        });
        setupConfig(obj);
    }
    var setupConfig = function(object)
    {
        document.getElementById('pickstylemarker').value=object.getMarkerId();
        document.getElementById('stylecolor').style.background=object.getColor();
        Wiking.widgets.LookConfig.rgbcolor=object.getColor();
        Wiking.widgets.LookConfig.setColor(object.getColor());
        pickMarker(path); 
    }
    var changeObject = function()
    {
        var imei = document.getElementById('pickstyleobject').value;
        setupConfig(Wiking.getObjectByImei(imei));
    } 
    var pickMarker = function(path)
    {
        var v = document.getElementById('pickstylemarker').value;
        var cmd = Wiking.PojazdMarkers.get(v,"cmd");
        path.setD(cmd);
    }
    
};