Mx.Popup = Class.create();
Mx.Popup.prototype = {
    
    initialize: function(options){
        this.body=$(options.parent||window.document.body);
        this.setOptions(options);
        this._build();
        this._observeBodyShield();
        this._observeClose();
    },
    
    setOptions: function(options) {
        this.options = $H({
            id:                'mx_popup',
            title:             '',
            subTitle:          '', 
            className:         '',
            linksClassName:    '',
            outsetClassName:   '',
            disabledClassName: 'disabled',
            shieldOpacity:      0.5,
            shieldBackground:  '#fff',
            value:             'X'
            
                           
        }).merge(this.options);
        this.options.merge(options);
        
        this.options.title=this.options.title.unescapeHTML();
         this.options.subTitle=this.options.subTitle.unescapeHTML();
    },
    
    _build: function() {
        this.body_shield=Builder.node('div', {
                    id: this.options.id+'-shield'
                } 
        );
        
        $(window.document.body).appendChild($(this.body_shield));
        
        $(this.body_shield).setStyle({background: this.options.shieldBackground, opacity: this.options.shieldOpacity, border: 'solid 0px', width: '0px', height: '0px', 'z-index': 100});
        
        var title=this.options.title;
        
        this.popup_selector=Builder.node('div',{
                id: this.options.id,
                className: this.options.className
            },
            [
                Builder.node('h1', { title: this.options.title},
                    [
                    this.title=Builder.node('strong', {id: this.options.id+'-title'},[
                            title, 
                            this.options.subTitle?' | ':'',
                            this.subTitle=Builder.node('span', {id: this.options.id+'-subtitle'}, this.options.subTitle)
                        ]
                    ),
                    this.close=Builder.node('img',{id: this.options.id+'-close', 'src': '/images/close.gif'}),
                    ]
                ),
                this.data = Builder.node('div', {className: this.options.linksClassName}),
                
                this.outset=Builder.node('div', {className: this.options.outsetClassName, id: this.options.id+'-outset'})
            ]
        );
        
        $(this.popup_selector).setStyle({'z-index': 101, display: 'none', 'background': '#fff'});
        this.data.update('X');
        $(this.body).appendChild(this.popup_selector);
        
        
    },
               
    show: function(link_element){
            
        $(this.popup_selector).show();
            
    },
            
    hide: function(){
        $(this.body_shield).setStyle({width: '0px', height: '0px'});
        $(this.body_shield).hide();
        $(this.popup_selector).hide();
    },
            
    _observeBodyShield: function(){
        this.onClickBodyShieldListener = this.onClickBodyShieldListener || this.onClose.bindAsEventListener(this);
        Event.observe($(this.body_shield),'click', this.onClickBodyShieldListener);
    },
    
    _observeClose: function(){
        this.onClickCloseListener = this.onClickCloseListener || this.onClose.bindAsEventListener(this);
        Event.observe($(this.close),'click', this.onClickCloseListener);
    },
            
    onClose: function(){
        this.hide();
    }    
    
};

