
<html>
    <head>
        <script type="text/javascript" src="js/libs/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="js/libs/jquery-ui-1.8.24.min.js"></script>
        <script type="text/javascript" src="js/setup/setup-config.js"></script>

        <link rel="stylesheet" type="text/css" href="css/bootstrap-3.3.1.min.css" />
        <link rel="stylesheet" type="text/css" href="css/setup/setup-config.css" />
    </head>
    <body>
        <div class="header">
            <h3 class="logo">
                <img src="css/images/airtime_logo_jp.png" id="airtimeLogo" /><br/>
                <strong>Setup</strong>
            </h3>
            <strong>Step <span id="stepCount">1</span> of 5</strong>
        </div>

        <div class="viewport">
            <div class="form-slider">
                <div id="databaseSettings" class="form-wrapper">
                    
<form action="#" role="form" id="dbSettingsForm">
    <h3 class="form-title">Database Settings</h3>
    <span id="helpBlock" class="help-block help-message"></span>
    <p>
        Enter your Airtime database settings here. Empty or non-existent databases will be created and populated 
        if the given user has administrative permissions in postgres.
    </p>
    <div class="form-group">
        <label class="control-label" for="dbUser">Username</label>
        <input required class="form-control" type="text" name="dbUser" id="dbUser" placeholder="Username" 
            value="airtime" />
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
    <div class="form-group">
        <label class="control-label" for="dbPass">Password</label>
        <input required class="form-control" type="password" name="dbPass" id="dbPass" placeholder="Password" 
            value="airtime" />
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
    <div class="form-group">
        <label class="control-label" for="dbName">Name</label>
        <input required class="form-control" type="text" name="dbName" id="dbName" placeholder="Name" 
            value="airtime" />
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
    <div class="form-group">
        <label class="control-label" for="dbHost">Host</label>
        <input required class="form-control" type="text" name="dbHost" id="dbHost" placeholder="Host" 
            value="localhost" />
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>
    <input class="form-control" type="hidden" name="dbErr" id="dbErr" aria-describedby="helpBlock"/>
    <div>
        <p style="text-align:right">
            This may take up to 30 seconds to complete!
        </p>
        <input type="submit" formtarget="dbSettingsForm" class="btn btn-primary btn-next" value="Next &#10097;"/>
    </div>
</form>

<script>
    $("#dbSettingsForm").submit(function(e) {
        submitForm(e, "DatabaseSetup");
    });
</script>                </div>
                <div id="rabbitmqSettings" class="form-wrapper">
                    
<form action="#" role="form" id="rmqSettingsForm">
    <h3 class="form-title">RabbitMQ Settings</h3>
    <span id="helpBlock" class="help-block help-message"></span>
    <p>
        RabbitMQ is an AMQP-based messaging system used by Airtime. You should only edit these settings
        if you have changed the defaults since running the installer, or if you've opted to install RabbitMQ manually.
    </p>
    <p>
        In either case, we recommend that you change at least the default password provided -
        you can do this by running the following line from the command line:<br/>
        <code>sudo rabbitmqctl change_password &lt;username&gt; &lt;newpassword&gt;</code>
    </p>
    <div id="rmqSlideToggle">
        <span><strong>Advanced </strong></span><span id="advCaret" class="caret"></span><hr/>
    </div>
    <div id="rmqFormBody">
        <div class="form-group">
            <label class="control-label" for="rmqUser">Username</label>
            <input required class="form-control" type="text" name="rmqUser" id="rmqUser" placeholder="Username" 
                value="airtime" />
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
        </div>
        <div class="form-group">
            <label class="control-label" for="rmqPass">Password</label>
            <input class="form-control" type="password" name="rmqPass" id="rmqPass" placeholder="Password" 
                value="airtime" />
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
            <span id="rmqHelpBlock" class="help-block">
                You probably want to change this!
            </span>
        </div>
        <div class="form-group">
            <label class="control-label" for="rmqHost">Host</label>
            <input required class="form-control" type="text" name="rmqHost" id="rmqHost" placeholder="Host" 
                value="127.0.0.1" />
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
        </div>
        <div class="form-group">
            <label class="control-label" for="rmqPort">Port</label>
            <input required class="form-control" type="text" name="rmqPort" id="rmqPort" placeholder="Port" 
                value="5672" />
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
        </div>
        <div class="form-group">
            <label class="control-label" for="rmqVHost">Virtual Host</label>
            <input required class="form-control" type="text" name="rmqVHost" id="rmqVHost" placeholder="VHost" 
                value="/airtime" />
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
        </div>
        <input class="form-control" type="hidden" name="rmqErr" id="rmqErr" aria-describedby="helpBlock"/>
    </div>
    <div>
        <input type="submit" formtarget="rmqSettingsForm" class="btn btn-primary btn-next" value="Next &#10097;"/>
        <input type="button" class="btn btn-primary btn-back" value="&#10096; Back"/>
    </div>
