ikikkok Banner Slide jQuery Plug-In 0.1 Beta

jQuery(function($){
    $.fn.extend({
		ikikkokSlider : function($_config){
			var 	$_config = $.extend(
			{
				itemCount : 0,
				activeItem : 0,
				nextItem : 0,
				prevItem : 1,
				duration : 6000,
				height : 60
			}, $_config);
			
			return this.each(function(){
				
				/* Declaer varidbles*/
				var $_interval;
				var $this = $(this);
				var $navigator = $(this).find('div.navigator');
				var $contents = $(this).find('div.contents');

				$_config.itemCount = $contents.children('div').length;

				$contents.css('height',$_config.height);
					
				/* appending navigation buttons */
				$navigator.append('<div class="navi-left"></div><div class="navi-prev"><span></span></div><div class="navi-item"><span></span></div><div class="navi-next"><span></span></div><div class="navi-right"></div>');
				
				/* set navigation buttons position */
				$navigator.css('margin', ($_config.height - 25)+'px auto auto 3px');
								
				/* appending navigation buttons */
				for(var i=0; i<$_config.itemCount; i++){
					$this.find('div.navi-item span').append('<div>' + (i+1) + '</div>');
				}
				
				/* set mose event for anothor buttons */
				$this.find('div.navi-item').find('div').each(function(){
					$(this).mouseover(function(){
						if(!$(this).hasClass('on'))
						$(this).removeClass('out').addClass('over');
					}).mouseout(function(){
						if(!$(this).hasClass('on'))
						$(this).removeClass('over').addClass('out');
					});
				});
				
				/* set mose event for prev button */
				$this.find('div.navi-prev span').mouseover(function(){
					$(this).addClass('over');
				}).mouseout(function(){
					$(this).removeClass('over');
				});
				
				/* set mose event for next button */
				$this.find('div.navi-next span').mouseover(function(){
					$(this).addClass('over');
				}).mouseout(function(){
					$(this).removeClass('over');
				});
				
				/* on next button click */
				$this.find('div.navi-next').click(function(){
					doNext();
				});
				
				/* on prev button click */
				$this.find('div.navi-prev').click(function(){
					doPrev();
				});

				/* on anothor buttons click */
				$this.find('div.navi-item span').find('div').each(function(){
					$(this).click(function(){
						doSlide($(this).index());
					});
				});
				
				/* reset active button item */
				function clearActiveButton(){
					/* set navigation buttons position */
					$this.find('div.navi-item div').removeClass('on').addClass('out');
				}
				
				/* set active button item */
				function setActiveButton($_item){
					$this.find('div.navi-item div').eq($_item).removeClass('out').addClass('on');
				}
				
				/* display next item */
				function doNext(){
					doSlide($_config.nextItem);
				}
				
				/* display prev item */
				function doPrev(){
					doSlide($_config.prevItem);
				}

				/* display prev item */
				function doStart(){
					doSlide($_config.activeItem);
				}
				
				/* sliding to current item */
				function doSlide(item){
					clearActiveButton();
					setActiveButton(item);
					
					/* clear and set interval */
					if($_interval) clearInterval($_interval);
					$_interval = setInterval(doNext, $_config.duration);
					
					$_config.activeItem = item;
					$_config.prevItem = (item == 0)? $_config.itemCount - 1 : item-1;
					$_config.nextItem = (item == $_config.itemCount - 1)? 0 : item+1;
					
					/* set navigation buttons new position if first div inside contents more than height */
					$_items = $contents.children('div');
					
					if($_config.height < $_items.first().height()){
						$_config.height = $_items.first().height();
						$navigator.css('margin', ($_config.height - 26)+'px auto auto 5px');
					}
					
					/* show item if is activeItem and hide item if not activeItem */
					$contents.children('div').each(function(){
						if($(this).index() != item){
							$(this).hide();
						}
					});
					
					/* animate slide */
					$_index = $contents.children('div:visible').index();
					$_active = $_items.eq($_index);
					$_next = $_items.eq(item);
					//alert(item);
					
					$_active	.stop().fadeOut(1000 , function(){
						$_next.fadeIn(3500);
					});

				}
				
				doStart();
							
			});
		}
  	});
});

