mybill_v2 = {

    createFrame:function(el) {
    
        $(el).wrap("<div>").parent().css({
            width:$(el).outerWidth(),
            position:"relative"
        });
        
        $(el).css({border:"none",background:"none",position:"relative"});
        
        var img = $("<img >")
            .attr("src","/mybill/v2/img/frame1.png")
            .css({position:"absolute"});
            $(el).before(img);
        
        var img = $("<img >")
            .attr("src","/mybill/v2/img/frame2.png")
            .css({left:$(el).outerWidth()-5,position:"absolute"});
            $(el).before(img);
            
        var img = $("<img >")
            .attr("src","/mybill/v2/img/frame3.png")
            .css({left:$(el).outerWidth()-5,top:$(el).outerHeight()-5,position:"absolute"});
            $(el).before(img); 
            
        var img = $("<img >")
            .attr("src","/mybill/v2/img/frame4.png")
            .css({top:$(el).outerHeight()-5,position:"absolute"});
            $(el).before(img);
            
        var div = $("<div >")
            .css({
                left:5,
                width:$(el).outerWidth()-10,
                height:$(el).outerHeight()-2,
                position:"absolute",
                background:"white",
                borderTop:"1px solid #a5a5a5",
                borderBottom:"1px solid #a5a5a5"
            });
            $(el).before(div);

        var div = $("<div >")
            .css({
                left:0,
                top:5,
                width:$(el).outerWidth()-2,
                height:$(el).outerHeight()-10,
                position:"absolute",
                background:"white",
                borderLeft:"1px solid #a5a5a5",
                borderRight:"1px solid #a5a5a5",
                // fuck ie
                overflow:"hidden"
            });
            $(el).before(div);
        return el.parent();
    },
    
//--------------------------------------------------------------------------------------- Селекты
    
    // Заменяет селекты на 'красивые селекты'
    replaceSelect:function(el) {
    
        var w = $(el).outerWidth();
        $(el).wrap("<div/>").parent().css({
            height:24,
            width:w
        });
        $(el).hide();       
        
        
        var c = $(el).parent().addClass("mybill-v2-dropdown");
        c.css({cursor:"pointer",whiteSpace:"nowrap"});
        var s1 = $("<div />").addClass("mybill-v2-dropdownText").css({color:"black",overflow:"hidden",height:22,fontSize:13,fontWeight:"bold",lineHeight:"20px",paddingTop:2,paddingLeft:4}).appendTo(c);
        var s2 = $("<div />").css({overflow:"auto",padding:5,width:w-10}).appendTo(c);

        $(el).children("option").each(function(){
            var option = $("<div />").addClass("mybill-v2-option").html($(this).html()).appendTo(s2);
            option.data("name",this.value);
        })
        
        if(s2.height()>200) s2.height(200);        
        
        s2.mousedown(function(e){
            var option = $(e.target).parents().andSelf().filter(".mybill-v2-option");
            if(option.length)
            mybill_v2.setSelectValue(c,option.data("name"));
        });

        s2.mouseover(function(e){
            var option = $(e.target).parents().andSelf().filter(".mybill-v2-option");
            option.css({background:"#ededed"});
        });
        s2.mouseout(function(e){
            var option = $(e.target).parents().andSelf().filter(".mybill-v2-option");
            option.css({background:"white"});
        });   

        mybill_v2.createFrame(s1);
        mybill_v2.createFrame(s2);
                        
        var drop = s2.parent();
        drop.css("display","none");
        drop.addClass("mybill-v2-dropList");        
        
        mybill_v2.setSelectValue(c,$(el).attr("value"));
    },
    
    setSelectValue:function(select,value) {
        select = $(select).find("select");        
        select.attr("value",value);
        
        var text = select.children("[value="+value+"]").html();
        mybill_v2.setSelectText(select.parents(".mybill-v2-dropdown"),text);
        mybill_v2.selectExpandCollapse(select.parents(".mybill-v2-dropdown"),0);
    },
    
    setSelectText:function(select,title) {
        $(select).find(".mybill-v2-dropdownText").html(title).css({background:"url(/mybill/v2/img/dropdown.gif) right center no-repeat"});
    },
    
    selectExpandCollapse:function(el,expand) {
        setTimeout(function() {
            $(el).find(".mybill-v2-dropList").css("display",expand ? "block" : "none")
        });
    },
    
// --------------------------------------------------------------------------------Сабмиты

    replaceSubmit:function(el) {
        var w = $(el).outerWidth();
        $(el).wrap("<div/>").parent().css({
            height:24,
            width:w
        });
        
        el.css({background:"none",position:"relative"});
        
        // Элемент вокруг сабмита
        var c = $(el).parent().css({position:"relative"});
        
        // Левая часть сабмита
        $("<img>")
            .attr("src","/mybill/v2/img/submit1.png")
            .css({position:"absolute"})
            .prependTo(c);
            
        // Средняя часть сабмита
        $("<img>")
            .attr("src","/mybill/v2/img/submit2.gif")
            .css({position:"absolute",left:5,width:w-10,height:24})
            .prependTo(c);
            
        // Правая часть сабмита
        $("<img>")
            .attr("src","/mybill/v2/img/submit3.png")
            .css({position:"absolute",left:w-5})
            .prependTo(c);
    },
    
    replaceCancel:function(el) {
        var w = $(el).outerWidth();
        $(el).wrap("<div/>").parent().css({
            height:24,
            width:w
        });
        
        el.css({background:"none",position:"relative"});
        
        // Элемент вокруг сабмита
        var c = $(el).parent().css({position:"relative"});
        
        // Левая часть сабмита
        $("<img>")
            .attr("src","/mybill/v2/img/cancel1.png")
            .css({position:"absolute"})
            .prependTo(c);
            
        // Средняя часть сабмита
        $("<img>")
            .attr("src","/mybill/v2/img/cancel2.gif")
            .css({position:"absolute",left:5,width:w-10,height:24})
            .prependTo(c);
            
        // Правая часть сабмита
        $("<img>")
            .attr("src","/mybill/v2/img/cancel3.png")
            .css({position:"absolute",left:w-5})
            .prependTo(c);
    },    

// -------------------------------------------------------------------------------- Списки   

    replaceList:function(el) {
    
        if(el.height()>200)el.height(200);
    
        var w = $(el).outerWidth();
        $(el).wrap("<div/>").parent().css({
            width:w
        });
        
        // Элемент вокруг выбиралки
        var c = $(el).parent().addClass("mybill-v2-dropdown");
        var frame = mybill_v2.createFrame(el);
        el.parent().addClass("mybill-v2-dropList").css({position:"absolute",display:"none",zIndex:1});        
        
        var field = $("<div>").css({width:w-4,height:24}).prependTo(c);
        field.addClass("mybill-v2-dropdownText")
            .css({cursor:"pointer",color:"black",overflow:"hidden",height:22,fontSize:13,lineHeight:"20px",fontWeight:"bold",paddingTop:2,paddingLeft:4})
        field.css({background:"yellow"});            

        mybill_v2.createFrame(field);
        
        field.html(el.find("b").html())
        field.css({background:"url(/mybill/v2/img/dropdown.gif) right center no-repeat"});
        
    }
 

// --------------------------------------------------------------------------------

};

window.onload = function(){

    $(".mybill-v2-framed").each(function(){mybill_v2.createFrame($(this))});
    $(".mybill-v2-select").each(function(){mybill_v2.replaceSelect($(this))});
    $(".mybill-v2-list").each(function(){mybill_v2.replaceList($(this))});    
    $(".mybill-v2-submit").each(function(){mybill_v2.replaceSubmit($(this))});
    $(".mybill-v2-cancel").each(function(){mybill_v2.replaceCancel($(this))});

    $(document).mousedown(function(e){
        $(".mybill-v2-dropList").css({display:"none"});    
        var hit = $(e.target).parents(".mybill-v2-dropdown");
        hit.find(".mybill-v2-dropList").css({display:"block",zIndex:1,position:"absolute"});
    })

}