var el=0;
var fast = false;
var all = $('#slide>ul>li').length;
var speed = 10000;
$('#slide li').show();

// Create button
var mylist = $('<ul/>');
for(var i=0; i<all; i++)
    $('<li/>').appendTo(mylist);

$('#slide>ul').after("<nav/>");
$('#slide>nav').append(mylist);
$('#slide>nav>ul>li').show();

function slideShow(sp){
    e = $('#slide>ul>li').eq(el);
    e.addClass('act');
    e.find('img').animate({right:'5%', 'opacity':0.5},sp*0.3).animate({right:'7%', 'opacity':1},sp*0.7).delay(sp);
    e.find('div').animate({top:'3%', 'opacity':0.5},sp*0.3).animate({top:'5%', 'opacity':1},sp*0.7).delay(sp);
    e.find('a').animate({bottom:'23%', 'opacity':0.5},sp*0.3).animate({bottom:'30%', 'opacity':1},sp*0.7).delay(sp);
}

function slideHide(sp){
    var e = $('#slide>ul>li');
    e.removeClass('act');
    e.find('img').stop().clearQueue().animate({opacity:0, left:-600},sp, function(){$(this).attr('style','')});
    e.find('div').stop().clearQueue().animate({opacity:0, top:-200},sp, function(){$(this).attr('style','')});
    e.find('a').stop().clearQueue().animate({opacity:0, bottom:-10},sp, function(){$(this).attr('style','');});
}

function slide(){
    slideHide(speed*0.3);
    if(all==el){ el = 0;}

    $('#slide>nav li').css({background: '#fff'});
    $('#slide>nav li').eq(el).css({background: '#11A2D7'});

    slideShow(speed*0.7);

    el++;
}

$('#slide nav li').click(function(){
    slideHide(speed/11);
    clearInterval(clId);
    el=$(this).index();
    clId = setInterval(slide,speed);
    slide();
});
$('#slide>ul>li>a').mouseover(function(){
    clearInterval(clId);
});
$('#slide>ul>li>a').mouseout(function(){
    clId = setInterval(slide,speed);
});
slide()
var clId =setInterval(slide,speed);