jQuery(document).ready(function(){
        var divparent = jQuery("#slider"),
        	liitem = jQuery("#slider ul li"),
        	i = 0,
			time = 5000;

        liitem.css({ display: "none" });
        //liitem.find("span").css({ opacity: 0 });
		liitem.find("span").css({ display: "none" });
        liitem.first().css({ display: "block" });
        //liitem.find("span").first().css({ display: "block", opacity: "0.7" });
		liitem.find("span").first().css({ display: "block" });

        //create pgings
		divparent.append("<div class='pagination' />");
		var pagination = jQuery(".pagination");
        liitem.each(function(){
            pagination.append("<a href='#' rel='"+i+"' class='pagins'>"+(i+1)+"</a>");
            i++;
        });
        
        divparent.find("a.pagins").first().addClass("active");

        jQuery("a.pagins").click(function(){ 
			paginclick(jQuery(this));
			return false;
		});
        
        function paginclick(el){
			var links = jQuery("a.pagins");
            links.removeClass("active");
            el.addClass("active");
            var currel = el.attr("rel");
            //liitem.find("span").animate({ opacity: 0 }, 100);
			liitem.find("span").fadeOut(100, function(){
				if(jQuery.browser.msie){
					jQuery(this).css('filter', '');
				}
			});
            liitem.fadeOut(1500);
            jQuery(liitem[currel]).fadeIn(1500, function(){
                
            });
			//jQuery(liitem[currel]).find("span").animate({ opacity: "0.7" }, 1000);
			jQuery(liitem[currel]).find("span").fadeIn(1000, function(){
				if(jQuery.browser.msie){
						jQuery(this).css('filter', '');
					}
			});
			clearInterval(intHandler);
			interval(time);
        }
		
		var interval = function(time){
			intHandler = setInterval(function(){
			    anim();
			}, time);
		}
		
		interval(time);
        
        function anim(){
			var links = jQuery("a.pagins");
            var curlink = jQuery("a.pagins.active");
            var currel = parseInt(curlink.attr("rel"));
            links.removeClass("active");
			
			if(currel >= links.length-1){
                currel = -1;
            }else{  }
			
			jQuery(links[currel+1]).addClass("active");
            //liitem.find("span").animate({ opacity: 0 }, 100);
			liitem.find("span").fadeOut(100, function(){
				if(jQuery.browser.msie){
					jQuery(this).css('filter', '');
				}
			});
            liitem.fadeOut(1500);
            jQuery(liitem[currel+1]).fadeIn(1500, function(){
            });
			jQuery(liitem[currel+1]).find("span").fadeIn(1000, function(){
				if(jQuery.browser.msie){
					jQuery(this).css('filter', '');
				}
			});
			//jQuery(liitem[currel+1]).find("span").animate({ opacity: "0.7" }, 1000);
        }
    });