// base.js

if(typeof jQuery != 'undefined') {
	var gallery = {
		viewport: null,
		pool: null,
		size: null,
		
		media: null,
		index: null,
		depth: null,
		
		preloader: new Image,
		timer: null,
		
		init: function() {
			gallery.viewport = $('#background');
			gallery.pool = gallery.viewport.find('img');
			gallery.size = gallery.pool.size();
			
			gallery.media;
			gallery.index = -1;
			gallery.depth = 1;
			gallery.timer;
			
			gallery.preloader.onload = function() {
				gallery.fitMedia();
			}
		},
		
		selectMedia: function() {
			
			// set new index
			gallery.index++;
			
			if(gallery.index >= gallery.size)
				gallery.index = 0;
			else if(gallery.index < 0)
				gallery.index = gallery.size - 1;
			
			// select next media
			gallery.media = gallery.pool.eq(gallery.index);
			
			// set initial values
			gallery.media
			.css({
				position: 'absolute',
				left: 0,
				top: 0,
				opacity: 0
				//zIndex: ++gallery.depth
			});
			
			// initialize preloader
			gallery.preloader.src = gallery.media.attr('src');
		},
		
		fitMedia: function() {
			
			// get dimensions
			width = gallery.preloader.width;
			height = gallery.preloader.height;
			
			// get proportional gap
			horizontal = gallery.viewport.width() / width;
			vertical = gallery.viewport.height() / height;
			
			// resize and place media
			if(horizontal < vertical) {
				w = Math.round(width * (gallery.viewport.height() / height));
				h = gallery.viewport.height();
				l = ((w - gallery.viewport.width()) / 2) * -1;
				t = 0;
			} else {
				w = gallery.viewport.width();
				h = Math.round(height * (gallery.viewport.width() / width));
				l = 0;
				t =((h - gallery.viewport.height()) / 2) * -1;
			}
			
			// full scaling animation on resize
			if(gallery.media.css('opacity') == 1) {
				gallery.media
				.stop()
				.animate({
					width: w + 'px',
					height: h + 'px',
					left: l + 'px',
					top: t + 'px'
				}, 200);
			
			// just scale and fade in on initial load
			} else {
				gallery.media
				.css({
					width: w + 'px',
					height: h + 'px',
					left: l + 'px',
					top: t + 'px'
				})
				.stop()
				.animate({
					opacity: 1
				}, 1000);
			}
		}
	};
	
	// fit media image to viewport
	$(document).ready(function() {
		
		// init gallery
		gallery.init();
		
		// window resize event
		$(window).resize(function() {
			gallery.fitMedia();
		});
		
		// select initial media
		gallery.selectMedia();
		
		// start slideshow if needed
		if(gallery.size > 1) {
			timer = setInterval(gallery.selectMedia, 6000);
			
			gallery.viewport.click(function() {
				clearInterval(timer);
			});
			
			gallery.viewport.append(
				$('<a />')
				.attr('href', '#')
				.addClass('navigation')
				.addClass('previous')
				.css({
					zIndex: 100
				}).click(function() {
					gallery.selectMedia();
					
					return false;
				}),
				
				$('<a />')
				.attr('href', '#')
				.addClass('navigation')
				.addClass('next')
				.css({
					zIndex: 100
				}).click(function() {
					gallery.index = gallery.index - 2;
					gallery.selectMedia();
					
					return false;
				})
			);
		}
		
		// hide other images
		gallery.pool.css({opacity: 0});
	});
	
	$(window).resize(function() {
		resizeWindow();
	});
	
	resizeWindow = function() {
		var h = $(window).height();
		var w = $(window).width();
		
		mode = 'huge';
		
		if(w < 1030) {
			mode = 'small';
		} else if(w < 1300) {
			mode = 'large';
		}
		
		$('body').removeClass('mode_huge mode_large mode_small');
		$('body').addClass('mode_' + mode);
	}
	
	resizeWindow();
}