(function($){
  $.fn.slideBox = function(settings) {
    var config = {
      'maskHeight'  : '300px',
      'maskWidth'   : '400px',
      'maskZindex'  : '100',
      'maskPosition': 'relative',
      'overlay'     : true,
      'overlayId'   : 'overlay',
      'overlayType' : 'wholeBox',
      'overlayFire' : 'mouseenter',
      'overlayLeave': 'mouseleave',
      'animSpeed'   : 2000,
      'easing'      : 'swing',
      'topTitle'    : 'At the First Item',
      'bottomTitle' : 'At the Last Item',
      'delay'		: 1,
      'menuSpeed'	: 300
    };
    
    var settings = $.extend(config, settings);
    settings.defEasing = 'swing';
	$(this).data('animate', {state: true});
	if( $.easing.def) {
		$(this).data('easing', {plugin: true});
	}else {
		$(this).data('easing', {plugin: false});
		if(settings.easing != 'swing' && settings.easing != 'linear') {
		settings.easing = settings.defEasing;
		}
	}
		
	var inst = $(this).attr('id');
	var t = '';
    this.each(function(i) {
        
        // set up mask styles
        $(this).css({
          'overflow':'hidden',
          'height'  : settings.maskHeight,
          'width'   : settings.maskWidth,
          'z-index' : settings.maskZindex,
          'position': settings.maskPosition
        });

        // create the slider
        
        $(this).wrapInner('<div id="slider"></div>');
        
        //set up overlay
        if(settings.overlay) {
          var overLay = settings.overlayId + i;
          $('<div id="'+overLay+'" class="overlay-div"><a href="#" title="Previous" class="nav prev">Previous</a><a class="nav next" title="Next" href="#">Next</a></div>').prependTo(this);
          $('#'+overLay).css({
            'height'             : 0, 
				    'z-index'            : 10001,
				    'width'              : '100%', 
				    'position'           : 'absolute',
				    'top'                : 0,
				    'background-color'   : '#fff',
    				'background-image'   : 'url(images/hover-bg.gif)',
				    'background-repeat'  : 'repeat-x',
    				'display'            : 'none',
    				'border-bottom'      : '1px solid #aeaeae'
          });
          if(settings.overlayType == 'strip') {
            $('<div id="hover-line" style="height:5px; width:100%; background-color:#000; z-index:10000; position:absolute; top:0; "></div>').prependTo(this);
            var hoverDiv = $('#hover-line');
            hoverDiv.bind(settings.overlayFire,function(){
              $('#'+overLay).animate({height: '30px', opacity: 'show'}, settings.menuSpeed, function() {
                $(this).bind(settings.overlayLeave,function(){
                  $('#'+overLay).animate({height: '0', opacity: 'hide'}, settings.menuSpeed);
                });
              });
            });
          }else {
            var hoverDiv = $(this);
             hoverDiv.hover(
					     function(){
					        if(t) {
					          clearTimeout(t);
					        }
					        
						     $('#'+overLay).animate({height: '30px', opacity: 'show'}, settings.menuSpeed);
					     },
					     function() {
					       if(settings.delay > 0) {
					         var timerCallback = function() {
	                   $('#'+overLay).animate({height: '0', opacity: 'hide'}, settings.menuSpeed);
                   };
					         var time = (settings.delay * 1000);
					         t = setTimeout(timerCallback, time);
					         
					       }else {
 					         $('#'+overLay).animate({height: '0', opacity: 'hide'}, settings.menuSpeed);
					       }
						     
					     }
				    );
          }
         
				  
				  $('#'+overLay+' a.prev').addClass('atTop').attr('title', settings.topTitle);
        }
        
        // set up click handling and animations
        $('#'+overLay+' a.nav').click(function(e){
					if($('#'+inst).data('animate').state) {
						if( $(this).hasClass('prev') ) {
							var offset = $('#slider').position();
							if($(this).hasClass('atTop')) {
								//do nothing, already at the top
							}else {
                $('#'+inst).data('animate', {state: false});
								$('#'+overLay+' a.next').removeClass('atBottom');
								$(this).data('clicked', {name: $(this).attr('class')});
								var h = (offset.top + $('.box').height());
								$('#slider').animate(
									{top: h+'px'}, 
									settings.animSpeed,
									settings.easing,
									function(){
										var o = $('#slider').position();
										if(o.top == 0) {
											$('#'+overLay+' a.prev').addClass('atTop').attr('title', settings.topTitle);
										}else {
											$('#'+overLay+' a.next').attr('title', 'Next');
										}
										$('#'+inst).data('animate', {state: true});
										
									}
								);
								
							}
							
						}
						
						if( $(this).hasClass('next') ) {
							
							var offset = $('#slider').position();
	
							if($(this).hasClass('atBottom')) {
								//do nothing, already at the bottom
							}else {
								$('#'+inst).data('animate', {state: false});
								$('#'+overLay+' a.prev').removeClass('atTop');
								var h = (offset.top - $('.box').height());
								$('#slider').animate(
									{top: h+'px'}, 
									settings.animSpeed,
									settings.easing,
									function(){
										var o  = $('#slider').position(),
										    hi = $('#slider').height();
	
										if(( hi + o.top ) == $('.box').height() ) {
											$('#'+overLay+' a.next').addClass('atBottom').attr('title', settings.bottomTitle);
										}else {
											$('#'+overLay+' a.prev').attr('title', 'Previous');
										}
										$('#'+inst).data('animate', {state: true});
										
									}
								);
							}
						}
					}
				});
        
    });
    
    return this;
    
  };
})(jQuery);