</form>

<script>
    $("#rmqSlideToggle").click(function() {
        $("#rmqFormBody").slideToggle(500);
        $("#advCaret").toggleClass("caret-up");
    });

    $("#rmqSettingsForm").submit(function(e) {
        submitForm(e, "RabbitMQSetup");
    });
</script>
                </div>
                <div id="generalSettings" class="form-wrapper">
                    
<form action="#" role="form" id="generalSettingsForm">
    <h3 class="form-title">General Settings</h3>
    <p>
        These values are automatically pulled from your webserver settings, under most circumstances you will not need to change them.
    </p>
    <span id="helpBlock" class="help-block help-message"></span>
    <div id="generalFormBody">
        <div class="form-group">
            <label class="control-label" for="generalHost">Webserver Host</label>
            <input required class="form-control" type="text" name="generalHost" id="generalHost" placeholder="Host" value="www.omfgod.com"/>
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
        </div>
        <div class="form-group">
            <label class="control-label" for="generalPort">Webserver Port</label>
            <input required class="form-control" type="text" name="generalPort" id="generalPort" placeholder="Port" value="80"/>
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
        </div>
        <input class="form-control" type="hidden" name="generalErr" id="generalErr" aria-describedby="helpBlock"/>
    </div>
    <div>
        <input type="submit" formtarget="generalSettingsForm" class="btn btn-primary btn-next" value="Next &#10097;"/>
        <input type="button" class="btn btn-primary btn-back" value="&#10096; Back"/>
    </div>
</form>

<script>
    $("#generalSettingsForm").submit(function(e) {
        submitForm(e, "GeneralSetup");
    });
</script>
                </div>
                <div id="mediaSettings" class="form-wrapper">
                    
<form action="#" role="form" id="mediaSettingsForm">
    <h3 class="form-title">Media Settings</h3>
    <span id="helpBlock" class="help-block help-message"></span>
    <p>
        Here you can set the default media storage directory for Airtime. If left blank, we'll create a new
        directory located at <code>/srv/airtime/stor/</code> for you.
    </p>
    <div class="form-group">
        <label class="control-label" for="mediaFolder">Media folder</label>
        <input class="form-control" type="text" name="mediaFolder" id="mediaFolder" placeholder="/path/to/my/airtime/music/directory/"/>
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
        <span id="mediaHelpBlock" class="help-block">
            Note that you need to enter the <strong>fully qualified</strong> path name!
        </span>
    </div>
    <input class="form-control" type="hidden" name="mediaErr" id="mediaErr" aria-describedby="helpBlock"/>
    <div>
        <input type="submit" formtarget="mediaSettingsForm" class="btn btn-primary btn-next" value="Next &#10097;"/>
        <input type="button" class="btn btn-primary btn-back" value="&#10096; Back"/>
    </div>
</form>

<script>
    $("#mediaSettingsForm").submit(function(e) {
        submitForm(e, "MediaSetup");
    });
</script>                </div>
                <div id="finishSettings" class="form-wrapper">
                    
<form action="#" role="form" id="finishSettingsForm">
    <h3 class="form-title">Manual Step: Start Airtime Services</h3>
    <span id="helpBlock" class="help-block help-message"></span>
    <p>
        Looks like you're almost done! As a final step, please run the following commands from the terminal:
    </p>
    <pre style="text-align: left">sudo service airtime-playout start
sudo service airtime-liquidsoap start
sudo service airtime-media-monitor start</pre>
    <p>
        Click "Done!" to bring up the Airtime configuration checklist; if your configuration is all green, 
        you're ready to get started with your personal Airtime station!
    </p>
    <p>
        If you need to re-run the web installer, just remove <code>/etc/airtime/airtime.conf</code>.
    </p>
    <div>
        <input type="submit" formtarget="finishSettingsForm" class="btn btn-primary btn-next" value="Done!"/>
    </div>
</form>

<script>
    $("#finishSettingsForm").submit(function(e) {
        e.preventDefault();
        window.location.assign("/?config");
    });
</script>                </div>
            </div>
        </div>

        <script>
            $(".btn-skip").click(nextSlide);
            $(".btn-back").click(prevSlide);
        </script>
    </body>
</html>