div.navigator{
	position:absolute;
	z-index:9999;
	/*background:url(images/bg-ikikkok-slide.png);*/
}
div.navigator div{
	float:left;
}
div.navigator div.on{
	background:#fff;
	color:#000;
	font:11px tahoma;
}
div.navigator div.over{
	background:#fff;
	color:#000;
	font:11px tahoma;
}
div.navigator div.out{
	background:#7e7e7e;
	color:#444;
	font:11px tahoma;
}
div.navi-left{
	background:url(images/bg-ikikkok-slide.png) 0px top;
	margin:0px;
	height:21px;
	width:3px;
}
div.navi-prev{
	background:url(images/bg-ikikkok-slide.png) 130px 0px;
	cursor:pointer;
}
div.navi-prev span{
	background:url(images/bg-ikikkok-slide.png) 142px -22px;
	margin:3px 2px;
	height:15px;
	width:10px;
	display:block;
}
div.navi-prev span.over{
	background:url(images/bg-ikikkok-slide.png) 117px -22px;
}
div.navi-item{
	background:url(images/bg-ikikkok-slide.png) 195px 0px;
}
div.navi-item div{
	margin:3px 2px;
	cursor:pointer;
	height:15px;
	width:18px;
	text-align:center;
	background:url(images/bg-ikikkok-slide.png) 60px;
}
div.navi-next{
	background:url(images/bg-ikikkok-slide.png) 130px 0px;
	cursor:pointer;
}
div.navi-next span{
	background:url(images/bg-ikikkok-slide.png) 155px -22px;
	margin:3px 2px;
	height:15px;
	width:10px;
	display:block;
}
div.navi-next span.over{
	background:url(images/bg-ikikkok-slide.png) 130px -22px;
}
div.navi-right{
	background:url(images/bg-ikikkok-slide.png) 3px 0px;
	margin:0px;
	height:21px;
	width:3px;
}
div.contents div{
	display:inline;
	position:absolute;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IKIKKOK Banner Slide Demo</title>
<link rel="stylesheet" type="text/css" href="jQuery/css/ikikkok-slide.css"/>
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
<script language="javascript" src="jQuery/jquery-1.6.2.min.js"></script>
<script language="javascript" src="jQuery/ikikkok-slide.js"></script>
<script>
$(document).ready(function(){
	if($('#ikikkok-slide').get(0)){
		$('#ikikkok-slide').ikikkokSlider({height:200});
	}
});
</script>
</head>
<body>
<div id="ikikkok-slide">
    <div class="navigator"></div>
    <div class="contents">
        <div><img src="images/b1.jpg" /></div>
        <div class="demo1"><div>Modify your banner content here.</div></div>
        <div class="demo2">
        	<ol>
            	<li class="html"><div>Modify your banner content here.</div></li>
            	<li class="link">Hypertext Link</li>
            </ol>
        </div>
    </div>
</div>
</body>
</html>

#ikikkok-slide{
	width:790px;
	height:200px;
}
#ikikkok-slide div.demo1{
	width:790px;
	height:200px;
	color:#9C0;
	font:bold 18px tahoma;
	background:url(../images/b2.jpg) no-repeat;
}
#ikikkok-slide div.demo1 div{
	width:790px;
	text-align:center;
	margin-top:80px;
	color:#fff;
}
#ikikkok-slide div.demo2{
	width:790px;
	background:#666;
}
#ikikkok-slide div.demo2 ol{
	height:200px;
	margin:0px;
	padding:0px;
	list-style:none;
}
#ikikkok-slide div.demo2 ol li.html{
	height:170px;
	font:bold 15px tahoma;
	color:#fff;
}
#ikikkok-slide div.demo2 ol li.html div{
	width:790px;
	text-align:center;
	margin-top:80px;
}
#ikikkok-slide div.demo2 ol li.link{
	height:30px;
	text-align:right;
	margin:5px 10px auto auto;
	font:13px tahoma;
	color:#fff;
}