Application JS code

gistfile1.txt

/**
 * Fullscreen
 */
$.Controller('Fullscreen', {
	'.close a click': function(a) {
		var $meta = this.element.find('.meta');
		var $info = $('.info', $meta);

		if (a.hasClass('open')) {
			$info.show();
			$meta.css('left', $meta.data('css-left') + 'px');
		}
		else {
			$info.hide();
			$meta
				.data('css-left', parseInt($meta.css('left')))
				.css('left', 'auto');
		}

		a.toggleClass('open');
        return false;
	}
});

/**
 * Slidebox
 */
$.Controller('Slidebox', {
	'.toggle click': function() {
		this.element.toggleClass('open');
        return false;
	}
});

/**
 * Button (Dropdown)
 */
$.Controller('Button', {
	init: function() {
		$('html').click(function(e) {
			if ( ! $(e.target).parents().andSelf().is('.button')) {
				$('.dropdown-menu').removeClass('show');
				$('.dropdown').removeClass('active');
			}
		});
	},

	'click': function() {
		var dropdown = this.element.data('dropdown');

		if (dropdown !== 'undefined') {
			var $el = $('#' + dropdown);
			var po  = this.element.offset();

			var pw  = parseInt(this.element.outerWidth());
			var ph  = parseInt(this.element.outerHeight());

			this.element.toggleClass('active');

			$el
				.toggleClass('show')
				.css('width', pw - 2)
				.offset({
					top : po.top + ph - 2,
					left: po.left
				});
		}
	}
});

/**
 * Playlist
 */
$.Controller('Playlist', {
	init: function() {
		var self = this;

		self.element.parent().css({
			bottom: parseInt($('#footer').outerHeight()) + 'px'
		});

		self.recalculate();
		self.toggle_button();

		$(window).resize(function() {
			self.recalculate();
			self.element.tinyscrollbar_update();
		});
	},

	toggle_button: function () {
		var $playlist_toggle = $('#playlist-toggle');
		var self = this;

		$playlist_toggle.click(function(e) {
			e.preventDefault();
			self.toggle_playlist();
		});

		this.update_button();
	},

	toggle_playlist: function() {
		var $playlist = this.element;
		var $playlist_outer = this.element.parent();

		if ($playlist_outer.hasClass('show')) {
			$playlist_outer.removeClass('show');
		}
		else {
			$playlist_outer.addClass('show');

			var self = this;

			setTimeout(function() {
				self.recalculate();
				$playlist.tinyscrollbar_update();
			}, 150);
		}

		this.update_button();
	},

	update_button: function() {
		var $playlist_toggle = $('#playlist-toggle');
		var $playlist_outer = this.element.parent();
		var $icon = $('.icon', $playlist_toggle);

		if ($playlist_outer.hasClass('show')) {
			$icon
				.removeClass('arrow-up')
				.addClass('arrow-down');
		}
		else {
			$icon
				.removeClass('arrow-down')
				.addClass('arrow-up');
		}
	},

	recalculate: function() {
		var width = 0;

		this.find('li').each(function() {
			width += $(this).outerWidth(true);
		});

		this.find('.movie-list').width(width);
	}
});

/**
 * Scroll panel
 */
$.Controller('ScrollPanel', {
	init: function() {
		var $panel = this.element;
		var axis = ($panel.data('axis') !== 'undefined')
			? this.element.data('axis')
			: 'y';

		$panel
			.addClass('axis-' + axis)
			.wrapInner('<div class="scrollbar-viewport"><div class="scrollbar-overview"></div></div>')
			.append('<div class="scrollbar"><div class="scrollbar-track"><div class="scrollbar-thumb"></div></div></div>')
			.tinyscrollbar({axis: axis});
	}
});

/**
 * Application
 */
$.Class('Application', {
	init: function() {
		this.initUI();
	},

	initUI: function() {
		this.initButtons();
		this.initPlaylist();
		this.initScrollPanel();
		this.initFullscreen();
		this.initSlidebox();
		this.initTooltips();
	},

	initTooltips: function() {
		$('[rel=tooltip]').tooltip();
	},

	initButtons: function() {
		$('.button').button();
	},

	initScrollPanel: function() {
		$('.scrollable').scroll_panel();
	},

	initPlaylist: function() {
		$('#playlist').playlist();
	},

	initFullscreen: function() {
		var $fullscreen = $('#fullscreen');

		if ($fullscreen.length) {
			$fullscreen.fullscreen();
		}
	},

	initSlidebox: function() {
		$('#slidebox').slidebox();
	}
});

$(document).ready(function() {
	new Application();
});