<!DOCTYPE html>
<html style="width: 100%; height: 100%; overflow:hidden;" ng-app="AdobeInstaller">

<head>
    <title>Adobe Installer</title>
    <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	 
    <link rel="stylesheet" type="text/css" href="clean.css">
    <link rel="stylesheet" type="text/css" href="main.css">
	
</head>

<body id="mainBody" onload="onLoadComplete()" ng-controller="MainController as mainCtrl">
    <div class="container">

        <div id="spinnerScreen" class="screen" ng-show="mainCtrl.activeScreen == 'spinnerScreen'">
            <div class="spinnerContent centerMid">
                <img id="spinnerScreenImage" class="imageSpinner" ng-src="{{ mainCtrl.imageMap.spinner }}"/>
                <span id="spinnerScreenText" class="spinnerScreenText">{{ mainCtrl.spinnerScreenText }}</span>
            </div>
        </div>
        
        <div class="screen consistantPad" id="webSSOWelcomeScreen"  ng-show="mainCtrl.activeScreen == 'webSSOWelcomeScreen'">
            <div class="screenHead">
                <table cellspacing="0">
                    <tr>
                        <td>
                            <img id="webSSOWelcomeScreenIcon" ng-src="{{ mainCtrl.imageMap.productIcon }}"/>
                        </td>
                        <td>
                            <div id="webSSOWelcomeScreenTitle" class="screenTitle" ></div>
                        </td>
                    </tr>
                </table>
            </div>
            <h3 id="webSSOWelcomeScreenHeader" class="screenHeader">{{ Utils.getLocalizedString('WebSSOWelcomeScreenHeader') }}</h3>
            <div id="WebSSOWelcomeScreenText1" class="content">{{ Utils.getLocalizedString('WebSSOWelcomeScreenText1') }}</div>
            
            <div class="text-center">
                <input id="webSSOWelcomeContinueButton" class="btn btn-primary" type="button" value="{{ Utils.getLocalizedString('Continue') }}" ng-click='mainCtrl.webSSOWelcomeContinueButtonClick()' style='float:left'/>
            </div>
        </div>
		
        <div class="screen consistantPad welcomeScreenClass" id="welcomeScreen" ng-show="mainCtrl.activeScreen == 'welcomeScreen'">
            <img class="productImage" ng-src="{{ mainCtrl.imageMap.productIcon }}" />
            <div id="welcomeScreenHeader" class="screenHeader"></div>
            <div class="verticalAlignOuterDiv">
                <div class="verticalAlignInnerDiv">
                    <div id="welcomeScreenContent" class="welcomeContent" ></div>
                    <div>
                        <input id="welcomeSignInButton" class="btn btn-welcome btn-primary" tabindex="1" type="button" value="{{ Utils.getLocalizedString('WelcomeSignIn') }}" ng-click='mainCtrl.welcomeSignInButtonClick()' />
                        <input id="welcomeSignUpButton" class="btn btn-welcome btn-white" tabindex="2" type="button" value="{{ Utils.getLocalizedString('WelcomeSignUp') }}" ng-click='mainCtrl.welcomeSignUpButtonClick()' />
                    </div>
                    <div class="centerContentDiv" ng-hide="mainCtrl.socialProviders == null">
                        <span class="welcomeContent centerContent">{{ Utils.getLocalizedString('WelcomeTextOr') }}</span>
                    </div>
                    <div class="socialProviderDiv">
                        <input ng-repeat="socialProvider in mainCtrl.socialProviders" type="button" class="btn btn-socialProvider"
                               ng-class="socialProvider.providerName"
                               ng-click='mainCtrl.welcomeSocialSignInButtonClick(socialProvider.providerName)'
                               value="{{ Utils.titleCase(socialProvider.providerName) }}" />

                    </div>
                </div>
            </div>
        </div>
		
		<div class="screen consistantPad welcomeScreenClass" id="testAppWelcomeScreen" ng-show="mainCtrl.activeScreen == 'testAppWelcomeScreen'">
            <img class="productImage" ng-src="{{ mainCtrl.imageMap.productIcon }}" />
			<div class="screenHeader">Test Application</div>
       		<div style="margin-top:100px;">
					<span class="topLabel" style='float:left;'>Enter Content URL:</span>
					<textarea name="textarea" tabindex="1" id="contentUrl" cols="30" rows="5" style="height:60px" ng-model="mainCtrl.contentURL"class="userInputFilled" placeHolder="Content Url" autocomplete="off"></textarea>
					<div>
						<a href="" class="checkBoxAnchor" ng-click="mainCtrl.signInTestApp = !mainCtrl.signInTestApp;"  tabindex="2">
							<img class="checkboxImage" ng-src="{{ mainCtrl.imageMap.checkFull }}" ng-show="mainCtrl.signInTestApp" />
							<img class="checkboxImage" ng-src="{{ mainCtrl.imageMap.checkEmpty }}" ng-hide="mainCtrl.signInTestApp"/>
							<span id="signInTestAppText">Click to Sign In</span>
						</a>
								
					</div>
					<div id="testAppEnvironmentDiv" ng-show="mainCtrl.signInTestApp">
						<span class="topLabel" style='float:left;'>Select Environment:</span>
						<select id = "testAppEnvironment" name="environment">
							<option value="PRODUCTION">PRODUCTION</option>
							<option value="STAGE">STAGE</option>
							<option value="DEV1">DEV1</option>
							<option value="DEV2">DEV2</option>
							<option value="QA1">QA1</option>
							<option value="QA2">QA2</option>
						</select>
					</div>
				<input id="testAppContinueButton" tabindex="2" class="btn btn-primary" type="button" value="{{ Utils.getLocalizedString('Continue') }}" ng-click='mainCtrl.testAppContinueButtonClick()' style='top:150px;' ng-disabled="!mainCtrl.contentURL">
            </div>
			
        </div>

        <div class="screen consistantPad" id="surveyScreen" ng-show="mainCtrl.activeScreen == 'surveyScreen'" ng-mousedown="mainCtrl.surveyMouseDown($event)">
            <div class="screenHead">
				<table cellspacing="0">
					<tr>
						<td>
                            <img id="surveyScreenIcon" ng-src="{{ mainCtrl.imageMap.productIcon }}" />
						</td>
						<td>
							<div  id="surveyScreenTitle" class="screenTitle"></div>
						</td>
					</tr>
				</table>
            </div>

            <h3 id="surveyScreenHeader" class="screenHeader">{{ Utils.getLocalizedString('SurveyScreenHeader') }}</h3>

            <div class="content">
                <div ng-repeat="surveyQuestion in mainCtrl.surveyQuestions">
					<span class="topLabel">{{ Utils.getLocalizedString('SurveyQuestion' + (surveyQuestion.index + 1) + 'Label', mainCtrl.applicationName) }}</span>
                    <div class="sbHolder" tabindex="{{surveyQuestion.index + 1}}" ng-keydown="mainCtrl.surveyQuestionKeyPress($event, surveyQuestion.index, this)">
                        <a href="#" draggable="false" ondragstart="return false" ondrop="return false" class="sbToggle" ng-click="this.dropdownShown = !this.dropdownShown"></a>
                        <a href="#" draggable="false" ondragstart="return false" ondrop="return false" class="sbSelector" ng-click="this.dropdownShown = !this.dropdownShown">{{ Utils.getLocalizedString(mainCtrl.surveyQuestionSelectedOption[surveyQuestion.index].name) }}</a>
                        <ul class="sbOptions" ng-show="this.dropdownShown">
                            <li ng-repeat="option in surveyQuestion.options" id="surveyOption{{surveyQuestion.index}}-{{option.index}}">
                                <a href="#{{option.value}}" draggable="false" ondragstart="return false" rel="{{option.value}}"
                                   ng-class="{sbFocus: option == mainCtrl.surveyQuestionSelectedOption[surveyQuestion.index], selectedOption: option == mainCtrl.surveyQuestionSelectedOption[surveyQuestion.index]}"
                                   ng-click="mainCtrl.surveyQuestionSelectedOption[surveyQuestion.index] = option; $parent.dropdownShown = false; mainCtrl.surveySelectChanged()">{{Utils.getLocalizedString(option.name)}}</a>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
            <div class="text-center">
                <input id="surveyContinueButton" tabindex="4" class="btn btn-primary" type="button" value="{{ Utils.getLocalizedString('Continue') }}" ng-click='mainCtrl.surveyContinueButtonClick()' style='float:left;' ng-disabled='mainCtrl.surveyButtonDisabled'>
            </div>
        </div>

        <div class="screen consistantPad" id="piiScreen"  ng-show="mainCtrl.activeScreen == 'piiScreen'">
            <div class="screenHead">
				<table cellspacing="0">
					<tr>
						<td>
							<img id="piiScreenIcon" ng-src="{{ mainCtrl.imageMap.productIcon }}"/>
						</td>
						<td>
							<div id="piiScreenTitle" class="screenTitle" ></div>
						</td>
					</tr>
				</table>
	        </div>
            <h3 id="piiScreenHeader" class="screenHeader">{{ Utils.getLocalizedString('PiiScreenHeader') }}</h3>
            <div id="piiScreenText1" class="content"></div>

            <div class="text-center">
                <input id="piiContinueButton" class="btn btn-primary" type="button" value="{{ Utils.getLocalizedString('StartInstalling') }}" ng-click='mainCtrl.piiContinueButtonClick()' style='float:left'/>
            </div>
        </div>

        <div id="mainScreen" class="screen mainContainer" ng-show="mainCtrl.activeScreen == 'mainScreen'">
            <div class="header">
                <div id="progressDiv">
                    <div class="topBar">
                        <div class="pull-left title">
							<table class="progressBarTable">
								<tr>
									<td ng-show="mainCtrl.iconInProgressBar">
										<img class="productImage" id="mainScreenIcon" ng-src="{{ mainCtrl.imageMap.productIcon }}" />
									</td>
									<td>
										<div id='progressDetailsDiv' ng-class="{progressDetailsWithIcon: mainCtrl.iconInProgressBar}">
											<div class="progressText ellip-line" ng-show="!mainCtrl.isInErrorState">{{ Utils.getLocalizedString('InstallingPercent', mainCtrl.currentProgress.toString()) }}</div>
											<div class="progressText ellip-line" ng-show="mainCtrl.isInErrorState">{{ Utils.getLocalizedString('InstallationFailedHeader') }}</div>
											<span class="minutesLeftText" ng-show="mainCtrl.minutesLeftMin == 0 && mainCtrl.minutesLeftMax == 0 && !mainCtrl.isInErrorState"> {{ Utils.getLocalizedString('EstimatingMinutesLeft') }}</span>
											<span class="minutesLeftText" ng-show="mainCtrl.minutesLeftMin == 0 && mainCtrl.minutesLeftMax != 0 && !mainCtrl.isInErrorState"> {{ Utils.getLocalizedString('AboutAMinuteLeftText') }}</span>
											<span class="minutesLeftText" ng-show="mainCtrl.minutesLeftMin != 0 && !mainCtrl.isInErrorState"> {{ Utils.getLocalizedString('MinutesLeftText', mainCtrl.minutesLeftMin, mainCtrl.minutesLeftMax) }}</span>
											<span class="minutesLeftText" ng-show="mainCtrl.isInErrorState"> {{ Utils.getLocalizedString('InstallationFailedSubHeader') }}</span>
										</div>
									</td>
								</tr>
							</table>
						</div>
                        <img id='cancelButtonImage' class='pull-right pngImageFix' ng-show="mainCtrl.isCancelButtonEnabled" ng-src="{{ mainCtrl.imageMap.cancelButton }}" ng-click='mainCtrl.cancelButtonClicked()' />
                    </div>
                </div>
            </div>
            <div class="progressContainer">
                <div id="progressTrack" ng-style="{ width: mainCtrl.currentProgress + '%' }"></div>
            </div>
            <div id="spinnerContent" class="spinnerContent centerMid" ng-hide="mainCtrl.isIframeLoaded || mainCtrl.isDefaultContentShown">
                <img id="iframeSpinner" class="imageSpinner" ng-src="{{ mainCtrl.imageMap.spinner }}"/>
                <span id="iframeSpinnerScreenText" class="spinnerScreenText">{{ Utils.getLocalizedString('JustMoment') }}</span>
            </div>
            <div id="marketingIFrameDiv" ng-show="mainCtrl.isIframeLoaded"></div>
            <div id="bakedInContentDiv" ng-show="mainCtrl.isDefaultContentShown">
                <div class='item'>
					<div class='productIcon'>
						<img src="" id="ccIconCarousel" ng-src="{{ mainCtrl.imageMap.timer }}"/>
					</div>
					<p id='carouselHeading' class='text-center'>{{ Utils.getLocalizedString("bakedInHeading") }}</p>
					<p id='carouselDescription' class='text-center'>{{ Utils.getLocalizedString("bakedInContent") }}</p>
				</div>
            </div>
        </div>

        <div id="launchScreen" class="screen" ng-show="mainCtrl.activeScreen == 'launchingProductScreen'">
            <div class="launchScreenContent centerMid">
                <img id="launchScreenImage" class="imageLaunch" ng-src="{{ mainCtrl.imageMap.checkmark }}" />
                <div id="launchScreenText1" class="launchScreenText1">{{ Utils.getLocalizedString("InstallationComplete") }}</div>
                <div id="launchScreenText2" class="launchScreenText2">{{ Utils.getLocalizedString(mainCtrl.autoDeleteAfterInstall?"AppIsOpeningAndAutoDeleteInstaller":"AppIsOpening", mainCtrl.applicationName) }}</div>
            </div>
        </div>

        <div id="overlayScreen" ng-controller="OverlayController as overlayCtrl">
            <div id="overlayScreenBackground"></div>
            <div id="overlayAlert" class="">
                <div class="modalHeader">
                    <div id="alertTitle" class="overlayTitleNormal">{{ overlayCtrl.alertTitle }}</div>
                    <img id="alertIcon" class="pull-right" ng-show="overlayCtrl.showAlertIcon"  ng-src="{{ mainCtrl.imageMap.errorIcon }}"/>
                </div>
                <div id="modalBody" class="modalBody default-skin">
                    <div id="alertText" class="overlayText" ng-show="overlayCtrl.alertText"></div>
                    <div id="proxyAlertDiv" ng-hide="overlayCtrl.alertText">
                        <div id="ProxyAlertTitle" class="overlayText">{{ Utils.getLocalizedString(overlayCtrl.showAlertIcon?"ProxyAlertErrorTitle":"ProxyAlertTitle") }}</div>
                        <input id="proxyAlertUsername" class="userInputFilled" type="text" autocomplete="off" tabindex="1" placeholder="{{Utils.getLocalizedString('Username')}}">
                        <input id="proxyAlertPassword" class="userInputFilled" type="password" autocomplete="off" tabindex="2" placeholder="{{Utils.getLocalizedString('Password')}}">
                      	<a href="" class="checkBoxAnchor" ng-click="overlayCtrl.rememberProxy = !overlayCtrl.rememberProxy;"  tabindex="3">
                              <img class="checkboxImage" ng-src="{{ mainCtrl.imageMap.checkFull }}" ng-show="overlayCtrl.rememberProxy" />
                              <img class="checkboxImage" ng-src="{{ mainCtrl.imageMap.checkEmpty }}" ng-hide="overlayCtrl.rememberProxy"/>
								<span id="proxyAlertRememberMeText">{{ Utils.getLocalizedString("RememberMe")}}</span>
							</a>
                      </div>
                </div>
                <div class="modalFooter text-center" id="modalFooter">
                    <button id="alertLeftButton" class="btn secondary quiet" ng-click="overlayCtrl.alertLeftButtonClicked()" tabindex="4" ng-show="overlayCtrl.showTwoButtons">{{ overlayCtrl.leftButtonText }}</button>
                    <button id="alertRightButton" class="btn quiet" ng-click="overlayCtrl.alertRightButtonClicked()" tabindex="5">{{ overlayCtrl.rightButtonText }}</button>
                </div>
            </div>
        </div>
    </div>

    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/IE8/jquery.min.js"></script>
    <script type="text/javascript" src="lib/IE8/angular.min.js"></script>
    <![endif]-->
    <!--[if gte IE 9]><!-->
    <script type="text/javascript" src="lib/jquery.min.js"></script>
    <script type="text/javascript" src="lib/angular.min.js"></script>
   <!--<![endif]-->
    <script type="text/javascript" src="lib/jquery.placeholder.min.js"></script>
    <script type="text/javascript" src="lib/jquery.custom-scrollbar.min.js"></script>

	<script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/utils.js"></script>
    <script type="text/javascript" src="js/mainController.js"></script>
    <script type="text/javascript" src="js/overlayController.js"></script>
</body>

</html>
