var Sidebar = function(data, options) {
	var ths = this;

	// Properties
	ths.$element;
	ths.data = data;
	ths.i = 0;
	ths.images = new Array();

	// Config
	ths.config = $.extend({
		mainHeightOffset: 0
	}, options || {});

	// Functions
	ths.load = function(element) {

		// PRE

		if (ths.loaded) {
			return ths;
		}
		if (document.getElementById(element) === null) {
			return ths;
		}
	
		ths.$element = $('#'+element);
		ths.$element.addClass('sb').addClass('mt-loading');
		
		Shadowbox.init({ skipSetup: true });
		
		// GENERATE OBJECTS
		
		ths.$container = $('<div class="mt-container"></div>');

		// APPLYING EVENTS

		// DOM ALTERING

		// Add elements to DOM
		ths.$element.append(ths.$container);

		// LOADED
		
		ths.$element.removeClass('mt-loading');
	};
	
	ths.topUp = function() {
		function getATitle(setData) {
			if (setData['url_html'] !== '' && setData['caption_html'] !== '') {
				return '&lt;a href=&quot;'+setData['url_html']+'&quot;&gt;'+setData['caption_html']+'&lt;/a&gt;';
			} else if (setData['url_html'] !== '') {
				return '&lt;a href=&quot;'+setData['url_html']+'&quot;&gt;'+setData['url_html']+'&lt;/a&gt;';
			} else if (setData['caption_html'] !== '') {
				return setData['caption_html'];
			} else {
				return '';
			}
		}
		function imageOut() {
			for (i in ths.images) {
				var $image = $(ths.images[i]);
				$image.closest('.set').removeClass('active');
				$image.removeClass($image.attr('rel')+'-active');
			}
		}
		function imageOver() {
			imageOut();
			var $image = $(this);
			$image.closest('.set').addClass('active');
			$image.addClass($image.attr('rel')+'-active', 1000);
		}
		var i = 0;
		while ($('.side-col').height() < $('.main-col').height() + ths.config.mainHeightOffset && i < 100) {
			if (typeof ths.data[ths.i] === 'undefined') {
				ths.i = 0;
			}
			var set = ths.data[ths.i];
			set.$square1 = $(''+
				'<div class="image square1" rel="square1">'+
					'<a href="'+set['square1']['enlarged_src']+'" title="'+getATitle(set['square1'])+'">'+
						'<img src="'+set['square1']['thumb_src']+'" />'+
					'</a>'+
				'</div>');
			set.$square2 = $(''+
				'<div class="image square2" rel="square2">'+
					'<a href="'+set['square2']['enlarged_src']+'" title="'+getATitle(set['square2'])+'">'+
						'<img src="'+set['square2']['thumb_src']+'" />'+
					'</a>'+
				'</div>');
			set.$vertical = $(''+
				'<div class="image vertical" rel="vertical">'+
					'<a href="'+set['vertical']['enlarged_src']+'" title="'+getATitle(set['vertical'])+'">'+
						'<img src="'+set['vertical']['thumb_src']+'" />'+
					'</a>'+
				'</div>');
			set.$horizontal = $(''+
				'<div class="image horizontal" rel="horizontal">'+
					'<a href="'+set['horizontal']['enlarged_src']+'" title="'+getATitle(set['horizontal'])+'">'+
						'<img src="'+set['horizontal']['thumb_src']+'" />'+
					'</a>'+
				'</div>');
			set.$square1.mouseover(imageOver).mouseout(imageOut);
			set.$square2.mouseover(imageOver).mouseout(imageOut);
			set.$vertical.mouseover(imageOver).mouseout(imageOut);
			set.$horizontal.mouseover(imageOver).mouseout(imageOut);
			set.type0 = $('<div class="set type-0"></div>');
			set.type1 = $('<div class="set type-1"></div>');
			set.type0.append(set.$square1).append(set.$square2).append(set.$vertical);
			set.type1.append(set.$horizontal);
			ths.$element.append(set.type0).append(set.type1);
			var shadowBoxOptions = {
				gallery: 'Sidebar Images',
				overlayOpacity: 0.75,
				continuous: true,
				resizeDuration: 0.25
			};
			Shadowbox.setup(set.$square1.find('a'), shadowBoxOptions);
			Shadowbox.setup(set.$square2.find('a'), shadowBoxOptions);
			Shadowbox.setup(set.$vertical.find('a'), shadowBoxOptions);
			Shadowbox.setup(set.$horizontal.find('a'), shadowBoxOptions);
			set.$square1.find('a').attr('title', '');
			set.$square2.find('a').attr('title', '');
			set.$vertical.find('a').attr('title', '');
			set.$horizontal.find('a').attr('title', '');
			ths.images.push(set.$square1);
			ths.images.push(set.$square2);
			ths.images.push(set.$vertical);
			ths.images.push(set.$horizontal);
			ths.i++;
			i++;
		}
	};

	// Init
	return ths;
};
/*

<?php foreach ($sidebarImageSets as $sidebarImageSet): ?>
<div class="set type-<?=$sidebarImageSet['type']?>">
	<?php if ($sidebarImageSet['type'] === 0): ?>
	<div class="image square1">
		<a href="<?=$sidebarImageSet['images']['square1']['image_info']['thumbnails']['enlarged']['src']?>" title="<?=h($sidebarImageSet['images']['square1']['caption'])?>">
			<img <?=$sidebarImageSet['images']['square1']['image_info']['thumbnails']['square']['src_width_height']?> />
		</a>
	</div>
	<div class="image square2">
		<a href="<?=$sidebarImageSet['images']['square2']['image_info']['thumbnails']['enlarged']['src']?>" title="<?=h($sidebarImageSet['images']['square2']['caption'])?>">
			<img <?=$sidebarImageSet['images']['square2']['image_info']['thumbnails']['square']['src_width_height']?> />
		</a>
	</div>
	<div class="image vertical">
		<a href="<?=$sidebarImageSet['images']['vertical']['image_info']['thumbnails']['enlarged']['src']?>" title="<?=h($sidebarImageSet['images']['vertical']['caption'])?>">
			<img <?=$sidebarImageSet['images']['vertical']['image_info']['thumbnails']['vertical']['src_width_height']?> />
		</a>
	</div>
	<?php else: ?>
	<div class="image horizontal">
		<a href="<?=$sidebarImageSet['images']['horizontal']['image_info']['thumbnails']['enlarged']['src']?>" title="<?=h($sidebarImageSet['images']['horizontal']['caption'])?>">
			<img <?=$sidebarImageSet['images']['horizontal']['image_info']['thumbnails']['horizontal']['src_width_height']?> />
		</a>
	</div>
	<?php endif; ?>
</div>
<?php endforeach; ?>
*/