(function(){
//create onDomReady Event
window.onDomReady = DomReady;

//Setup the event
function DomReady(fn)
{
	//W3C
	if (document.addEventListener) 
		{ document.addEventListener("DOMContentLoaded", fn, false); }
	//IE
	else 
		{ document.onreadystatechange = function(){readyState(fn)} }
}

function readyState(fn)
{
 	if (document.readyState == "interactive") 
		{ fn(); }
}

window.onDomReady( function() {
	window.smallerGalleries = Array();
	try {
		j$('.smaller-gallery').each( function(i, item){ 
			var _instance = new function(){};
			j$.extend(_instance, MiniGallery);
			_instance.initGallery(item);
			window.smallerGalleries.push(_instance); 
		});
	} catch ( _cought ) {
		alert("oh my, there was an error in my script...");
		console && console.log && console.log( _cought );
	}
	
});

MiniGallery = {

	'_container' : null,
	'_carusel':null,
	'_caruselWrap': null,
	'_items':null,
	'_controlsWrap': null,
	'_bigImageWrap':null,
	'_bigImage':null,
	'_bigImageTitle': null,
	
	'_defaultOptsStr': 'ciw=40px,cih=40px,biw=170px,bih=100px,w=170px',
	'_options': Array(),
	'_iconsInSection': 0,
	'_sectionWidth': 0,

	'initGallery': function(galleryDiv){
		this._setupElems(galleryDiv);
		this._processOptions();
		this._setupView();
		this._showMeDaMoney();
	},
	
	'_setupElems': function(galleryDiv){
		this._container = j$(galleryDiv);
		this._carusel = this._container.find('.gallery-carusel');
		this._caruselWrap = this._container.find('.gallery-carusel-wrapper');
			this._items = this._container.find('.carusel-item');
		this._controlsWrap = this._container.find('.gallery-controls');
		this._bigImageWrap = this._container.find('.big-image-wrapper');
			this._bigImage = this._container.find('.big-image');
			this._bigImageTitle = this._container.find('.image-title');
	},
	
	'_setupView': function(){
		this._processThumbs();
		this._setupControls();
		this._startDisplay();
	},
	
	'_processOptions': function(){
		var _optionsStr = this._container.attr('gallery-options') || this._defaultOptsStr;
		var _options = Array();
		j$.each(_optionsStr.split(','), function(i,val){
			_options[val.split('=')[0]] = val.split('=')[1];
		});
		
		this._container.css('width', _options['w']);
		this._bigImage.css('height', _options['bih']);
		
		this._options = _options;
	},
	
	'_processThumbs': function(){
	
		var _itemW = parseInt(this._options['ciw']);
		var _itemH = parseInt(this._options['cih']);
		// 2 = 2pixels for border
		this._iconsInSection = parseInt(parseInt(this._container.css('width')) / (parseInt(_itemW) + 2));
		var _caruselW = ( parseInt(_itemW) * this._items.length ) + ( 2 * this._items.length /* take border into acount*/ );
		
		this._caruselWrap.css('width', _caruselW);
		this._sectionWidth = this._iconsInSection * (_itemW + 2);
		
		// add image borders to height
		this._carusel.height( parseInt(this._carusel.css('height')) + 2);
		
		var _that = this;
		this._items.each( function(i, item){
			var _item = j$(item)
			_item.css('width', _itemW + "px");
			_item.css('height', _itemH + "px");
			_item.css('background-image', 'url('+_item.attr('thumbsrc')+')' );
			_item.bind('click', function(event){
				_that.displayBigImageForCaruselItem(j$(this).index());
			});
		});
	},
	'_setupControls': function(){
		var _that = this;
		// number of sliding sections
		var _numSections = parseInt( this._items.length / this._iconsInSection );
		if (this._items.length % this._iconsInSection != 0)
			_numSections++;
		for (var i = 0; i < _numSections ; i++){
			var _item = j$('<div class="radio-button radio-open"></div>');
			_item.bind('click', function(){
				var _index = j$(this).index();
				_that.scrollToPosition(_index);
				_that.showSelectedControl(_index);
			});
			this._controlsWrap.append(_item);
		}
	},
	'_startDisplay': function(){
		this._container.show();
	},
	'_showMeDaMoney': function(){
		this.showSelectedControl(0);
		this.displayBigImageForCaruselItem(0);
	},
	
	//#### Functional functions
	'scrollToPosition': function(position){
		this._caruselWrap.animate({left: -( position * this._sectionWidth ) });
	},
	
	'displayBigImageForCaruselItem': function(index){
		var _item = this._items.eq(index);
		this._bigImage.empty();
		this._bigImage.append('<img src="'+_item.attr('image')+'"/>');
		//this._bigImage.css('background-image', 'url('+_item.attr('image')+')' );
		this._bigImageTitle.text(_item.attr('title'));
	},
	
	'showSelectedControl': function(index){
		j$('.gallery-controls').children().attr('class','radio-button radio-open');
		j$('.gallery-controls').children().eq(index).attr('class','radio-button radio-closed');
	}
	
};


})();