<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/topcoat-desktop-dark.min.css" />
    <link id="hostStyle" rel="stylesheet" href="css/styles.css" />
    <title></title>
</head>

<body class="hostElt" oncontextmenu="return false;" ng-app="ILMApp" ng-controller="ILMAppController" ng-init="onLoad()">

    <div id="tab-selector">
        <select class="topcoat-button--large extra-extra-margin full-width" ng-model="currentTab" ng-options="t.name for t in TABS" ng-disabled="currentTool != TOOL_ID.TOOL_MENU"></select>
    </div>
    <div id="content" ng-show="currentTab.id == TAB_ID.LUMINOSITY_MASKS || (currentTab.id == TAB_ID.SATURATION_MASKS && saturationMasksEnabled)">
        <div id="menu" class="content-element" ng-show="currentTool == TOOL_ID.TOOL_MENU">
            <button class="topcoat-button--large hostFont full-width" ng-click="showHighMaskDialog()">新建 {{currentTab.labels.high}} 蒙板</button>
            <button class="topcoat-button--large hostFont full-width" ng-click="showMidMaskDialog()">新建 {{currentTab.labels.mid}} 蒙板</button>
            <button class="topcoat-button--large hostFont full-width" ng-click="showLowMaskDialog()">新建 {{currentTab.labels.low}} 蒙板</button>
            <button class="topcoat-button--large hostFont full-width extra-margin" ng-click="showZoneMaskDialog()">新建 {{currentTab.labels.zone}} 蒙板</button>
        <button class="topcoat-button--large hostFont full-width extra-margin" ng-click="showFullMaskDialog()">新建全 {{currentTab.labels.full}} 蒙板</button>
        </div>
        <div id="dialog-color-picker" class="content-element" ng-show="currentTool == TOOL_ID.TOOL_ZONE">
            <div class="text-center">
                <button class="hostButton hostFont" ng-click="onColorPicker()">从颜色选择区域</button>
            </div>
        </div>
        <div id="dialog-highlight-mask" class="content-element" ng-show="currentTool != TOOL_ID.TOOL_MENU && currentTool != TOOL_ID.TOOL_FULL">
            <p class="hostFont">
                <div ng-show="currentTool == TOOL_ID.TOOL_HIGH">{{currentTab.labels.high}}</div>
                <div ng-show="currentTool == TOOL_ID.TOOL_MID">{{currentTab.labels.mid}}</div>
                <div ng-show="currentTool == TOOL_ID.TOOL_LOW">{{currentTab.labels.low}}</div>
                <div ng-show="currentTool == TOOL_ID.TOOL_ZONE">{{currentTab.labels.zone}}</div>
            </p>
            <input id="tool-slider" type="range" min="0" max="99" step="1" value="50" class="topcoat-range" ng-model="toolSliderValue" />
            <div class="full-width extra-margin">
                <span class="label-left">最小</span>
                <span class="label-right">最大</span>
            </div>
        </div>
        <div id="dialog-adjust-buttons" class="text-center" ng-show="currentTool != TOOL_ID.TOOL_MENU && currentTool != TOOL_ID.TOOL_FULL">
            <button class="hostButton hostFont" ng-click="onLtLt()">&lt;&lt;</button>
            <button class="hostButton hostFont" ng-click="onLt()">&lt;</button>
            <button class="hostButton hostFont" ng-click="onGt()">&gt;</button>
            <button class="hostButton hostFont" ng-click="onGtGt()">&gt;&gt;</button>
        </div>
        <div id="dialog-zone-width-mask" class="content-element" ng-show="currentTool == TOOL_ID.TOOL_ZONE">
            <p class="hostFont">选区调整</p>
            <input id="zones-width-slider" type="range" min="5" max="35" step="1" value="20" class="topcoat-range" ng-model="toolFineSliderValue" />
            <div class="full-width extra-margin">
                <span class="label-left">最小</span>
                <span class="label-right">最大</span>
            </div>
        </div>
        <br>
        <div id="dialog-actions" class="content-element" ng-show="currentTool != TOOL_ID.TOOL_MENU">
            <button class="topcoat-button--large hostFont full-width" ng-click="onSelection()">选区</button>
            <button class="topcoat-button--large hostFont full-width" ng-click="onChannel()">选区载入通道</button>
            <button class="topcoat-button--large hostFont full-width" ng-click="onCurves()">新建曲线调整图层</button>
            <button class="topcoat-button--large hostFont full-width" ng-click="onLevels()">新建色阶调整图层</button>
            <button class="topcoat-button--large hostFont full-width" ng-click="onHueSaturation()">新建色相/饱和度图层</button>
            <button class="topcoat-button--large hostFont full-width extra-margin" ng-click="onCancel()">取消</button>
        </div>
        <div id="help" class="hostFont content-element" style="cursor:pointer;">
            <button class="topcoat-button--large hostFont full-width" ng-click="onShowOnlineHelp()">在线帮助</button>
        </div>
    </div>
    <div id="support" ng-show="currentTab.id == TAB_ID.SUPPORT">
        <p class="bigger-font">
            ILM面板是免费的，没有使用限制。
        </p>
    </div>
    <div id="no-saturation" class="bigger-font text-align-justified extra-extra-margin" ng-show="currentTab.id == TAB_ID.SATURATION_MASKS && saturationMasksEnabled == false">
        饱和度蒙板仅支持Photoshop CC (2014)及更高版本。
    </div>
    <div id="about" class="hostFont content-element" style="cursor:pointer;">
        <a href="" onClick="onShowHomepage()">&copy; Sven Stork
        <br>www.svenstork.com</a>
    </div>
    
    <script src="js/libs/CSInterface.js"></script>
    <!--<script src="js/libs/jquery-2.0.2.min.js"></script>-->
    <script src="js/libs/angular.min.js"></script>
    
    <script src="js/themeManager.js"></script>
    <script src="js/main.js"></script>
</body>

</html>