var ExpertGrid = function ExpertGrid (params) {

	var expertgrid = this;

	var $thumbnails = params.thumbnails || null;
	var $largeviews = params.largeviews || null;
	var $gridmaster = params.gridmaster || null;
	var $viewport = params.viewport || null;
	var $expertgrid = params.expertgrid || null;

	var bloatvalue = params.bloatvalue || 15;

	var entries = [];

	var init = function init () {

		var counter = 0;
		var limit = $thumbnails.length;

		while (counter < limit) {
			entries.push(new ExpertEntry(counter, $thumbnails.eq(counter), $largeviews.eq(counter)));
			counter++;
		};

		$expertgrid.bind('mouseenter', function(e){
			$expertgrid.addClass('subtle');
		});

		$expertgrid.bind('mouseleave', function(e){
			$expertgrid.removeClass('subtle');
		});

	};

	var ExpertEntry = function ExpertEntry (position, thumbnail, largeview) {

		var entry = this;
		entry.position = position;

		entry.$ = {};
		entry.$.thumbnail = thumbnail;
		var thumbheight = entry.$.thumbnail.height();
		var thumbwidth = entry.$.thumbnail.width();

		entry.$.largeview = largeview;
		entry.$.imagearea = entry.$.largeview.find('.imagearea');
		entry.$.blackband = entry.$.largeview.find('.blackband');
		entry.$.exit = entry.$.largeview.find('.exit');		

		entry.bloateffects = {
			height: thumbheight + bloatvalue,
			width: thumbwidth + bloatvalue
		};

		entry.reverteffects = {
			height: thumbheight,
			width: thumbwidth
		}; 

		var init = function init () {

			entry.$.thumbnail.bind('mouseenter', function(e){
				entry.bloat();
			});

			entry.$.thumbnail.bind('mouseleave', function(e){
				entry.revert();
			});

			entry.$.thumbnail.bind('click', function(e){
				entry.showLargeView();
			});

			entry.$.exit.bind('click', function(e){
				entry.hideLargeView();
			});

		};

		init();
	};

	ExpertEntry.prototype.bloat = function bloat () {
		var entry = this;

		entry.$.thumbnail.animate(entry.bloateffects, {
			duration: 250,
			queue: false
		});
	};

	ExpertEntry.prototype.revert = function revert () {
		var entry = this;
		entry.$.thumbnail.stop();
		entry.$.thumbnail.css(entry.reverteffects);
	};

	ExpertEntry.prototype.showLargeView = function showLargeView () {
		var entry = this;
		entry.revert();
		$viewport.css('display', 'block');
		$gridmaster.addClass('subtle');
		entry.$.largeview.addClass('selected');

		entry.$.imagearea.animate({
			width: '566px',
			height: '360px'
		}, {
			duration: 400,
			queue: false
		});

		entry.$.blackband.animate({
			top: 0
		}, {
			duration: 400,
			queue: false
		});
	};

	ExpertEntry.prototype.hideLargeView = function hideLargeView () {
		var entry = this;
		entry.$.imagearea.animate({
			width: '226px',
			height: '195px'
		}, {
			duration: 400,
			queue: false
		});

		entry.$.blackband.animate({
			top: '-360px'
		}, {
			duration: 400,
			queue: false,
			complete: function(){ $gridmaster.removeClass('subtle'); entry.$.largeview.removeClass('selected'); $viewport.css('display', 'none'); }
		});
	};

	init();
};