Theatre

by sungsoonz

HTML

<ul>
    <li>
      <figure id="thumb_1" data-title="1">
        <a href="#" class="open">1</a>
      </figure>
      <figure id="thumb_2" data-title="2">
        <a href="#" class="open">2</a>
      </figure>
      <figure id="thumb_3" data-title="3">
        <a href="#" class="open">3</a>
      </figure>
    </li>
    <li>
      <figure id="thumb_4" data-title="4">
        <a href="#" class="open">4</a>
      </figure>
      <figure id="thumb_5" data-title="5">
        <a href="#" class="open">5</a>
      </figure>
      <figure id="thumb_6" data-title="6">
        <a href="#" class="open">6</a>
      </figure>
    </li>
    <div class="preview">
      <a href="#" class="close">Close</a>
      <h3 class="title"></h3>
    </div>
  </ul>

CSS

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  padding: 0;
  margin: 0;
  display: block;
  overflow: hidden;
}

figure {
  border: 1px solid #ddd;
  background: white;
  height: 100px;
  text-align: center;
  float: left;
  width: 30%;
  padding: 5px;
  margin: 0;
}

a {
  text-decoration: none;
  display: block;
  padding: 40px;
}

.preview {
	clear: both;
	padding: 3em;
	background: #222;
	color: #fff;
	position: relative;
	overflow: hidden;
	display: none;
}
.close {
	position: absolute;
	top: 1em;
	right: 1em;
	width: 25px;
	height: 25px;
	text-indent: -9999em;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2Fy ZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAA AAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5U Y3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6 eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8w Mi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRw Oi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpE ZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRv YmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNv bS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20v eGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRv YmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0i eG1wLmlpZDpCNDg5MkEwM0ZEM0MxMUUzOTAyNDlCRDA2MTgzMjhENCIgeG1wTU06 RG9jdW1lbnRJRD0ieG1wLmRpZDpCNDg5MkEwNEZEM0MxMUUzOTAyNDlCRDA2MTgz MjhENCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAu aWlkOkI0ODkyQTAxRkQzQzExRTM5MDI0OUJEMDYxODMyOEQ0IiBzdFJlZjpkb2N1 bWVudElEPSJ4bXAuZGlkOkI0ODkyQTAyRkQzQzExRTM5MDI0OUJEMDYxODMyOEQ0 Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8 P3hwYWNrZXQgZW5kPSJyIj8+8NlNEgAAAVBJREFUeNrs29EOgiAUgOHoLeC5Mq17 3/+2DTeSOmvWFFSoYf5nO2tuTTwfYEKlnHOHPcfxsPMAAAAAAAAAAAAAAAAAAAAA...

JavaScript

$.videoWatch = function(element) {
  this.$element = $(element);
  this.init();
};
var oldIndex = -1;
var curID = "";

$.videoWatch.prototype = {
	
  init: function() {
  
    this.$openLinks = this.$element.find(".open");
    this.$closeLinks = this.$element.find(".close");
    this.open();
    this.close();
  },

  _getContent: function(element) {
    var $parent = element.parent(),
      title = $parent.data('title');

    return {
      title: title
    }
  },

  open: function() {
    var self = this;

    self.$openLinks.on("click", function(e) {
      e.preventDefault();
      if (curID == $(this).parent().attr("id")) {
      	$(".preview").slideUp('fast');
        oldIndex = -1;
        curID = "";
        return false;
      } else {
      	curID = $(this).parent().attr("id");
      }

      var $a = $(this),
        content = self._getContent($a),
        $li = $a.parents("li"),
        $title = $(".title");

      $title.text(content.title);

			if (!($li.index() == oldIndex)) {
        $(".preview").slideUp('fast', function(){
        	$li.append($(".preview"));

          var $preview = $li.find(".preview");
          $preview.slideDown('fast');
          oldIndex = $li.index();
        });
      } else {
        $li.append($(".preview"));   
      }      
    });
  },
  close: function() {
    this.$closeLinks.on("click", function(e) {
      e.preventDefault();
      $(this).parent().slideUp('fast');
			oldIndex = -1;
      curID = "";
    });
  }
};

$(function() {
  var watch = new $.videoWatch("ul");
});