<div class="options-container">
  <h3>Skin</h3>
  <table class="form-table">
    <tr>
      <th>Background Color</th>
      <td>
        <div id="backgroundColorSelector" class="colorSelector"><div style="background-color:<?php echo $options['background_color']; ?>;"></div></div><input type="hidden" name="background_color" id="backgroundColor" value="<?php echo $options['background_color']; ?>" />
      </td>
      <td><span class="description">To change the color click the small icon at the bottom right.</span></td>
    </tr>
    <tr>
      <th>Title Color</th>
      <td>
        <div id="titleColorSelector" class="colorSelector"><div style="background-color:<?php echo $options['title_color']; ?>;"></div></div><input type="hidden" name="title_color" id="titleColor" value="<?php echo $options['title_color']; ?>" />
      </td>
      <td><span class="description">To change the color click the small icon at the bottom right.</span></td>
    </tr>
    <tr>
      <th>Thumbnail Width</th>
      <td><input type="text" name="thumbnail_width" size="3" maxlength="5" value="<?php echo $options['thumbnail_width']; ?>" /></td>
      <td><span class="description">The max. width for each thumbnail.</span></td>
    </tr>
    <tr>
      <th>Thumbnail Height</th>
      <td><input type="text" name="thumbnail_height" size="3" maxlength="5" value="<?php echo $options['thumbnail_height']; ?>" /></td>
      <td><span class="description">The max. height for each thumbnail</span></td>
    </tr>
    <tr>
      <th>Thumbnail Opacity</th>
      <td><input type="text" name="thumbnail_opacity" size="3" maxlength="3" value="<?php echo $options['thumbnail_opacity']; ?>" /></td>
      <td><span class="description">A value between 0-1, e.g. 0.4</span></td>
    </tr>
    <tr>
      <th>Thumbnails per Page</th>
      <td><input type="text" name="thumbnails_per_page" size="3" maxlength="5" value="<?php echo $options['thumbnails_per_page']; ?>" /></td>
      <td><span class="description">Set value to 0 to show all images of album at once.</span></td>
    </tr>
    <tr>
      <th>Title Height</th>
      <td><input type="text" name="title_height" size="3" maxlength="3" value="<?php echo $options['title_height']; ?>" /></td>
      <td><span class="description">The height of the layer for the title.</span></td>
    </tr>
    <tr>
      <th>Border Thickness</th>
      <td><input type="text" name="border_thickness" size="3" maxlength="2" value="<?php echo $options['border_thickness']; ?>" /></td>
      <td><span class="description">The thickness of the border around each thumbnail container.</span></td>
    </tr>
    <tr>
      <th>Row Offset</th>
      <td><input type="text" name="row_offset" size="3" maxlength="3" value="<?php echo $options['row_offset']; ?>" /></td>
      <td><span class="description">The offset between each thumbnail row.</span></td>
    </tr>
    <tr>
      <th>Column Offset</th>
      <td><input type="text" name="column_offset" size="3" maxlength="3" value="<?php echo $options['column_offset']; ?>" /></td>
      <td><span class="description">The offset between each thumbnail column.</span></td>
    </tr>
    <tr>
      <th>Shadow Offset</th>
      <td><input type="text" name="shadow_offset" size="3" maxlength="3" value="<?php echo $options['shadow_offset']; ?>" /></td>
      <td><span class="description">You can use negative values as well.</span></td>
    </tr>
     <tr>
      <th>Shadow Image</th>
      <td><input type="file" id="uploadShadowImage" value="" /><input type="hidden" name="shadow_image" value="<?php echo $options['shadow_image']; ?>" /></td>
      <td><a href="#" id="removeShadow" class="button-secondary">Remove shadow</a></td>
    </tr>
    <?php
    if($_GET['page'] == 'fancy-gallery-generator') {
		echo '<tr>
		  <th>Thumbnail Scale Mode</th>
		  <td>  
		   <select name="thumbnail_scalemode">
			  <option value="stretch" '.  selected($options['thumbnail_scalemode'], "stretch", false) .'>Stretch</option>
			  <option value="prop" '.selected($options['thumbnail_scalemode'], "prop", false) .'>Proportional</option>
			  <option value="crop" '. selected($options['thumbnail_scalemode'], "crop", false) .'>Crop</option>
			</select>
		  </td>
		  <td><span class="description">Select a scale mode how the thumbnails should be scaled.</span></td>
		</tr>';
	}
	else {
		echo '<tr>
		  <th>Thumbnail Scale Mode</th>
		  <td>  
		   <select name="thumbnail_zc">
			  <option value="0" '. selected($options['thumbnail_zc'], 0, false) .'>No Cropping</option>
			  <option value="1" '. selected($options['thumbnail_zc'], 1, false) .'>Best Fit (recommend)</option>
			  <option value="2" '. selected($options['thumbnail_zc'], 2, false) .'>Proportional (gaps)</option>
			  <option value="3" '. selected($options['thumbnail_zc'], 3, false) .'>Proportional (no gaps)</option>
			</select>
		  </td>
		  <td><span class="description">Select a scale mode how the thumbnails should be scaled.</span></td>
		</tr>';
		
	}
    ?>
    <tr>
      <th>Text Fade Direction</th>
      <td>
        <select name="text_fade_direction">
          <option value="normal" <?php selected($options['text_fade_direction'], "normal"); ?>>Normal</option>
          <option value="reverse" <?php selected($options['text_fade_direction'], "reverse"); ?>>Reverse</option>
          <option value="random" <?php selected($options['text_fade_direction'], "random"); ?>>Random</option>
        </select>
      </td>
      <td><span class="description">Select the direction for the letters fading of the title.</span></td>
    </tr>
    <tr>
      <th>Dropdown Theme</th>
      <td>
        <select name="dropdown_theme">
          <option value="default" <?php selected($options['dropdown_theme'], "default"); ?>>White</option>
          <option value="aristo" <?php selected($options['dropdown_theme'], "aristo"); ?>>Blue</option>
          <option value="agent" <?php selected($options['dropdown_theme'], "agent"); ?>>Dark</option>
        </select>
      </td>
      <td><span class="description">Select a theme for the dropdown menu.</span></td>
    </tr>
    <tr>
      <th>Show Dropdown</th>
      <td><input type="checkbox" name="dropdown" value="1" <?php checked($options['dropdown'], 1) ?> /></td>
      <td><span class="description">Hide or show the dropdown menu.</span></td>
    </tr>
    <tr>
      <th>Show Divider</th>
      <td><input type="checkbox" name="divider" value="1" <?php checked($options['divider'], 1) ?> /></td>
      <td><span class="description">Hide or show the line between thumbnails and controllers.</span></td>
    </tr>
    <tr>
      <th>Show Title</th>
      <td><input type="checkbox" name="show_title" value="1" <?php checked($options['show_title'], 1) ?> /></td>
      <td><span class="description">Show or hide the title.</span></td>
    </tr>
    <tr>
      <th>Slide Title</th>
      <td><input type="checkbox" name="slide_title" value="1" <?php checked($options['slide_title'], 1) ?> /></td>
      <td><span class="description">Enable or disable the slide of the Title.</span></td>
    </tr>
  </table>
