(function($) {
  $.fn.homeBox = function(options) {
	$.fn.homeBox.o = $.extend({}, $.fn.homeBox.defaults, options);
	var $boxes = this.find('.box');
	$.fn.homeBox.w = $boxes.width();
	$.fn.homeBox.h = $boxes.height()+1;
	this.find('.row').css({
		position : 'relative',
		height: $.fn.homeBox.h
	});
	$.fn.homeBox.colors = Array('#FFFFFF', '#000000', '#000000', '#ffffff', '#000000', '#000000', '#000000', '#000000', '#000000');
	$.fn.homeBox.bgColors = Array('#827A7A', '#F8CD05', '#FFFFFF', '#000000', '#FFFFFF', '#FFFFFF', '#FFFFFF', '#FFFFFF', '#FFFFFF');
	return $boxes.each(function(i) {
		var $this = $(this);
		if (i == 0 || i % 3 == 0 ) {
			$this.data('position', 0);
		} else if ( i % 3 == 1 ) {
			$this.data('position', $.fn.homeBox.w+1);
		} else if ( i % 3 == 2 ) {
			$this.data('position', $.fn.homeBox.w*2+2);
		}
		$this.css({
			position: 'absolute',
			top: '0px',
			left: $this.data('position')
		});
		$('<a class="closeMe">Close</a>').appendTo($this.find('.contentOpen'));
		$this.bind('click',function(){
			if ($(this).data('clicked') != 1) {
				$(this).data('clicked','1');
				$.fn.homeBox.open($(this));
			}
		})
		$this.find('.closeMe').bind('click',function(){
			$.fn.homeBox.close($this);
		})
	});
  };
  $.fn.homeBox.open = function(obj) {
  		var $this = $(obj);
  		$this.data('border', $this.css('borderRightWidth') );
  		$this.find('.content').hide();
		$this.find('.contentOpen').show();
		var boxIndex = parseInt($this.attr("id").replace(/[^\d]+/, ''))
		var boxBgColor = $.fn.homeBox.bgColors[boxIndex];
		var boxTextColor = $.fn.homeBox.colors[boxIndex];
 		return	$this.css({
				zIndex: '1000',
				borderRightWidth: 0,
				backgroundColor : boxBgColor,
				color : boxTextColor
			}).animate({
				left: '0px',
				width: $.fn.homeBox.w*3+3
			} , $.fn.homeBox.o.time,'linear',function(){
				/*var element = $(this).children('.contentOpen').children('.catDescriptionHome').children('.scroll_wrapper');
				$(element).jScrollPane({
					scrollbarWidth : 15
				});*/
			});
  };

  $.fn.homeBox.close = function(obj) {
		var $this = $(obj);

 		return	$this.animate({
				left: $this.data('position'),
				width: $.fn.homeBox.w
			},$.fn.homeBox.o.time,'linear',function(){
				$this.css({
				zIndex: '0',
				borderRightWidth: $this.data('border'),
				backgroundColor : 'transparent',
				color : '#000000'
				}).data('clicked','0');
				$(this).find('.content').show();
				$(this).find('.contentOpen').hide();
			});
  };

  $.fn.homeBox.defaults = {
	 time: 300
  };

})(jQuery);