<!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">
    <head>
        <meta http-equiv="content-Type" content="text/html; charset=UTF-16" />
        <link rel="stylesheet" type="text/css" href="../../../css/reset.css">
        <link rel="stylesheet" type="text/css" href="../../../css/widgets.css">
        <style type="text/css">
            #buttons {
                position: absolute;
                right: 16px;
                top: 19px;
            }

            #learn-more-button,
            #buy-button {
                float: none;
                display: inline-block;
            }

            #learn-more-button {
                margin-right: 8px;
            }

            #buy-button>span {
                padding-right: 5px;
                padding-left: 10px;
            }

            body {
                width: 708px;
                height: 472px;
            }

            #workingArea {
                width: 708px;
                height: 472px;
                background-image: url(../../../images/common/pattern.png);
                position: relative;
            }

            h1 {
                padding-top: 25px;
                height: 79px;
                text-align: center;
                font: 18pt FranklinGothicMediCondTT;
                color: #5E5E5E;
            }

            .main-column {
                padding-left: 19px;
                padding-right: 16px;
                width: 32%;
                vertical-align: top;
                letter-spacing: 0.05em;
            }

            .main-separator img {
                vertical-align: center;
            }

            .main-column .image {
                height: 96px;
                text-align: center;
                position: relative;
            }

            div.label {
                background: url(../../../images/startup/label.png) no-repeat right top;
                float: left;
                min-width: 50px;
                font: 8pt Tahoma;
                height: 20px;
            }

            div.label>span {
                background: url(../../../images/startup/label.png) no-repeat;
                display: block;
                line-height: 11px;
                margin: 0px 6px 0px -6px;
                padding: 4px 0px 5px 6px;
                white-space: nowrap;
            }

            .main-column .label {
                left: 125px;
                top: 75px;
                position: absolute;
            }

            .main-column h2 {
                font-family: Arial;
                font-weight: bold;
                font-size: 10pt;
                color: #4E4E4E;
                margin-top: 22px;
                margin-bottom: 8px;
            }

            .main-column p.main-text {
                font-family: Arial;
                line-height: 1.5;
                font-size: 10pt;
            }

            #detail {
                height: 65px;
                width: 399px;
                align: center;
                position: absolute;
                right: 0px;
                bottom: 0px;
                margin-bottom: 0px;
                text-align: center;
                background-image: url(../../../images/startup/paperpress.png);
                background-repeat: no-repeat;
            }

            .checkbox {
                position: absolute;
                left: 18px;
                bottom: 20px;
            }

            #buy-icon {
                background: url(../../../images/common/icon_buy.png) 0 -1px no-repeat;
                height: 32px;
                padding-left: 22px;
            }
        </style>
    </head>
    <body>
        <div id="workingArea">

            <table id = "main-info">
                <tr class = "main-row">
                    <td class = "main-column"></td>
                    <td class = "main-separator"><img src="../../../images/startup/separator.png"/></td>
                    <td class = "main-column"></td>
                    <td class = "main-separator"><img src="../../../images/startup/separator.png"/></td>
                    <td class = "main-column"></td>
                </tr>
            </table>
            <p class = "checkbox">
                <input type="checkbox" id="stop-show" onclick="window.IpmCommandHandler.setDontShowWindowFlag(this.checked)">
                <label for="stop-show">Ne plus afficher</label>
            </p>
            <div id="detail">
                <div id="buttons">
                    <a id="learn-more-button" class="gray-button" href="#" onclick="window.IpmCommandHandler.openUrl(window.IpmCommandHandler.getProductServices().learnMoreLink)">
                        <span>En savoir plus...</span>
                    </a>
                    <a id="buy-button" class="blue-button" href="#" onclick="window.IpmCommandHandler.openUrl('Buy')">
                        <span><div id="buy-icon">Acheter le code d'activation</div></span>
                    </a>
                </div>
            </div>
        </div>
        <script src="../../../js/jquery.js"></script>
        <script>
        document.addEventListener("DOMContentLoaded", function() {
                     var columns = [
				{
                    imageName: "ico_internet_shopping_96.png",
                    isNew: true,
                    isUpgrade: false,
                    header: "Protection des transactions bancaires",
                    text: "Assure la protection des données confidentielles lors de l'utilisation des services des banques en ligne et des systèmes de paiement, et prévient aussi le vol de l'argent lors des paiements en ligne.",
                    used: false
                },				               
				{
                    imageName: "ico_internet_shopping_96.png",
                    isNew: false,
                    isUpgrade: true,
                    header: "Clavier virtuel",
                    text: "Protège les données de vos cartes de crédit et de vos comptes bancaires, en prévenant leur interception et vol à l'aide des enregistreurs de frappes et des outils de piratage.",
                    used: false
                },
				{
                    imageName: "ico_safe_desktop_96.png",
                    isNew: true,
                    isUpgrade: false,
                    header: "Protection des données saisies au clavier",
                    text: "Protège les données personnelles saisies au clavier.",
                    used: false
                },
				{
                    imageName: "ico_vulnerability_scan_96.png",
                    isNew: true,
                    isUpgrade: false,
                    header: "Protection automatique contre les Exploits",
                    text: "Assure une protection proactive contre les vulnérabilités dans les logiciels et contrôle aussi la sécurité de fonctionnement des applications vulnérables.",
                    used: false
                },
				{
                    imageName: "ico_parental_control_96.png",
                    isNew: false,
                    isUpgrade: true,
                    header: "Contrôle Parental",
                    text: "Permet d'établir des restrictions flexibles d'accès à l'ordinateur et à Internet pour vos enfants, ainsi que consulter les rapports sur l'utilisation des réseaux sociaux.",
                    used: false
                },
				{
                    imageName: "ico_activity_trails_remove_96.png",
                    isNew: false,
                    isUpgrade: false,
                    header: "Suppression des traces d'activité",
                    text: "Supprime les informations sur vos actions lors de l'utilisation d'Internet, en assurant une protection complémentaire de vos données personnelles.",
                    used: false
                },
				{
                    imageName: "ico_backup_96.png",
                    isNew: false,
                    isUpgrade: true,
                    header: "Sauvegardes",
                    text: "Assure l'intégrité des données de valeur en cas de leur perte ou de leur vol. La Sauvegarde en ligne qui assure l'accès aux données enregistrées depuis n'importe quel ordinateur utilisé.",
                    used: false
                },
				{
                    imageName: "ico_home_network_management_96.png",
                    isNew: false,
                    isUpgrade: false,
                    header: "Protection du réseau domestique",
                    text: "Permet d'administrer de manière centralisée l'analyse, la sauvegarde et les autres tâches exécutées sur les ordinateurs distants du réseau local.",
                    used: false
                },
				{
                    imageName: "ico_password_manager_96.png",
                    isNew: false,
                    isUpgrade: true,
                    header: "Gestionnaire de mots de passe",
                    text: "Permet de créer des mots de passe complexes, configurer l'authentification automatique, synchroniser vos mots de passe et vos données personnelles entre plusieurs ordinateurs.",
                    used: false
                },
				{
                    imageName: "ico_encryption_96.png",
                    isNew: false,
                    isUpgrade: false,
                    header: "Coffres-forts",
                    text: "Utilisez le chiffrement des données pour assurer une meilleure protection des informations personnelles contre l'accès illégal ou contre le vol.",
                    used: false
                }			
            ];

            var localColumns = document.getElementsByClassName('main-column');
            var currentColumn, currentIndex, tempIndex;

            for (var i = 0; i < 3; i++) {
                currentIndex = 0;
                while (currentIndex == 0) {
                    tempIndex = Math.floor(Math.random() * columns.length);
                    if (columns[tempIndex].used == false) {
                        currentIndex = tempIndex;
                        columns[currentIndex].used = true;
                    }
                }

                currentColumn = '<div class="image"><img src = "../../../images/startup/' + columns[currentIndex]['imageName'] + '" />';
                if (columns[currentIndex]['isNew']) {
                    currentColumn += '<div class="label"><span>Nouveauté !</span></div>';
                }
                if (columns[currentIndex]['isUpgrade']) {
                    currentColumn += '<div class="label"><span>Amélioré !</span></div>';
                }
                currentColumn += '</div><h2>' + columns[currentIndex]['header'] + '</h2><p class="main-text">' + columns[currentIndex]['text'] + '</p>';

                localColumns[i].innerHTML = currentColumn;
            }

            // установка свойства чекбокса
            var dontShowFlag = document.getElementById('stop-show');
            dontShowFlag.checked = window.IpmCommandHandler.getDontShowWindowFlag();

            // вставка заголовка
            var workingArea = document.getElementById('workingArea');
            var firstWorkingArea = document.getElementById('main-info');

            var header = document.createElement('h1');
            header.innerHTML = window.IpmCommandHandler.getTemplateSubstitutionText('\'Bienvenue dans<br>\' + $ApplicationType');

            workingArea.insertBefore(header, firstWorkingArea);
        }, false);
        </script>
    </body>
</html>