</div>    
<div class="options-container">
  <h3>Prettyphoto</h3>
  <table class="form-table">
    <tr>
      <th>Theme</th>
      <td>
        <select name="prettyphoto_theme">
          <option value="pp_default" <?php selected($options['prettyphoto_theme'], "pp_default"); ?>>Default</option>
          <option value="light_rounded"<?php selected($options['prettyphoto_theme'], "light_rounded"); ?>>Light rounded</option>
          <option value="dark_rounded"<?php selected($options['prettyphoto_theme'], "dark_rounded"); ?>>Dark rounded</option>
          <option value="light_square" <?php selected($options['prettyphoto_theme'], "light_square"); ?>>Light square</option>
          <option value="dark_square" <?php selected($options['prettyphoto_theme'], "dark_square"); ?>>Dark square</option>
          <option value="facebook" <?php selected($options['prettyphoto_theme'], "facebook"); ?>>Facebook</option>
        </select>
      </td>
      <td><span class="description">Select a theme for the prettyphoto modal box.</span></td>
    </tr>
    <tr>
      <th>Enable overlay gallery</th>
      <td><input type="checkbox" name="prettyphoto_overlay" value="1" <?php checked($options['prettyphoto_overlay'], 1) ?> /></td>
      <td><span class="description">Hide or show the overlay gallery.</span></td>
    </tr>
    <tr>
      <th>Allow image resizing</th>
      <td><input type="checkbox" name="prettyphoto_image_resize" value="1" <?php checked($options['prettyphoto_image_resize'], 1); ?> /></td>
      <td><span class="description">Allow to resize the image so it fits in the browser window.</span></td>
    </tr>
    <tr>
      <th>Autoplay slideshow</th>
      <td><input type="checkbox" name="prettyphoto_slideshow" value="1" <?php checked($options['prettyphoto_slideshow'], 1); ?> /></td>
      <td><span class="description">Enable or disable the autoplay for the slideshow.</span></td>
    </tr>
    <tr>
      <th>Deeplinking</th>
      <td><input type="checkbox" name="prettyphoto_deeplinking" value="1" <?php checked($options['prettyphoto_deeplinking'], 1); ?> /></td>
      <td><span class="description">Enable or disable the deeplinking for each media.</span></td>
    </tr>
  </table>
</div>