Mx.PopupSelector=Class.create();
Mx.PopupSelector.prototype={

    initialize: function(options){
        this.body=$(options.parent||window.document.body);
        this.setOptions(options);
        this._build();
        this._observeBodyShield();
        this._observeClose();
    },
    
    setOptions: function(options) {
        this.options = $H({
            id:                'new-popup-selector',
            title:             'Инструмент',
            subTitle:          '', 
            className:         'popup-selector',
            linksClassName:    'links',
            outsetClassName:   'outset',
            leftClassName:     'left',
            rightClassName:    'right',
            disabledClassName: 'disabled',
            shieldOpacity:      0.5,
            shieldBackground:  '#fff',
            
            leftList: [
                            {id: 'daily',    title: 'Ход торгов', hidden: false, disabled: false, url: '/marketdata/quotes', parameters: {}},
                            {id: 'history',  title: 'Результаты торгов', hidden: false, disabled: false, url: '/marketdata/quotes', parameters: {}},
                            {id: 'analisys', title: 'Технический анализ', hidden: false, disabled: false, url: '/marketdata/quotes', parameters: {}}
                       ],
            rightList: [
                            {id: 'passport', title: 'Паспорт ценной бумаги', hidden: false, disabled: false, url: '/marketdata/info', parameters: {}},
                            {id: 'emmitent', title: 'Эммитент', hidden: false, disabled: false, url: '/marketdata/info', parameters: {}},
                            {id: 'emmitent-news', title: 'Новости эммитента', hidden: false, disabled: false, url: '/marketdata/info', parameters: {}}
                       ]
            
        }).merge(this.options);
        this.options.merge(options);
        /* dosn't work in Chrome/IE*/
        this.options.title=this.options.title.unescapeHTML().gsub('&','&');
         this.options.subTitle=this.options.subTitle.unescapeHTML().gsub('&','&');
    },
    
    
    _buildList: function(list, ol){
        var count=0;
        $A(ol).each(function(e){
            if(!e.hidden){
                var a; count++;
                var li;
                var id=this.options.id+'-'+e.id;
                $(list).appendChild(li=Builder.node(
                    'li',
                    a=Builder.node('a', {id: id, name: id, href: e.url+($H(e.parameters).size()>0?'?':'')+$H(e.parameters).toQueryString()}, e.title)
                ));
                if(e.disabled){
                    a.className=this.options.disabledClassName;
                    a.href='#'+id;
                }
            }
        }.bind(this));
        return count;
    },
    
    _build: function() {
        this.body_shield=Builder.node('div', {
                    id: this.options.id+'-shield'
                } 
        );
        
        $(window.document.body).appendChild($(this.body_shield));
        
        $(this.body_shield).setStyle({background: this.options.shieldBackground, opacity: this.options.shieldOpacity, border: 'solid 0px', width: '0px', height: '0px', 'z-index': 100});
        
        
        var title=''; 
        var sl=this.options.subTitle?this.options.subTitle.length:0;
        if(this.options.title.length+sl>32) {title+=this.options.title.substr(0,10)+'...'; title+=this.options.title.substr(this.options.title.length-10,10);}
        else title=this.options.title;
            
        this.popup_selector=Builder.node('div',{
                id: this.options.id,
                className: this.options.className
            },
            [
                Builder.node('h1', { title: this.options.title},
                    [
                    this.title=Builder.node('strong', {id: this.options.id+'-title'},[
                            title, 
                            this.options.subTitle?' | ':'',
                            this.subTitle=Builder.node('span', {id: this.options.id+'-subtitle'}, this.options.subTitle)
                            /*this.close=Builder.node('a',{id: this.options.id+'-close', 'href': '#'}, (LC_LANG=='ru'?'x':'x'))*/
                        ]
                    ),
                    this.close=Builder.node('img',{id: this.options.id+'-close', 'src': '/images/close.gif'}),
                    ]
                ),
                this.linksBox=Builder.node('div', {className: this.options.linksClassName}, [
                    this.leftList=Builder.node('ul', {className: this.options.leftClassName, id: this.options.id+'-leftlist'}),
                    this.rightList=Builder.node('ul', {className: this.options.rightClassName, id: this.options.id+'-rightlist'})
                ]),
                this.outset=Builder.node('div', {className: this.options.outsetClassName, id: this.options.id+'-outset'})
            ]
        );
        
        $(this.popup_selector).setStyle({'z-index': 101, display: 'none', 'background': '#f00'});
        
        $(this.body).appendChild(this.popup_selector);
        
        this._buildList($(this.leftList), this.options.leftList);
        this._buildList($(this.rightList), this.options.rightList);
    },
    
    _lock_body: function(){
        Position.absolutize($(this.body_shield));
        Position.overlay($(this.body_shield));
        $(this.body_shield).show();
    },
            
    show: function(link_element){
            
        if(!link_element) return ;
            
        this._lock_body();
        $(this.popup_selector).setStyle({opacity:0.0, left:0, top:0, margin:0, padding:0});
        $(this.popup_selector).show();
        
        // fix||IE linksBox
        var h=$(this.leftList).getHeight();
        if($(this.rightList).getHeight()>h)
            h=$(this.rightList).getHeight();
            
        var w=$(this.leftList).getWidth()+$(this.rightList).getWidth();

        var titleWidth = $(this.title).getWidth() + 40;
        if (w < titleWidth) w = titleWidth;
        
        $(this.linksBox).setStyle({height: (h+1)+'px', width: w+'px'});
        
        h=$(this.popup_selector).getHeight();
        Position.absolutize(this.popup_selector);
        var outset_left=parseFloat($(this.outset).getStyle('left')  || 0);
        var link_w=$(link_element).getWidth();
        var offset_link=(link_w>=(outset_left+link_w/2)?0:(outset_left-link_w/2)*(-1));
            
        Position.clone($(link_element), $(this.popup_selector), {setWidth: false, setHeight: false, offsetLeft:offset_link , offsetTop: h*(-1)-2-link_element.getHeight()/2}); 
        
        $(this.popup_selector).show();
        $(this.popup_selector).setStyle({opacity:1.0}); 
    },
            
    hide: function(){
        $(this.body_shield).setStyle({width: '0px', height: '0px'});
        $(this.body_shield).hide();
        $(this.popup_selector).hide();
    },
            
    _observeBodyShield: function(){
        this.onClickBodyShieldListener = this.onClickBodyShieldListener || this.onClose.bindAsEventListener(this);
        Event.observe($(this.body_shield),'click', this.onClickBodyShieldListener);
    },
    
    _observeClose: function(){
        this.onClickCloseListener = this.onClickCloseListener || this.onClose.bindAsEventListener(this);
        Event.observe($(this.close),'click', this.onClickCloseListener);
    },
            
    onClose: function(){
        this.hide();
    }
            
};
            
Mx.PopupSelector.create = function (table, trade_engine, market){
    var parameters={secid: table.selected_row.secid, boardid: table.selected_row.boardid, trade_engine: trade_engine, market: market};
    var popup_selector=new Mx.PopupSelector({
        shieldOpacity: 0.0, 
        title:    table.selected_row.title, 
        subTitle: table.selected_row.secid,
        leftList: [
                    {id: 'daily',   title: [['Ход торгов'],['Market Data']][LC_Index], url: '/marketdata/quotes', parameters: $H(new Hash(parameters)).merge({data_type: 'daily'})},
                    {id: 'history', title: [['Результаты торгов'],['Statistics      ']][LC_Index], url: '/marketdata/quotes', parameters: $H(new Hash(parameters)).merge({data_type: 'history'})}
                ],
        rightList:[
                    {id: 'card',   title: [['Описание инструмента'],['Description']][LC_Index], url: '/marketdata/quotes', parameters: $H(new Hash(parameters)).merge({type_of_info: 'instrument-info-passport'})},
                    {id: 'analisys', title: [['Технический анализ'],['Technical Analysis']][LC_Index], url: '/marketdata/analysis', 
                        parameters: $(new Hash(parameters)).merge({linetype:'candle', period:'-1M'})}
                ]
    });
    
    popup_selector.show($(table.selected_link));
};