<?php
// Copyright 1999-2014. Parallels IP Holdings GmbH. All Rights Reserved.
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <?php echo $this->headTitle($this->pageTitle, Zend_View_Helper_Placeholder_Container_Abstract::SET); ?>
    <link rel="shortcut icon" href="<?php echo $this->baseUrl ?>favicon.ico" type="image/x-icon"/>
    <link rel="icon" href="<?php echo $this->baseUrl ?>static/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="<?php echo $this->baseUrl ?>static/css/style.css"/>
    <script type="text/javascript" src="<?php echo $this->baseUrl ?>static/js/jquery-1.6.1.min.js"></script>
    <script type="text/javascript">
        // <![CDATA[
        $(document).ready(function() {
            var out_timer = null;

            $('.tab-wrapper .tabs a').click(function(){
                var self = $(this);
                var tabs = $('.tab-wrapper .tabs');
                var is_opened = tabs.hasClass('opened');
                var cls = self.attr('href').replace(/#/, '.');
                var tab = $(self.attr('href'));

                $('#device-image .fallback').removeClass('fallback');

                if(is_opened) {
                    if(self.hasClass('opened')) {
                        $('#device-image .default').addClass('fallback');
                        tab.slideUp(null, function(){
                            tabs.removeClass('opened');
                            self.removeClass('opened');
                            $('.tab-wrapper').css('height', '1px');
                        });
                    } else {
                        $('#device-image '+cls).addClass('fallback');
                        var prev = $('a.opened', tabs);
                        prev.removeClass('opened');
                        $(prev.attr('href')).fadeOut();
                        self.addClass('opened');
                        tab.fadeIn();
                    }
                } else {
                    $('#device-image '+cls).addClass('fallback');
                    var height = $('.tab-wrapper .tab').height();
                    $('.tab-wrapper').css('height', new String(height)+'px');
                    tabs.addClass('opened');
                    self.addClass('opened');
                    tab.slideDown();
                }
                return false;
            }).mouseenter(function(){
                var cls = $(this).attr('href').replace(/#/, '.');
                if($('#device-image '+cls).is(':visible')) {
                    return;
                }

                if(out_timer != null) {
                    clearTimeout(out_timer);
                }
                $('#device-image div:visible').fadeOut(300);
                $('#device-image '+cls).fadeIn(300);
            }).mouseleave(function(){
                out_timer = setTimeout(function() {
                    if($('#device-image .fallback').is(':visible')) {
                        return;
                    }
                    out_timer = null;
                    $('#device-image div:visible').fadeOut(300);
                    $('#device-image .fallback').fadeIn(300);
                }, 400);
            });

            // Preload images
            var img1 = new Image();
            img1.src = '<?php echo $this->baseUrl ?>static/img/device/default.png';
            var img2 = new Image();
            img2.src = '<?php echo $this->baseUrl ?>static/img/device/android.png';
            var img3 = new Image();
            img3.src = '<?php echo $this->baseUrl ?>static/img/device/iphone.png';
            var img4 = new Image();
            img4.src = '<?php echo $this->baseUrl ?>static/img/device/blackberry.png';
        });
        // ]]>
    </script>
</head>
<body>
<div class="page">
    <div class="header clear">
        <div class="company-logo"></div>
        <div class="header-area">
            <h1>
                <a class="product-logo" href="http://www.odin.com/products/plesk"
                   title="Plesk Mobile">
                    Plesk Mobile
                </a>
            </h1>
        </div>
    </div>
    <div id="body" class="clear">
        <?php echo $this->layout()->content; ?>
    </div>
    <!-- /#body -->
    <div class="footer">
        <div class="footer-area">
            <div class="description">
                &copy; 2015 Parallels IP Holdings GmbH. All rights reserved. Odin and the Odin logo are trademarks of Parallels IP Holdings GmbH.
            </div>
        </div>
    </div>
</div>
</body>
</html>