<?php
   @include_once("functions.php");
   $config = getConfig();
?>
<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title><?php echo $config['galleryName'];?> | album</title>
		<link rel="stylesheet" href="basic.css" type="text/css" />
		<link rel="stylesheet" href="showalbum.css" type="text/css" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="jquery.galleriffic.js"></script>
		<script type="text/javascript" src="jquery.opacityrollover.js"></script>
		<!-- We only want the thunbnails to display when javascript is disabled -->
		<script type="text/javascript">
			document.write('<style>.noscript { display: none; }</style>');
		</script>
	</head>
	<body>

<!-- Facebook stuff
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'insert_app_id_here', 
             status: true, 
             cookie: true,
 	     xfbml: true,
 	     channelUrl: 'http://<?php echo $_SERVER["SERVER_NAME"]; ?>/channel.html'});
  };

  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = 'https://connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());

   function createFbmlNode(url) {
      var like = document.createElement("fb:like");
      like.setAttribute('href', url);
      like.setAttribute('send', false);
      like.setAttribute('width', 450);
      like.setAttribute('show_faces', false);
      like.setAttribute('colorscheme', 'dark');
      like.setAttribute('font', 'trebuchet ms');

      var container = document.getElementById('fblikecontainer');
      while (container.hasChildNodes()) {
       container.removeChild(container.lastChild);
      }
      container.appendChild(like);

      if (typeof FB !== 'undefined') {
         FB.XFBML.parse(); 
      }
   }
</script>
-->

   <div id="page">
      <span class="homeLink"><a href="index.php">&lt;&lt; <?php echo $config['galleryName'];?></a></span>
      <div id="container">
<?php
$albumDir = $_GET['album'];
if ($albumDir == '') {
   die('ERROR: must specify album location');
}
$albumPath = 'albums/' . $albumDir;
if (!file_exists($albumPath)) {
   die('ERROR: directory ' . $albumPath . ' does not exist');
}
$jsonPath = 'albums/' . $albumDir . '/album.json';
if (!file_exists($jsonPath)) {
   die('ERROR: missing configuration file ' . $jsonPath);
}
$albumInfo = readJSON($jsonPath);
$albumName = $albumInfo['title'];
$albumMonth = $albumInfo['month'];
$albumYear = $albumInfo['year'];
?>
         <h1><?php echo $albumName;?></h1>
         <h2><?php echo $albumMonth . ' ' . $albumYear; ?></h2>

         <!-- Start Advanced Gallery Html Containers -->
         <div id="gallery" class="content">
            <div id="controls" class="controls"></div>
            <div class="slideshow-container">
            <div id="loading" class="loader"></div>
            <div id="slideshow" class="slideshow"></div>
         </div>
         <div id="caption" class="caption-container"></div>
		 <!--
         <div id="fblikecontainer"></div>
		 -->
      </div>
      <div id="thumbs" class="navigation">
         <ul class="thumbs noscript">
<?php

   $files = array();
   foreach (new DirectoryIterator('albums/'.$albumDir) as $file) {
      $extension = strtolower(pathinfo($file, PATHINFO_EXTENSION));
      if (!$file->isDot() && $extension == 'jpg') {
         $files[] = $file->getFilename();
      }
   }
   sort($files);
   foreach ($files as $file) {
      echo '<li>';
      echo '<a class="thumb" href="albums/' . $albumDir . '/small/small_'.$file.'" title="' . $file . '">';
      echo '<img src="albums/' . $albumDir . '/thumbs/thumb_'.$file.'" alt="' . $file . '"/>';
      echo '</a>';
      echo '<div class="caption">';
      echo '<div class="download">';
      echo '   <a target="_blank" href="albums/' . $albumDir . '/' . $file . '">Download</a>';
      echo '</div>';
      $caption = $albumInfo['captions'][$file];
      echo '<div class="image-desc">' . $caption . '</div>';
      echo '</div>';
      echo "</li>\n";
   }
?>
					</ul>
				</div>
				<div style="clear: both;"></div>
			</div>
		</div>
		<div id="footer"><a href="http://raspberryalbums.sf.net">Raspberry Albums</a></div>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				// We only want these styles applied when javascript is enabled
				$('div.navigation').css({'width' : '273px', 'float' : 'left'});
				$('div.content').css('display', 'block');

				// Initially set opacity on thumbs and add
				// additional styling for hover effect on thumbs
				var onMouseOutOpacity = 0.67;
				$('#thumbs ul.thumbs li').opacityrollover({
					mouseOutOpacity:   onMouseOutOpacity,
					mouseOverOpacity:  1.0,
					fadeSpeed:         'fast',
					exemptionSelector: '.selected'
				});
				
				// Initialize Advanced Galleriffic Gallery
				var gallery = $('#thumbs').galleriffic({
					delay:                     2500,
					numThumbs:                 15,
					preloadAhead:              10,
					enableTopPager:            true,
					enableBottomPager:         true,
					maxPagesToShow:            7,
					imageContainerSel:         '#slideshow',
					controlsContainerSel:      '#controls',
					captionContainerSel:       '#caption',
					loadingContainerSel:       '#loading',
					renderSSControls:          true,
					renderNavControls:         true,
					playLinkText:              'Play Slideshow',
					pauseLinkText:             'Pause Slideshow',
					prevLinkText:              '&lsaquo; Previous',
					nextLinkText:              'Next &rsaquo;',
					nextPageLinkText:          'Next &rsaquo;',
					prevPageLinkText:          '&lsaquo; Prev',
					enableHistory:             false,
					autoStart:                 false,
					syncTransitions:           true,
					defaultTransitionDuration: 400,
					onSlideChange:             function(prevIndex, nextIndex) {
						// 'this' refers to the gallery, which is an extension of $('#thumbs')
						this.find('ul.thumbs').children()
							.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
							.eq(nextIndex).fadeTo('fast', 1.0);
						var nextImgName = this.find('ul.thumbs').children().eq(nextIndex).find('img').attr('alt');
						//$(document).ready(function(imgName){createFbmlNode('http://<?php echo $_SERVER["SERVER_NAME"] . dirname($_SERVER['PHP_SELF']); ?>/showimage.php?album=<?php echo $_GET['album'];?>&image=' + imgName)}(nextImgName));
					},
					onPageTransitionOut:       function(callback) {
						this.fadeTo('fast', 0.0, callback);
					},
					onPageTransitionIn:        function() {
						this.fadeTo('fast', 1.0);
					}
				});
			});
		</script>
	</body>
</html>
