function beio_overlay($url) {
    this.module_name='overlay';
    beio_api.apply(this, arguments);
    this.preloaded={};
    this.init=function(){
        this.hash=''
        this.overlays_ierarch=[];
        el=document.getElementById('beio_overlay_template');
        var t = el.childNodes;
        for(i=0; i<t.length; i++){
            this.preloaded[t[i].dataset.id]=t[i].innerHTML;
        }
        el.innerHTML='';
        this.overlays_el=document.getElementById('overlay');
        this.style_el= document.createElement('style');
        this.scripts= document.createElement('div');
        this.style_el.type = 'text/css';
        

        $hash=window.location.toString().split("#")[1];
        if($hash)
            this.open($hash);
        
        
        var head = document.head || document.getElementsByTagName('head')[0];
        head.appendChild(this.style_el);
        document.body.appendChild(this.scripts);
    }
    this.set_style=function($style, $files){
        if(!$style) $style='';
        if(!$files) $files='';
        if (this.style_el.styleSheet){
            // This is required for IE8 and below.
            this.style_el.styleSheet.cssText = $style;
        } else {
            this.style_el.innerText=$style;
        }
        this.scripts.innerHTML=$files;

    }
    this.dc=function($data){
        if($data.hasOwnProperty('hash')&&$data.hasOwnProperty('content')&&$data.hasOwnProperty('style')&&$data.hasOwnProperty('files')){
            this.load_content($data.hash, $data.content);

            if($data.style)
                this.set_style($data.style, $data.files);

            
        }
    }
    this.load_content=function($hash, $content){
        this.save_hash($hash);
        this.overlays_el.classList.add('loaded');
        this.overlays_el.innerHTML = '<div class="icon-close-overlay" onclick="beio_overlay.close();"></div>'+$content;
        
    }
    this.open=function($id,  not_push){
        this.close(2);
        if(this.preloaded.hasOwnProperty($id)){
            this.open_next($id);
            this.load_content($id, this.preloaded[$id]);
            this.save_hash($id);
        }else{
            var len=this.overlays_ierarch.length;
            this.api('open', {'id': $id}, {});
            this.open_next($id, not_push);
        }
        
        
    }
    this.load=function($hash){
        this.open($hash);
    }
    this.open_next=function($id,not_push){
        document.body.style.overflow='hidden';
        this.overlays_el.classList.add('overlay_opened');
        this.overlays_el.classList.remove('loaded');
        if(!not_push)
            this.overlays_ierarch.push({
                'id':$id,
                'hash':this.hash
            });
    }
    this.save_hash=function($id){
        window.location.hash = $id;
        this.hash = $id;
        //history.pushState({param: 'Value'}, '', '#overlay');
    }
    this.close=function($close_all){
        this.set_style();
        var len=this.overlays_ierarch.length;
        if(len>0){
            this.overlays_el.innerHTML='';
            var before=this.overlays_ierarch.pop();
            window.location.hash = before.hash
            document.body.style.overflow='auto';
            this.overlays_el.classList.remove('overlay_opened');
            this.overlays_el.classList.remove('loaded');

            if($close_all!=2){
                if($close_all)
                    this.overlays_ierarch=[];
                else if(len>1){
                    this.open(this.overlays_ierarch[len-2]['id'], true);
                }
            }
        }
    }
}


var beio_overlay=new beio_overlay;
beio.register_api(beio_overlay);