(function($){

 /// ********** bindDelay
    $.fn.bindDelay = function(delay, type, fn) {
        var timer;
        var delayImpl = function(e, obj) {
            if (timer != null) { clearTimeout(timer); }
            var newFn = function() { fn(e, obj); };
            timer = setTimeout(newFn, delay);
        }
		return this.bind(type, function(e) { return delayImpl(e, this); });        						
    };


})(jQuery);

LS = {};

LS.MAIN = {
	init:			function(options){
					
					var self = this;					

					this.map = options.map;					
					this.updateLettersCallback = options.updateLettersCallback;
					
					this.squaresContainer = $('#squares-container');
					this.letterInfo = $('#letter-info');	
					this.preloadContainer = $('#preload-container');	
					
					this.smallSizeThreshold = 7;
					this.unknown = 'unknown';
					
					this.preloadedChars = [];

					//this.squaresContainer.delegate("img", "click", function(e){
					//	self.onLetterClick(e, $(this));
					//});
					//this.squaresContainer.delegate("img", "mouseenter", function(e){
					//	self.onLetterMouseEnter($(this));
					//});
					//this.squaresContainer.delegate("img", "mouseleave", function(e){
					//	self.onLetterMouseLeave($(this));
					//});
					
					this.squaresContainer.delegate(".sq-nav", "click", function(e){
						self.onLetterClick($(this));
					});
					this.squaresContainer.delegate(".sq-nav", "mouseenter", function(e){
						self.onLetterMouseEnter($(this));						
					});
					this.squaresContainer.delegate(".sq-nav", "mouseleave", function(e){
						self.onLetterMouseLeave($(this));											
					});
					
					
					

				},
	onLetterClick:		function(navEl){						
					var isPrev = navEl.hasClass('sq-prev');
					var imgEl = navEl.parent().find('img');
					
					var rel = imgEl.attr('rel');
					if(rel != this.unknown){
						var letter = rel.substr(0,1);
						var curNum = parseInt(rel.substr(1));
						var number = this.map[letter];
						var newNum = curNum + 1;
						if(isPrev){
							newNum = curNum - 1;
						}
						if(newNum > number){
							newNum = 1;
						}
						if(newNum < 1){
							newNum = number;
						}
						
						var code = letter + newNum;
						imgEl.attr('src', 'images/letters/'+code+'.jpg');
						imgEl.attr('alt', code);
						imgEl.attr('rel', code);
						
						this.updateLetterInfo(imgEl);
					}

				},
	onLetterMouseEnter:	function(navEl){
					var isPrev = navEl.hasClass('sq-prev');
					var imgEl = navEl.parent().find('img');
	
	
					this.updateLetterInfo(imgEl);
					var img = $(imgEl);					
					var o = img.offset();
					this.letterInfo.css('top', (o.top - 18) + 'px');
					this.letterInfo.css('left', (o.left - 0) + 'px');
					
					this.letterInfo.show();					
				},
	onLetterMouseLeave:	function(navEl){
					this.letterInfo.hide();					
				},			
	updateLetters:		function(input){
					
					this.squaresContainer.hide();
					
					var chars = input.split("");
					var len = chars.length;
					var cssClass = 'std';
					var w = 124; //117+7;  img width + padding
					if(len > this.smallSizeThreshold){
						cssClass = 'small';
						w = 87; //80+7;
					}
					var ulWidth = w * len;
					if(ulWidth >= 958){
						ulWidth = 958;
					}	
					var html = [];
					var h = 0;
					html[h++]  = '<ul class="squares '+cssClass+'">';
					for ( var i=0; i<len; ++i ){
						html[h++]  = '<li>';
						html[h++]  = this._buildLetter(chars[i]);
						html[h++]  = '<div class="sq-nav sq-prev"></div>';
						html[h++]  = '<div class="sq-nav sq-next"></div>';
						html[h++]  = '</li>';
					}
					html[h++]  = '</ul>';	
					html[h++]  = '<div class="clear"></div>';	

					var htmlStr = html.join('');
					
					this.squaresContainer.children().remove();					
					this.squaresContainer.append(htmlStr);
					this.squaresContainer.css('width',ulWidth + 'px');
					if(len > 0){
						this.squaresContainer.show();
					}
					
					// preload images for the last char entered
					this._preloadImagesForChars(chars);
					
					if(this.updateLettersCallback){
						this.updateLettersCallback(len);
					}
					
				},
	updateLetterInfo:	function(imgEl){	
					var img = $(imgEl);
					var rel = img.attr('rel');
					var msg = 'unknown';
					if(rel != this.unknown){
						var letter = rel.substr(0,1);
						var curNum = rel.substr(1);												
						var number = this.map[letter];
						msg = curNum + ' of ' + number;
					}
					this.letterInfo.text(msg);
	
				},
	_buildLetter:		function(letter){
					var l = letter.toUpperCase();
					var number = this.map[l];
					var code = '';
					if(number){
						code = l + this._randomFromTo(1, number);
					}else{
						code = this.unknown;						
					}
					return '<img src="images/letters/'+code+'.jpg" alt="'+code+'" rel="'+code+'">';
				},
	_randomFromTo:		function(from, to){
       					return Math.floor(Math.random() * (to - from + 1) + from);
				},
	_preloadImagesForChars:	function(chars){
					if(chars){
						var len = chars.length;
						for ( var i=0; i<len; ++i ){							
							if($.inArray(chars[i], this.preloadedChars) < 0){
								this._doPreload(chars[i]);
								this.preloadedChars.push(chars[i]);
							}													
						}						
					}
				},
	_doPreload:		function(letter){
					var self = this;
					var l = letter.toUpperCase();
					var number = this.map[l];
					if(number){
						var doIt = function(){
							for ( var i=1; i<=number; ++i ){
								var imgSrc = 'images/letters/'+l+i+'.jpg';
								var image = $('<img />').attr('src', imgSrc);							
								self.preloadContainer.prepend(image);														
							}
						};
						
						setTimeout(doIt, 500);
						
					}
				}

};