<!DOCTYPE HTML>
<html>
    <head>
        <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
        <title>Vesta - <?php echo "$TAB"; ?> </title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <link type="text/css" href="/css/main.css?ver=1407230838" rel="stylesheet" />
        <!--[if IE 7]>
            <link rel="stylesheet" type="text/css" href="/css/ie.css" />
            <style type="text/css">
                .data-col1 a {
                    white-space: nowrap;
                }

                .submenu-button-block {
                    width: 120px;
                }

                .submenu-search-block {
                    width:369px;
                }

                .submenu-select-block {
                    width:239px;
                }

                .submenu-select-dropdown {
                    position: relative;
                    top: 2px;
                }
            </style>
        <![endif]-->
        <link type="text/css" href="/css/jquery-custom-dialogs.css" rel="stylesheet" />
        <script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="/js/jquery.cookie.js"></script>
        <script type="text/javascript" src="/js/jquery-ui-1.8.20.custom.min.js"></script>
        <script type="text/javascript" src="/js/events.js"></script>

        <script type="text/javascript">
            var checked=false;
            var frmname='';
            function checkedAll(frmname) {
                if ($('.selected').length > 0) {
                    $('.data-row').removeClass("selected");
                    $('.ch-toggle').attr("checked", false);
                }
                else {
                    $('.data-row').addClass("selected");
                    $('.ch-toggle').attr("checked", true);
                }
            }
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                var nav = $('.top');
                var nav = $('.top');
                var lastScrollTop = 0;

                $(window).scroll(function () {
                    var st = $(this).scrollTop();

                    if (st > 27 ) {
                        nav.addClass("small-logo");
                    }
                    else{
                        nav.removeClass("small-logo");
                    }

                    if (st > lastScrollTop) {
                        if ($(this).scrollTop() > 58) {
                            nav.addClass("small");
                        }
                    } 
                    else {
                        if ($(this).scrollTop() < 58) {
                            nav.removeClass("small");
                        }
                    }
                    lastScrollTop = st;
                });
                
             

                /*$('#vstobjects').bind('click', function(evt) { // observe change event on whole div#vstobjects
                    console.log(evt);
                    var elm = evt.target; // grab element on which user clicked
                    document.getSelection().removeAllRanges();
                    if($(elm).hasClass('data-controls') || $(elm).parents('.data-controls')[0]){
                        return;
                    }

                    var parent = $(elm).hasClass('data-row') ? $(elm) : $(elm).parents('.data-row'); // check if outer element is row container and get it
                    if (!$(parent).hasClass('selected')) {
                        if (evt.shiftKey === false && evt.ctrlKey === false) {
                            $('#vstobjects').find('.selected').each(function(i, o) {
                                $(o).find('.ch-toggle').attr('checked', false);
                                $(o).removeClass('selected');
                            });
                        }
                        parent.addClass('selected'); // add class
                        parent.find('.ch-toggle').attr('checked', true);
                        parent.find('.ch-toggle').focus();
                        // another actions on checked row
                    }
                    else {
                        parent.removeClass('selected'); // remove class
                        parent.find('.ch-toggle').attr('checked', false);
                        parent.find('.ch-toggle').focus();
                        // another actions on unchecked row
                    }
                });*/


                if($('.movement.left').length){
                    refresh_timer.right = $('.movement.right');
                    refresh_timer.left = $('.movement.left');
                    refresh_timer.start();

                    $('.pause').click(function(){
                        refresh_timer.stop();
                        $('.pause').addClass('hidden');
                        $('.play').removeClass('hidden');
                        $('.refresh-timer').addClass('paused');
                    });

                    $('.play').click(function(){
                        refresh_timer.start();
                        $('.pause').removeClass('hidden');
                        $('.play').addClass('hidden');
                        $('.refresh-timer').removeClass('paused');
                    });
                }
            });

            refresh_timer = {
                speed: 50,
                degr: 180,
                right: 0,
                left: 0,
                periodical: 0,
                first: 1,

                start: function(){
                    this.periodical = setInterval(function(){refresh_timer.turn()}, this.speed);
                },

                stop: function(){
                    clearTimeout(this.periodical);
                },

                turn: function(){
                    this.degr += 1;

                    if (this.first && this.degr >= 361){
                        this.first = 0;
                        this.degr = 180;
                        this.left.css({'-webkit-transform': 'rotate(180deg)'});
                        this.left.css({'transform': 'rotate(180deg)'});
                        this.left.children('.loader-half').addClass('dark');
                    }
                    if (!this.first && this.degr >= 360){
                        this.first = 1;
                        this.degr = 180;
                        this.left.css({'-webkit-transform': 'rotate(0deg)'});
                        this.right.css({'-webkit-transform': 'rotate(180deg)'});
                        this.left.css({'transform': 'rotate(0deg)'});
                        this.right.css({'transform': 'rotate(180deg)'});
                        this.left.children('.loader-half').removeClass('dark');

                        this.stop();
                        location.reload();
                    }

                    if (this.first){
                        this.right.css({'-webkit-transform': 'rotate('+this.degr+'deg)'});
                        this.right.css({'transform': 'rotate('+this.degr+'deg)'});
                    }
                    else{
                        this.left.css({'-webkit-transform': 'rotate('+this.degr+'deg)'});
                        this.left.css({'transform': 'rotate('+this.degr+'deg)'});
                    }
                }
            }

        </script>
        <script language="JavaScript">
            $(document).ready(function(){
                $(".submenu-select-dropdown").each(function(){
                    $(this).wrap( "<span class='submenu-select-wrapper'></span>" );
                    $(this).after("<span class='holder'></span>");
                });
                $(".submenu-select-dropdown").change(function(){
                    var selectedOption = $(this).find(":selected").text();
                    $(this).next(".holder").text(selectedOption);
                }).trigger('change');
            })
        </script>
        <script type="text/javascript" src="/js/app.js"></script>
        <script type="text/javascript" src="/js/templates.js"></script>
    </head>
    <body>
