Advanced Mobile VR Station Link Generator

Use this to create advanced links that will play in Mobile VR Station 2.0

HTML

<div id="box">

  <h2>
  Advanced Link Generator
  </h2>

  <p>
    <label for="url">Media Url (UTF-8 Encoded):</label> (Required)
    <br/>
    <input type="input" name="url" id="url" value="http://urltomedia" />
  </p>

  <p>
    <label for="url">Title:</label> (Optional)
    <br/>
    <input type="input" name="title" id="title">
  </p>

  <p>
    <label for="type">Playback Type:</label> (Optional)
    <br/>
    <select id="type">
      <option value="">Default (2d)</option>
      <optgroup label="2D">
        <option value="2d">2D</option>
        <option value="2d.180">2D 180 Dome</option>
        <option value="2d.360">2D 360</option>
        <option value="2d.ffd">2D Front Full Dome</option>
      </optgroup>
      <optgroup label="3D Side By Side">
        <option value="sbs">3D Side by Side</option>
        <option value="sbs.180">3D 180 Dome Side by Side</option>
        <option value="sbs.360">3D 360 Side by Side</option>
        <option value="sbs.ffd">3D Front Full Dome Side by Side</option>
      </optgroup>
      <optgroup label="3D Over Under">
        <option value="sbs">3D Over Under</option>
        <option value="sbs.360">3D 360 Over Under</option>
      </optgroup>
    </select>
  </p>

  <p>
    <label for="aspect">Aspect Ratio:</label> (Optional)
    <br/>
    <select id="aspect">
      <option value="">Default (Source Ratio)</option>
      <option value="a3_2">3:2 (35 MM)</option>
      <option value="a4_3">4:3 (OLD TV)</option>
      <option value="a16_9">16:9 (HDTV)</option>
      <option value="a16_10">16:10 (COMPUTER MONITORS)</option>
      <option value="a1.43_1">1.43:1 (IMAX)</option>
      <option value="a1.85_1">1.85:1 (OLD CIMENA)</option>
      <option value="a2.35_1">2.35:1 (CURRENT CINEMA)</option>
      <option value="a2.39_1">2.39:1 (CURRENT CINEMA)</option>
      <option value="a1_1">1:1 (Square)</option>
    </select>
  </p>

  <p>
    <label for="limit">Limit Interface:</label> (Optional, Click to hide)
    <br/>
   ...

CSS

#box {
  background: white;
  margin: 1em;
  padding: 1em;
}

.presetRequired {
  margin: 1em;
}

select,
input {
  width: 80%;
}

JavaScript

$(function() {

  function replaceAll(str, find, replace) {
    return str.replace(new RegExp(find, 'g'), replace);
  }

  window.MVRS = {};

  MVRS.presets = {
    Plane: [{
      name: 'Distance',
      key: 'di',
      type: 'I',
      min: 10,
      max: 100,
      def: 25
    }, {
      name: 'Offset X',
      key: 'offx',
      type: 'F',
      min: -25,
      max: 25,
      def: 0,
      step: 0.5
    }, {
      name: 'Offset Y',
      key: 'offy',
      type: 'F',
      min: -25,
      max: 25,
      def: 0,
      step: 0.5
    }, {
      name: 'Width',
      key: 'wi',
      type: 'I',
      min: 10,
      max: 100,
      def: 50
    }, {
      name: 'Height',
      key: 'he',
      type: 'I',
      min: 10,
      max: 100,
      def: 50
    }, {
      name: 'Scale',
      key: 'sc',
      type: 'F',
      min: 1,
      max: 10,
      def: 1,
      step: 0.25
    }, ],
    // Skip these for now, will implement later
    Curved: [

    ],
    Sphere: [{
        name: 'Vertical Columns',
        key: 'colums',
        type: 'I',
        min: 8,
        max: 64,
        def: 48
      }, {
        name: 'Horizontal Rows',
        key: 'rows',
        type: 'I',
        min: 8,
        max: 64,
        def: 48
      }, {
        name: 'Width',
        key: 'wi',
        type: 'F',
        min: 10,
        max: 100,
        def: 10
      }, {
        name: 'Height',
        key: 'he',
        type: 'F',
        min: 10,
        max: 100,
        def: 10
      }, {
        name: 'Depth',
        key: 'de',
        type: 'F',
        min: 10,
        max: 100,
        def: 10
      }
    ],
    Dome: [

    ]
  };

  $('#preset').change(function() {
    var attributes = $('#attributes').empty(),
      div, label, input, preset, i, attr, p;
    preset = MVRS.presets[$('#preset').val()];
    if (preset) {
      $('.presetRequired').show();

      for (i = 0; i < preset.length; i++) {
        attr = preset[i];
        p = $('<p></p>').appendTo(attributes);
       ...