(function($) {
    $.fn.extend({
        thumbSlider: function(options) {
			
			var defaults = {
    			 thumbWidth: 40,
    			 thumbHeight: 40,
    			 thumbListClass: 'slideList',
    			 thumbFixSize: 'height'
    		};
			
			
			var options = $.extend(defaults, options);
			
			return this.each(function() { 
				var obj = $(this);
				var op  = options;
				
				obj.buildThumbList(obj, op);
				obj.prepareImageBox(obj, op);
				obj.initLinks(obj, op);
			})
        }
    });
    
    $.fn.initLinks = function(object, options)
    {
    	object.next().find('a').click(function() {
    		var rel = $(this).attr('rel');
    		var objInfo = object.offset();
    		var imgWidth = object.find('div img:first').width();
    		
    		if (rel == 1) {
    			var newPos = 0;
    		} else {
    			var newPos = ((rel - 1) * imgWidth);
    		}

    		object.find('div:first').animate({
    			'left' : '-' + newPos + 'px'
    		}, 1000);
    		
    		object.next().find('a').css({
    			opacity: 0.5
    		});
    		
    		$(this).css({
    			opacity: 1
    		});
    	});
    }
    
    /**
     * load the auto animation
     */
    $.fn.prepareImageBox = function(object, options)
    {
    	object.css({
    		'position': 'relative',
    		'overflow': 'hidden'
    	});
    	
    	var imageCount  = object.find('img').length;
    	var imageWidth  = 0;
    	var imageHeight = object.find('img:first').height();
    	
    	object.find('img').each(function() {
    		imageWidth += $(this).width();
    	});
    	
    	var imageHolder = '<div class="thumbSliderBox" style="width:' + imageWidth + 'px;height:' + imageHeight + 'px;position:absolute;top:0;left:0;">' + object.html() + '</div>';
    	object.html(imageHolder);
    }

    $.fn.buildThumbList = function(object, options)
    {
    	var thumbList = '<ul class="' + options.thumbListClass + '">';
    	var num = 1;
    	
    	object.find('img').each(function() {
    		var imageWidth  = $(this).width();
    		var imageHeight = $(this).height();
    		var fix         = (options.thumbFixSize == 'height') ? 'height="' + options.thumbHeight + '";' : 'width="' + options.thumbWidth + '";';
    		
    		thumbList += '<li style="width:' + options.thumbWidth + 'px;height:' + options.thumbHeight + 'px;overflow:hidden;position:relative;">';
    		thumbList += '<a href="javascript:void(0);" rel="' + num + '" style="position:absolute;top:0;left:0;"><img src="' + $(this).attr('src') + '" ' + fix + ' alt="" /></a>';
    		thumbList += '</li>';
    		num++;
    	});
    	
    	thumbList += '</ul>';
    	
    	object.after(thumbList);
    	
    	object.next().find('a').css({
    		opacity: 0.5
    	});
    	
    	object.next().find('a:first').css({
    		opacity: 1
    	});
    }
	
})(jQuery);