{*  Azure CSP Store Customization v2.0.2 *}
<!--
    azure_provision.tpl
-->
<!-- beginning of CUSTOMIZATION -->
{* change value of allowExistingMsAccount to false to prohibit using an existing MS account *}
{assign var=allowExistingMsAccount value=true}
{assign var=azureTenantId value='aps_defaults_azure'}
{assign var=inputId value='visible_azure_subdomain'}
{assign var=isAzure value=$azureTenantId|array_key_exists:$plan.Prov}
{assign var=isAnonymous value=$account->AccountID == 0}

{if $isAzure}
    {if $plan.ProvVisibleCount}

        <fieldset>
            <legend class="editProv">{$smarty.session.LANG.REQUIRED_PARAMETERS}

                <table cellspacing="0" cellpadding="0">
                {foreach name=outerorder item=prov_id from=$state->plan.sortedProv}
                    {assign var=itemOrderProv value=$plan.Prov[$prov_id]}
                    {if $itemOrderProv.statusShow}
                        {if $itemOrderProv.id != $azureTenantId}
                            <tr>
                                <td class="fieldLabel provLabel"><label{if $itemOrderProv.required == 1} class="required"{/if} for="prov_{$itemOrderProv.id}">{$itemOrderProv.name|escape:'html'}</label></td>
                                <td class="fieldValue provValue" align="left" id="td__widget__prov_{$itemOrderProv.id}">
                                    {if $itemOrderProv.readonly}
                                    <div>{$itemOrderProv.defaultvalue}</div>
                                    {else}
                                    <div class="fieldEntry">
                                        {assign var=itemProvDescr value=$itemOrderProv.description}
                                        {if !strlen($itemOrderProv.description)}
                                            {assign var=itemProvDescr value= $itemOrderProv.name}
                                        {/if}
                                        {widget name="prov_"|cat:$itemOrderProv.id id="prov_"|cat:$itemOrderProv.id title=$itemProvDescr}
                                    </div>
                                    <div class="fieldComment">{if $itemOrderProv.hint && strlen($itemOrderProv.hint)}{$itemOrderProv.hint}{else}{$itemOrderProv.description}{/if}</div>
                                    {/if}
                                </td>
                            </tr>
                        {/if}

                    {/if}
                {/foreach}
                </table>

            </legend>
        </fieldset>

    {assign var=azureSubdomainTitle value=$smarty.session.LANG.AZURE_SUBDOMAIN_CAPTION}

    <div id="azure_wait" style="width: 100%; text-align: center;"><span class="azureWait">{$smarty.session.LANG.LOADING_SUBDOMAIN_FORM}</span></div>
    <div id="azure_integration_error" style="display:none; border-radius: 10px; background-color: #ffe8ea; color: #d92231; padding: 15px;"><span id="azure_integration_error_text"></span></div>
    <div id="azure_domain_area" style="display: none;" class="AZURE">
        <table class="tableHeader" cellpadding="0" cellspacing="0" id="azure_accountTypeSelect" {if $isAnonymous}style="display: none;"{/if}> <tbody>
            <tr> <td class="tableHeaderTD"> <span class="BlockName">{$smarty.session.LANG.SIGN_UP_OR_USE_EXISTING_ACCOUNT}</span> </td> </tr>
            <tr> <td class="tableContentTD">{$smarty.session.LANG.AZURE_SIGN_UP_OR_USE_EXISTING_ACCOUNT_DESCRIPTION}</td></tr>
            <tr> <td>
                <input type="radio" name="azuremode" id="azuremode_createNew" value="createNew">
                <label for="azuremode_createNew">{$smarty.session.LANG.SIGN_UP_FOR_A_NEW_MICROSOFT_ACCOUNT}</label><br>
                <div class="hint-in-input" style="padding-left: 25px">{$smarty.session.LANG.SIGN_UP_FOR_A_NEW_MICROSOFT_ACCOUNT_DESCRIPTION}</div>
            </td></tr>
            <tr> <td>
                <input type="radio" name="azuremode" id="azuremode_useExisting" value="useExisting" checked>
                <label for="azuremode_useExisting">{$smarty.session.LANG.USE_AN_EXISTING_MICROSOFT_ACCOUNT}</label><br>
                <div class="hint-in-input" style="padding-left: 25px;">{$smarty.session.LANG.USE_AN_EXISTING_MICROSOFT_ACCOUNT_DESCRIPTION}</div>
            </td></tr>
        <tbody></table>

        <input type="hidden" name="prov_{$azureTenantId}" id="prov_{$azureTenantId}" />

        <table class="tableHeader" cellpadding="0" cellspacing="0" id="azure_createNewCtr" style="display: none;"> <tbody>
            <tr> <td class="tableHeaderTD"> <span class="BlockName">{$smarty.session.LANG.SELECT_SUBDOMAIN}</span> </td> </tr>
            <tr> <td class="tableContentTD">
                <div>{$smarty.session.LANG.AZURE_SELECT_SUBDOMAIN_DESCRIPTION}</div>
    {if $isAnonymous}
                <div>{$smarty.session.LANG.AZURE_LOGIN_IF_HAS_DOMAIN}</div>
    {/if}
                <table>
                    <tr><td class="fieldValue azureSubdomain"><label class="required" for="visible_{$azureTenantId}">{$azureSubdomainTitle}</label></td></tr>
                    <tr>
                        <td class="fieldValue provValue" align="left" id="td__widget__prov_{$azureTenantId}">
                            <div class="fieldEntry CheckNameFieldEntry">
                                    <div class="widget widgetRequired" id="widget__prov_{$azureTenantId}" type="azuresubdomain" style="white-space:nowrap">
                                        <input type="text" name="visible_{$azureTenantId}" id="visible_{$azureTenantId}" title="{$azureSubdomainTitle}" _required="1" style="text-align:right; font-family: inherit;"/>.onmicrosoft.com
                                        <button class="buttonContinue SWbutton" type="button" onclick="checkDomainName(document.getElementById('visible_{$azureTenantId}'))">{$smarty.session.LANG.CHECK_NAME}</button>
                                    </div>
                                    <div class="widgetErrorMessage" style="color:#a3aeba" id="info__prov_{$azureTenantId}">{$smarty.session.LANG.SUBDOMAIN_HINT}</div>
                                    <div class="widgetErrorMessage" id="error__prov_{$azureTenantId}"></div>
                                    <div class="widgetErrorMessage" id="error__visible_{$azureTenantId}"></div>
                            </div>
                        </td>
                    </tr>
                </table>
            </td></tr>
        <tbody></table>

        <table class="tableHeader" cellpadding="0" cellspacing="0" id="azure_useExistingCtr" style="display: none;"> <tbody>
            <tr> <td class="tableHeaderTD"> <span class="BlockName">{$smarty.session.LANG.SELECT_SUBDOMAIN}</span> </td> </tr>
            <tr> <td class="tableContentTD">
                <div id="single_domain_{$azureTenantId}">{$smarty.session.LANG.AZURE_SINGLE_OFFICE_SUBDOMAIN_DESCRIPTION}</div>
                <input type="hidden" name="single_domain_value_{$azureTenantId}" id="single_domain_value_{$azureTenantId}" />
                <div id="multiple_domains_{$azureTenantId}">{$smarty.session.LANG.AZURE_SELECT_OFFICE_SUBDOMAIN_DESCRIPTION}</div>
                <table id="table_multiple_domains_{$azureTenantId}">
                    <tr><td class="fieldValue azureSubdomain"><label class="required" for="select_exist_{$azureTenantId}">{$smarty.session.LANG.SUBDOMAIN_CAPTION}</label></td></tr>
                    <tr><td class="fieldValue provValue" align="left"><div class="fieldEntry CheckNameFieldEntry"><select id='select_exist_{$azureTenantId}' style="font-family: inherit;"></select>.onmicrosoft.com</div></td></tr>
                </table>
            </td></tr>
        <tbody></table>

    </div>
        <script language=javascript>

            var disableNext = function () {
                var nextButton = $('#editplan_buttonContinue');
                nextButton.attr('disabled','disabled');
                nextButton.addClass('SWbutton_Disable');
            };

            var enableNext = function() {
                var nextButton = $('#editplan_buttonContinue');
                nextButton.removeAttr('disabled');
                nextButton.removeClass('SWbutton_Disable');
            };

            var apsToken = '{$token}', app = null;
            var allowExistingMsAccountValue = {if $allowExistingMsAccount}true{else}false{/if};
            var globalSubDomainName = undefined; // Need for correct sub domain name change handling

            function getAppData(appType, callback, errorCallback){
                if(app){
                    callback();
                    return;
                }
                jQuery.ajax({ url: '/aps/2/resources?implementing(' + appType + ')', headers: { 'APS-Token': apsToken }}).done(function(data) {
                    if (data.length > 0) {
                        app = data[0];
                        callback();
                    }else
                        errorCallback && errorCallback();
                }).fail(errorCallback);
            }

    {if $isAnonymous}
            var processLoginLinks = function(){
                $('a[name="azure_login_link"]').each(function(){
                    $(this).attr("href", "javascript:void(0);");
                    $(this).click(function() { post(['operationType', 'showLogin']); return false; });
                });
            };

    {/if}
            var updateAZUREIntegrationError = function(show, text){
                if (show){
                    $("#azure_wait").remove();
                    $("#azure_integration_error").show();
                    if (text){
                        $("#azure_integration_error_text").text(text);
                    }
                } else {
                    $("#azure_integration_error").hide();
                }
            };

            var getErrorMessage = function(xhr){
                if (xhr.responseText){
                    var errData = JSON.parse(xhr.responseText);
                    if (errData && errData.message){
                        return errData.message;
                    }
                }
                return xhr.status && xhr.statusText ? "[" + xhr.status + "] " + xhr.statusText : "{$smarty.session.LANG.AZURE_PRICES_UNKNOWN_ERROR}";
            };

            var processOfficeDomainData = function(appId, token, callback){
                var accountId = "{$account->AccountID}";
                jQuery.ajax({ url: '/aps/2/resources/' + appId + '/domain_candidates?account_id=' + accountId, headers: { 'APS-Token': token }}).done(function(data) {
                    callback(data);
                }).fail(function(xhr, s, ex) {
                    updateAZUREIntegrationError(true, getErrorMessage(xhr));
                });
            };

            var getAzureApplicationData = function(callback){
                jQuery.ajax({ url: '/aps/2/resources/?implementing(http://www.odin.com/app/azure-csp/application/1.3)', headers: { 'APS-Token': apsToken }}).done(function(data) {
                        if (data.length > 0){
                            app = data[0];
                            var appId = data[0].aps.id;
                            processOfficeDomainData(appId, apsToken, callback);
                        } else {
                                updateAZUREIntegrationError(true, "{$smarty.session.LANG.AZURE_APPLICATION_INSTANCE_NOT_FOUND}");
                        }
                }).fail(function(xhr, s, ex) {
                        updateAZUREIntegrationError(true, getErrorMessage(xhr));
                });
            };

            var getDomainPrefix = function(domain){
                var msDomainIdx = domain.indexOf(".onmicrosoft.com");
                if (msDomainIdx >= 1){
                    return domain.substring(0, msDomainIdx);
                }
                return domain;
            };

            var setAzureSubdomain = function(){
                var selectedDomain = $("#select_exist_{$azureTenantId}").val();
                if (!selectedDomain){
                    selectedDomain = $("#single_domain_value_{$azureTenantId}").val();
                }
                var subdomain = getDomainPrefix(selectedDomain);
                processAzureOnValid(subdomain);
            };

            var resetAzureSubdomain = function(){
                disableNext();
                $('#prov_{$azureTenantId}').val("");
                if ($("#visible_{$azureTenantId}").val()){
                    checkDomainName(document.getElementById("visible_{$azureTenantId}"));
                }
            };

            var addAZUREDomains = function(domains){
                var domainContent;
                if (domains.length === 1){
                    var firstDomainPrefix = getDomainPrefix(domains[0]);

                    domainContent = $("#single_domain_{$azureTenantId}").html();
                    domainContent = domainContent.replace("__sudomain__", firstDomainPrefix);

                    $("#single_domain_{$azureTenantId}").html(domainContent);
                    $("#single_domain_value_{$azureTenantId}").attr("value", firstDomainPrefix);

                    $("#multiple_domains_{$azureTenantId}").hide();
                    $("#table_multiple_domains_{$azureTenantId}").hide();
                } else {
                    for (var i=0; i < domains.length; i++){
                        var domainPrefix = getDomainPrefix(domains[i]);
                        if (!domainContent){
                            domainContent = "<option value='" + domainPrefix + "' selected>" + domainPrefix + "</option>";
                        } else {
                            domainContent += "<option value='" + domainPrefix + "'>" + domainPrefix + "</option>";
                        }
                    }
                    $($.parseHTML(domainContent)).appendTo("#select_exist_{$azureTenantId}");
                    $("#select_exist_{$azureTenantId}").change(function(){ setAzureSubdomain();});
                    $("#single_domain_{$azureTenantId}").hide();
                }
            };

            $( document ).ready(function() {
                disableNext();
                var showForm = function(azureMode){
                    onAccountTypeSelectorChange(azureMode);
                    $('input[name="azuremode"][value="' + azureMode + '"]').prop('checked',true);
                    $("#azure_wait").hide();
                    $("#azure_domain_area").show();
                };

    {if $isAnonymous}
                getAppData('http://www.odin.com/app/azure-csp/application', function(){
                    showForm(azureModes.createNew);
                    processLoginLinks();
                });
    {else}
                getAzureApplicationData(function(domains){
                    if (allowExistingMsAccountValue && domains.length > 0){
                        addAZUREDomains(domains);
                        $("#azure_accountTypeSelect").show();
                    } else {
                        $("#azure_accountTypeSelect").hide();
                    }
                    var azureMode = (allowExistingMsAccountValue && domains.length > 0)? azureModes.useExisting: azureModes.createNew;
                    showForm(azureMode);
                });
    {/if}
            });
            var headType;
            var getHeadResourceType = function(resourceType, callback){
                if(headType){
                    callback(headType);
                    return;
                }
                var defaultSchema = { id: resourceType, properties: { initial_subdomain: {}}};
                $.ajax({ url: '/aps/2/resources/' + app.aps.id, headers: { 'APS-Token': apsToken }}).done(function(appDataFull){
                    $.ajax({ url: appDataFull.aps.package.href + "/schemas/tenant.schema", headers: { 'APS-Token': apsToken, contentType: 'application/json' }}).done(function(tenantSchemaResult){
                        try{
                            headType = JSON.parse(tenantSchemaResult);
                            callback(headType);
                        }catch(ex){
                            console.log(ex);
                        }
                    }).fail(function(){
                        headType = defaultSchema;
                        callback(headType);
                    });
                });
            };

            var processAzureOnValid = function(domain){
                getHeadResourceType("http://www.odin.com/app/azure-csp/tenant/1.1", function(headResourceType){
                    var azureTenant = { aps: { "type":headResourceType.id}, domain_prefix: domain};
                    enableNext();
                    $('#prov_{$azureTenantId}').val(JSON.stringify(azureTenant));
                });
            };

            var azureModes = { createNew: "createNew", useExisting: "useExisting"};

            var onAccountTypeSelectorChange = function(value){
                if (value === azureModes.createNew) {
                    $("#azure_createNewCtr").show();
                    $("#visible_{$azureTenantId}").focus();
                    $("#visible_{$azureTenantId}").change();
                    $("#azure_useExistingCtr").hide();
                    $("#visible_{$azureTenantId}").attr('_required',"1");
                    resetAzureSubdomain();
                } else{
                    $("#azure_createNewCtr").hide();
                    $("#visible_{$azureTenantId}").attr('_required',"0");
                    $("#azure_useExistingCtr").show();
                    $("#azure_existingId").focus();
                    setAzureSubdomain();
                }
            };

            $('input[name="azuremode"]').on('change', function() { onAccountTypeSelectorChange(this.value);});

            var getAZUREModeSelected = function(){
                return $('input[name="azuremode"]:checked')[0].value;
            };

            var skipCreateNewDomainCustomValidators = function(){
                return allowExistingMsAccountValue && getAZUREModeSelected() !== azureModes.createNew;
            };

            SW.Widget.azuresubdomain = function (widget) {
                this.widget = widget;
                this.validationStage = 0;
                var w = this;
                var validateSubdomainNameCharacters = function(field){
                    if (skipCreateNewDomainCustomValidators()){
                        return true;
                    }
                    var fieldValue = field.value.trim();
                    var pat = /[^0-9A-Za-z]/g;
                    if(!pat.test(fieldValue)){
                        return true;
                    }else{
                        var result = fieldValue.match(pat);
                        var u = { };
                        var a = [ ];
                        for(var i = 0, l = result.length; i < l; ++i){
                            if(u.hasOwnProperty(result[i])) {
                                continue;
                            }
                            a.push("\'" + result[i] + "\'" );
                            u[result[i]] = 1;
                        }
                        throw new SW.FieldError("{$smarty.session.LANG.ONLY_LATIN_LETTERS_AND_NUMBERS_ARE_ALLOWED} " + a, field);
                    }
                };

                var validateSubdomainNameLength = function(field){
                    if (skipCreateNewDomainCustomValidators()){
                        return true;
                    }
                    var fieldValue = field.value.trim();
                    if(fieldValue.length > 0 && fieldValue.length < 26){
                        return true;
                    }else{
                        throw new SW.FieldError("{$smarty.session.LANG.THE_SUBDOMAIN_NAME_SHOULD_NOT_BE_LONGER_THAN_25_CHARACTERS}", field);
                    }
                };

                var checkSubdomainAvailableByYahoo = function(subdomain, field){
                    var url = "https://login.windows.net/"+subdomain+".onmicrosoft.com/FederationMetadata/2007-06/FederationMetadata.xml";
                    jQuery.getJSON("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url='" + encodeURIComponent(url) +
                        "'&format=json&callback=?", (function(inValue){
                            return function(data){
                                var widget = document.getElementById(field.id);
                                if(widget.value == inValue){
                                    w.validationStage = data.query.count === 0 ? 3 : 2;
                                    w.validateAndRender(w.widget);
    {if $isAnonymous}
                                    if (data.query.count !== 0){
                                        processLoginLinks();
                                    }
    {/if}
                                }
                            };
                        })(subdomain)
                    );
                };

                var validateDomainAvailability  = function(field){
                    if (skipCreateNewDomainCustomValidators()){
                        return true;
                    }
                    var subdomain = field.value.trim();
                    if (subdomain.length === 0)
                        return;
                    switch(w.validationStage){
                        case 0:
                            checkSubdomainAvailableByYahoo(subdomain, field);
                            w.validationStage = 1;// lack of break is intentional
                        case 1:
                            $("#info__prov_{$azureTenantId}").html("{$smarty.session.LANG.CHECKING_FOR_THE_SUBDOMAIN_AVAILABILITY}");
                            return false;
                        case 2:
                            $("#info__prov_{$azureTenantId}").empty();
                            {if $isAnonymous}
                                var validatedSubdomain = field.value.trim();
                                var alreadyTakenMessage = "{$smarty.session.LANG.THIS_SUBDOMAIN_IS_ALREADY_TAKEN_ANONYMOUS}".replace("__sudomain__", validatedSubdomain);
                            {else}
                                var alreadyTakenMessage = "{$smarty.session.LANG.THIS_SUBDOMAIN_IS_ALREADY_TAKEN}";
                            {/if}
                            throw new SW.FieldError(alreadyTakenMessage, field);
                        case 3:
                            $("#info__prov_{$azureTenantId}").css('color', 'green');
                            $("#info__prov_{$azureTenantId}").html("{$smarty.session.LANG.AZURE_THE_SPECIFIED_SUBDOMAIN_IS_AVAILABLE}");
                            processAzureOnValid(subdomain);
                            return true;
                        case 4:
                            $("#info__prov_{$azureTenantId}").empty();
                            throw new SW.FieldError("{$smarty.session.LANG.VALIDATION_FAILED_WITH_THE_INTERNAL_ERROR}", field);
                    }
                };
                this.customValidators = [validateSubdomainNameLength, validateSubdomainNameCharacters, validateDomainAvailability];

                var subscribeOnSubmit = function(){
                    var form = document.forms["formEdit"];
                    var customSubmit = function(e){
                        if (w.validationStage === 1){
                            e.stop();
                        }
                    };
                    SW.Signal.connect(form, "onsubmit", null, customSubmit);
                };
                subscribeOnSubmit();
            };

            SW.Widget.azuresubdomain.prototype = SW.Widget.text.prototype;
            function checkDomainName(inputElement) {
                globalSubDomainName = $('#visible_{$azureTenantId}').val();

                $("#info__prov_{$azureTenantId}").empty();
                disableNext();
                var widget = document.getElementById("widget__prov_{$azureTenantId}");
                widget.jsValidator.validationStage = 0;
                SW.Validate.field(inputElement, "widget__prov_{$azureTenantId}");
            }

            $("#visible_{$azureTenantId}").on('keypress', function(e) { // Handle 'Enter' keypress in subdomain field for new MS Account
                if(e.keyCode === 13){
                    checkDomainName(document.getElementById('visible_{$azureTenantId}'));
                }
            });

            $("#visible_{$azureTenantId}" ).on('input propertychange', function() {
                var subdomainNameControl = $('#visible_{$azureTenantId}').val();
                if(globalSubDomainName === subdomainNameControl){ // Element is not changed, possible Ctrl+A or/and Ctrl+C pressed
                    return true;
                }
                var errorField = $("#error__prov_{$azureTenantId}");
                var infoField = $("#info__prov_{$azureTenantId}");
                infoField.css('color', '#a3aeba');

                globalSubDomainName = undefined;
                disableNext();
                if(subdomainNameControl.length == 0){
                    infoField.empty();
                    errorField.html("{$smarty.session.LANG.ERROR_BLANK_VALUE}");
                    errorField.show();
                }
                if(subdomainNameControl.length > 0){
                    errorField.empty();
                    infoField.html("{$smarty.session.LANG.THE_SUBDOMAIN_NAME_CAN_CONTAIN_ONLY_LATIN_ALPHABET_SYMBOLS_AND_DIGITS}");
                }
            });

        </script>

        <div id="azure_price_list_area" class="AZURE">
            <table class="tableHeader" cellpadding="0" cellspacing="0" id="azure_price_list"> <tbody>
                <tr> <td class="tableHeaderTD"> <span class="BlockName">{$smarty.session.LANG.AZURE_PRICES_DETAILED_PRICING_INFORMATION}</span> </td> </tr>
                <tr> <td class="tableContentTD">
                    <div id="price_list_error" style="display:none; border-redius: 10px; background-color: #ffe8ea; color: #d92231; padding: 15px;">
                        <span id="price_list_error_text"></span>
                    </div>
                    <div id="price_list"></div>
                    <div id="price_list_loading" style="display: none; width: 100%; text-align: center;">
                        <span class="azureWait">{$smarty.session.LANG.AZURE_PRICES_LOADING_PRICING_INFORMATION}</span>
                    </div>
                </td></tr>
            <tbody></table>
        </div>

        <script language=javascript>
            var apsToken = '{$token}';
            var applicationId = "", accountId = "", serviceTemplateId = "", priceConfigurationId = "", priceListName = "priceList", priceListFilterName = priceListName + "-search", priceListTableName = priceListName + "-list";
            var currencyTemplate = "";
            var dataFilter = { categories: [], regions: {}, selectedCategory: "", selectedRegion: "", newRequestRequire: true, sort: { attribute: "name", descending: false }};
            var dataResources = [];

            var updateError = function(show, text){
                if (show){
                    $("#price_list_error").show();
                    $("#price_list_loading").hide();
                    if (text){
                        $("#price_list_error_text").html('').append(text);
                    }
                } else {
                    $("#price_list_error").hide();
                }
            };

            var addOptionsToSelect = function(select, options){
                var selectedValue = "";
                for(var i = 0; i < options.length; i++){
                    var option = options[i];
                    var opt = document.createElement("option");
                    opt.innerHTML = option.label;
                    opt.value = option.value;

                    if (option.selected){
                        selectedValue = option.value;
                        opt.selected = "selected";
                    }
                    select.add(opt);
                }
                return selectedValue;
            };

            var replaceOptionsInSelect = function(select, start, options){
                while (select.length > start){
                    select.remove(start);
                }
                return addOptionsToSelect(select, options);
            };

            var onCategoryChange = function(){
                var selectCategory = document.getElementById(priceListFilterName + "-select-category");
                dataFilter.selectedCategory = selectCategory.value;
                var selectRegion = document.getElementById(priceListFilterName + "-select-region");
                var region = replaceOptionsInSelect(selectRegion, 0, dataFilter.regions[selectCategory.value]);
                dataFilter.selectedRegion = region;
                dataFilter.newRequestRequire = true;
            };

            var onRegionChange = function(){
                var selectRegion = document.getElementById(priceListFilterName + "-select-region");
                dataFilter.selectedRegion =  selectRegion.value;
                dataFilter.newRequestRequire = true;
            };

            var createFilterSelect = function(name, options){
                var select = document.createElement("select");
                select.id = priceListFilterName + "-select-" + name;
                addOptionsToSelect(select, options);
                if (name.toLowerCase() === "category"){
                    select.onchange = onCategoryChange;
                } else if (name.toLowerCase() === "region"){
                    select.onchange = onRegionChange;
                }
                return select;
            };

            var createFilterElement = function(name, namePostfix, options){
                var li = document.createElement("li");
                li.setAttribute("style", "display:inline-block; list-style:none; padding: 1px 0; vertical-align: bottom;");

                var div = document.createElement("div");
                div.setAttribute("style", "display:block;");
                li.appendChild(div);

                var spanName = document.createElement("span");
                spanName.setAttribute("style", "display: block; padding: 5px 20px 0 0; font-weight: bold;");
                spanName.innerHTML = name;
                div.appendChild(spanName);

                var spanElem = document.createElement("span");
                spanElem.setAttribute("style", "display: block; padding: 5px 20px 0 0");
                div.appendChild(spanElem);

                spanElem.appendChild(createFilterSelect(namePostfix, options));

                return li;
            };

            var createFilterButton = function(name, onclick){
                var btn = document.createElement("button");
                btn.className = "buttonContinue SWbutton";
                btn.setAttribute("style", "margin-top: 22px; vertical-align: top;");
                btn.innerHTML = name;
                btn.onclick = function() { onclick(); return false; };
                return btn;
            };

            var getUnspecified = function(){
                return { value: "UNSPECIFIED", label: "{$smarty.session.LANG.AZURE_PRICES_UNSPECIFIED}"};
            };

            var isUnspecified = function(key){
                return key === getUnspecified().value;
            };

            var getUnspecifiedPosibile = function(val){
                return isUnspecified(val) ? getUnspecified().label : val;
            };

            var sortUnspecifiedPosibile = function(a, b){
                if (isUnspecified(a.value)) return 1;
                if (isUnspecified(b.value)) return -1;
                return a.label.localeCompare(b.label);
            };

            var processSummary = function(summary){
                summary.sort(function(a,b){
                    return a.name.localeCompare(b.name);
                });

                var selectedCategory = summary[0].name;

                var mapRegions = function(regions){
                    if (regions.length === 0) return [];
                    var result = [];
                    for(var i = 0; i < regions.length; i++){
                        result.push({
                            label: getUnspecifiedPosibile(regions[i]),
                            value: regions[i]
                        });
                    }
                    return result;
                };

                var specifiedRegions = {};
                var specifiedCategories = [];

                for(var i = 0; i < summary.length; i++){
                    var category = summary[i];
                    if (specifiedRegions.hasOwnProperty(category.name)){
                        if (specifiedRegions[category.name].length === 0){
                            specifiedRegions[category.name] = mapRegions(category.regions);
                        } else {
                            var addRegions = [];
                            for(var y = 0; y < category.regions.length; y++){
                                var region = category.regions[y];
                                if (specifiedRegions[category.name].indexOf(region) === -1){
                                    addRegions.push(region);
                                }
                            }
                            specifiedRegions[category.name] = specifiedRegions[category.name].concat(mapRegions(addRegions));
                            for(var x = 0; x < specifiedRegions[category.name].length; x++){
                                var item = specifiedRegions[category.name][i];
                                item.selected = false;
                            }
                        }
                    } else {
                        specifiedRegions[category.name] = mapRegions(category.regions);
                    }

                    specifiedRegions[category.name].sort(sortUnspecifiedPosibile);
                    specifiedRegions[category.name][0].selected = true;

                    specifiedCategories.push({ label: category.name, value: category.name, selected: category.name === selectedCategory });
                }

                dataFilter.categories = specifiedCategories;
                dataFilter.regions = specifiedRegions;
                dataFilter.selectedCategory = selectedCategory;
                dataFilter.selectedRegion = specifiedRegions[selectedCategory][0].value;
            };

            var sortBy = function(param, descending){
                dataFilter.sort.attribute = param;
                dataFilter.sort.descending = descending;
                applySearchFilter();
            };

            var createTableHeaders = function(tr, headers){
                for(var i = 0; i <headers.length; i++){
                    var field = headers[i].field;

                    var th = document.createElement("th");
                    th.setAttribute("style", "border-color: #ccc; border-style: solid; border-width: 1px; padding: 6px 8px; height: 16px; vertical-align: top; background: #ccc; text-align: left;");
                    tr.appendChild(th);

                    var link = document.createElement("a");
                    link.setAttribute("style", "color: #333; text-decoration: underline;");
                    link.href = 'javascript: sortBy("' + field + '", ' + (dataFilter.sort.attribute === field ? !dataFilter.sort.descending : false) + ');';
                    link.innerHTML = headers[i].value;
                    th.appendChild(link);
                }
            };

            var getValueWithCurrency = function(value){
                return currencyTemplate.replace(/\x7bamount\x7d/, value);
            };

            var getFullName = function(name, subcategory){
                return subcategory && !isUnspecified(subcategory) ? subcategory + " / " + name : name;
            };

            var prepareTooltipText = function(tieredRates, unit){
                var captionText = "{$smarty.session.LANG.AZURE_PRICES_TIERED_PRICE_PER_UNIT}".replace("__unit__", unit);
                var caption = "<span><b>" + captionText + "</b></span>";
                var body = "";
                for(var i = 0; i < tieredRates.length; i++){
                    var price = tieredRates[i];
                    var content = "{$smarty.session.LANG.AZURE_PRICES_TIERED_PRICE}".replace("__quantity__", price.quantity).replace("__unit__", unit).replace("__price__", getValueWithCurrency(price.rate));
                    body += "<br/><span>" + content + "</span>";
                }
                return caption + body;
            };

            var renderRate = function(td, resource){
                var value = getValueWithCurrency(resource.rate);
                var spanValue = document.createElement("span");
                spanValue.innerHTML = value;
                td.appendChild(spanValue);

                var spanImg = document.createElement("span");
                spanImg.setAttribute("class", "azureTieredRate");

                var tooltipId = "tiered_rate_tooltip_" + resource.id;
                spanImg.onmouseover = function(){
                    var div = document.getElementById(tooltipId);
                    if (!div){
                        div = document.createElement("div");
                        div.id = tooltipId;
                        div.innerHTML = prepareTooltipText(resource.tiered_rates, formatUnit(resource.unit));
                        div.setAttribute("style", "display: block; margin-left: 30px; padding: 5px; position: absolute; z-index: 1000; background: #ffc; box-shadow: 0 3px 5px rgba(0,0,0,.2);");
                        td.appendChild(div);
                    } else {
                        div.style["display"] = "block";
                    }
                };
                spanImg.onmouseout = function(){
                    var div = document.getElementById(tooltipId);
                    if (div){ div.style["display"] = "none";}
                };
                td.appendChild(spanImg);
            };

            var renderValue = function(prop, resource){
                var value = resource[prop];
                switch (prop) {
                    case "name": return getFullName(value, resource.subcategory);
                    default: return value;
                    case "rate": return getValueWithCurrency(value);
                    case "included_quantity": return value + " " + formatUnit(resource.unit);
                }
            };

            var formatUnit = function(unit) {
                if (unit.match(/[\d]/)){ // Unit of measure
                    return "(" + unit + ")";
                }
                return unit;
            };

            var getCellStyle = function(type){
                var style = "color: #333; border-color: #ccc; border-style: solid; padding: 6px 8px; height: 16px; vertical-align: top; text-align: left;";
                switch (type) {
                    case "first": style += " border-width: 1px 0 1px 1px;"; break;
                    case "end": style += " border-width: 1px 1px 1px 0;"; break;
                    case "middle":
                    default: style += " border-width: 1px 0;";
                }
                return style;
            };

            var createTableCells = function(resource, tr, headers){
                for(var i = 0; i < headers.length; i++){
                    var field = headers[i].field;
                    var td = document.createElement("td");
                    td.setAttribute("style", getCellStyle(headers[i].type));

                    if (field === "rate" && resource.tiered_rates && resource.tiered_rates.length > 0){
                        renderRate(td, resource);
                    } else {
                        td.innerHTML = renderValue(field, resource);
                    }
                    tr.appendChild(td);
                }
            };

            var createResourceTable = function(tableId, resources){
                var table = document.createElement("table");
                table.id = tableId;
                table.setAttribute("style", "border-color: #ccc; border: 1px solid; border-collapse: collapse; width: 100%; border-spacing: 0; display: table; margin-top: 10px;");

                var tbody = document.createElement("tbody");
                tbody.setAttribute("style", "display: table-row-group; vertical-align: middle; border-color: inherit;");
                table.appendChild(tbody);

                var headersRow = document.createElement("tr");
                headersRow.setAttribute("style", "display: table-row; vertical-align: inherit; border-color: inherit;");
                tbody.appendChild(headersRow);

                var headers = [
                    { field: "name", value: "{$smarty.session.LANG.AZURE_PRICES_TABLE_HEADER_RESOURCE_NAME}", type: "first"},
                    { field: "included_quantity", value: "{$smarty.session.LANG.AZURE_PRICES_TABLE_HEADER_INCLUDED}", type: "middle"},
                    { field: "rate", value: "{$smarty.session.LANG.AZURE_PRICES_TABLE_HEADER_PRICE_PER_UNIT}", type: "end"}
                ];

                createTableHeaders(headersRow, headers);

                for(var i = 0; i < resources.length; i++){
                    var tr = document.createElement("tr");
                    tr.setAttribute("style", "display: table-row; vertical-align: inherit; border-color: inherit; background-color: " + ((i & 1)? "#fff;" : "#eee;"));
                    createTableCells(resources[i], tr, headers);
                    tbody.appendChild(tr);
                }

                return table;
            };

            var getPriceList = function(category, region, callback){
                var priceListQuery = "?account_id=" + encodeURIComponent(accountId);
                priceListQuery += "&category=" + encodeURIComponent(category);
                priceListQuery += "&region=" + encodeURIComponent(region);
                priceListQuery += "&service_template_id=" + encodeURIComponent(serviceTemplateId);
                priceListQuery += "&price_configuration_id=" + encodeURIComponent(priceConfigurationId);
                priceListQuery += "&locale=" + encodeURIComponent("{$smarty.session.LanguageID}");
                jQuery.ajax({ url: '/aps/2/resources/' + applicationId + '/preliminary_price_list' + priceListQuery, headers: { 'APS-Token': apsToken }}).done(function(data) {
                    callback(data);
                }).fail(function(xhr, s, ex) {
                    updateError(true, getErrorMessage(xhr));
                });
            };

            var getSortByColumn = function(prop, descending){
                switch (prop) {
                    case "name":
                        return function(a,b){
                            return getFullName(a.name, a.subcategory).localeCompare(getFullName(b.name, b.subcategory)) * (descending ? -1 : 1);
                        };
                    default:
                        return function(a,b){
                            return a[prop].localeCompare(b[prop]) * (descending ? -1 : 1);
                        };
                    case "rate":
                    case "included_quantity":
                        return function(a,b){
                            return (a[prop] - b[prop]) * (descending ? -1 : 1);
                        };
                }
            };

            var filterResources = function(resources){
                if (dataFilter.sort){
                    var propName = dataFilter.sort.attribute;
                    var descending = dataFilter.sort.descending;
                    resources.sort(getSortByColumn(propName, descending));
                }
                if (dataFilter.paging){
                    var oldResults = resources;
                    resources = resources.slice(dataFilter.paging.start, dataFilter.paging.start + dataFilter.paging.count);
                    resources.total = oldResults.length;
                }

                return resources;
            };

            var applySearchFilter = function(){
                var divList = document.getElementById(priceListTableName);
                var id = priceListTableName + "-content";
                var content = document.getElementById(id);
                if (content){
                    divList.removeChild(content);
                }

                var callback = function(priceList){
                    if (priceList.currency && priceList.meters) {
                        currencyTemplate = priceList.currency.pattern.replace(/\x7bsign\x7d/, priceList.currency.symbol);
                        dataResources = priceList.meters;
                        dataFilter.newRequestRequire = false;
                    } else {
                        dataResources = priceList;
                    }

                    var filtered = filterResources(dataResources);
                    if (filtered.length > 0){
                        content = createResourceTable(id, filtered);
                    } else {
                        content = document.createElement("span");
                        content.innerHTML = "{$smarty.session.LANG.AZURE_PRICES_NO_ITEMS_FOUND}";
                    }
                    divList.appendChild(content);
                    $("#price_list_loading").hide();
                    updateError(false);
                };

                if (dataFilter.newRequestRequire) {
                    $("#price_list_loading").show();
                    getPriceList(dataFilter.selectedCategory, dataFilter.selectedRegion, callback);
                } else {
                    callback(dataResources);
                }
            };

            var createFilter = function(summary, divId){
                var div = document.getElementById(divId);
                var divBox = document.getElementById(priceListFilterName);
                if (divBox){
                    div.removeChild(divBox);
                }

                divBox = document.createElement("div");
                divBox.id = priceListFilterName;
                divBox.setAttribute("style", "padding: 6px 10px 9px; border-style: solid; border-width: 1px; display: block; border-color: #ccc; background: #eee;");

                var form = document.createElement("form");
                form.setAttribute("style", "display:block;");
                divBox.appendChild(form);

                var ul = document.createElement("ul");
                ul.setAttribute("style", "display:inline-block; list-style:none;");
                form.appendChild(ul);

                processSummary(summary);

                ul.appendChild(createFilterElement("{$smarty.session.LANG.AZURE_PRICES_FILTER_SELECT_CATEGORY}", "category", dataFilter.categories));
                ul.appendChild(createFilterElement("{$smarty.session.LANG.AZURE_PRICES_FILTER_SELECT_REGION}", "region", dataFilter.regions[dataFilter.selectedCategory]));

                form.appendChild(createFilterButton("{$smarty.session.LANG.AZURE_PRICES_FILTER_BUTTON_SEARCH}", applySearchFilter));

                div.appendChild(divBox);
            };

            var createTable = function(divId){
                var div = document.getElementById(divId);
                var divList = document.getElementById(priceListTableName);
                if (divList){
                    div.removeChild(divList);
                }

                divList = document.createElement("div");
                divList.id = priceListTableName;
                divList.setAttribute("style", "margin-bottom: 10px; width: 100%; overflow-x: auto; overflow-y: hidden;");
                div.appendChild(divList);

                applySearchFilter();
            };

            var createPriceListWidget = function(summary, divId){
                createFilter(summary, divId);
                createTable(divId);
            };

            var getResourcesData = function(url, callback, emptyDataErrMsg){
                jQuery.ajax({ url: '/aps/2/resources/' + url, headers: { 'APS-Token': apsToken }}).done(function(data) {
                    if (data.length > 0){
                        callback(data);
                    } else {
                        updateError(true, emptyDataErrMsg);
                    }
                }).fail(function(xhr, s, ex) {
                    updateError(true, getErrorMessage(xhr));
                });
            };

            var getPriceListSummary = function(appId, callback){
                var url = appId + "/price_list_summary?locale=" + encodeURIComponent("{$smarty.session.LanguageID}");
                getResourcesData(url, callback, "{$smarty.session.LANG.AZURE_PRICES_LOADING_FAILED}");
            };

            var processPriceList = function(){
                $("#price_list_loading").show();
                getResourcesData("", function(resources){
                    for (var i = 0; i < resources.length; i++){
                        var resource = resources[i];
                        if (!accountId && resource.aps.type.indexOf("pa/account") !== -1){
                            accountId = resource.aps.id;
                        } else if (!applicationId && resource.aps.type.indexOf("azure-csp/application") !== -1){
                            applicationId = resource.aps.id;
                        } else if (!serviceTemplateId && resource.aps.type.indexOf("pa/serviceTemplate") !== -1){
                            serviceTemplateId = resource.aps.id;
                        } else if (!priceConfigurationId && resource.aps.type.indexOf("azure-csp/priceConfiguration") !== -1){
                            priceConfigurationId = resource.aps.id;
                        }
                    }
                    if (!accountId){
                        updateError(true, "{$smarty.session.LANG.AZURE_PRICES_LOADING_FAILED}");
                        return;
                    }
                    if (!applicationId){
                        updateError(true, "{$smarty.session.LANG.AZURE_PRICES_LOADING_FAILED}");
                        return;
                    }
                    getPriceListSummary(applicationId, function(summary){
                        createPriceListWidget(summary, "price_list");
                    });
                }, "{$smarty.session.LANG.AZURE_PRICES_LOADING_FAILED}");
            };

            processPriceList();
        </script>
    {/if}
<!-- end of CUSTOMIZATION -->
{else}
    {GetCustomTemplate name="./provision.tpl" assign="file" }
    {include file=$file }
{/if}
<!--
	end of azure_provision.tpl
-->