(function($){ $(function(){
    var clTimes={};
    var clCSlider = '';
    $('div.cl-slide').mouseout(function(){
        clCSlider = '';
        $('div.button',$(this)).css('visibility','hidden');
    });
    $('div.cl-slide').mousemove(function(){
        clCSlider = $(this).attr('id');
        $('div.button',$(this)).css('visibility','visible');
    });
    $('ul.slide',$('div.cl-slide')).each(function(){
        var $list = $(this);
        clTimes[$list.parent().attr('id')] = {'id':$list.parent().attr('id'),'val':0};
        $('li',$list).each(function(){
            $(this)
            .css({'background-image':'url('+$(this).data('image')+')'})
            .attr('data-index',$(this).index()+1);
        });
        var count = $('li',$list).length;
        var html='';
        for(i=1;i<=count;i++){
            html +='<li data-index="'+i+'">'+i+'</li>';
            if(i<count) html+='|';
        }
        $('.control .pages',$list.parent()).html(html);
        $('.control li[data-index="1"]',$list.parent()).addClass('current');
        if(count<2){
            $('li:first').clone().appendTo($list);
        }
        $('.control span',$list.parent()).html($('li:first',$list).data('title'));
    });
    $('div.cl-slide .button.right').click(function(){
        var $e = $('ul.slide>li:first',$(this).parent());
        var $p = $e.parent();
        $('.control li.current',$p.parent()).removeClass('current');
        delete clTimes[$p.parent().attr('id')];
        $('.progress',$p.parent()).css({'width':'0'});
        $('.control span',$p.parent()).html('&nbsp;');
        $e.animate({'margin-left':'-700px'},'slow',function(){
            $(this).remove().css({'margin-left':'0'}).appendTo($p);
            $('.control span',$p.parent()).html($('li:first',$p).data('title'));
            $('.control li[data-index="'+$('li:first',$p).data('index')+'"]',$p.parent()).addClass('current');
            clTimes[$p.parent().attr('id')] = {'id':$p.parent().attr('id'),'val':0};
        });
    });
    $('div.cl-slide .button.left').click(function(){
        var $e = $('ul.slide>li:last',$(this).parent());
        var $p = $e.parent();
        $e.remove().css({'margin-left':'-700px'}).prependTo($p);
        $('.control li.current',$p.parent()).removeClass('current');
        delete clTimes[$p.parent().attr('id')];
        $('.progress',$p.parent()).css({'width':'0'});
        $('.control span',$p.parent()).html('&nbsp;');
        $e.animate({'margin-left':'0'},'slow',function(){
            $('.control span',$p.parent()).html($('li:first',$p).data('title'));
            $('.control li[data-index="'+$('li:first',$p).data('index')+'"]',$p.parent()).addClass('current');
            clTimes[$p.parent().attr('id')] = {'id':$p.parent().attr('id'),'val':0};
        });
    });
    $('div.cl-slide .button.left').mouseenter(function(){
        $(this).css({'background-position': '0 -42px'});
    });
    $('div.cl-slide .button.left').mouseout(function(){
        $(this).css({'background-position': '0 0'})
    });
    $('div.cl-slide .button.right').mouseenter(function(){
        $(this).css({'background-position': '-25px -42px'});
    });
    $('div.cl-slide .button.right').mouseout(function(){
        $(this).css({'background-position': '-25px 0'})
    });
    $('div.cl-slide ul.slide').delegate('li','click',function(){
        document.location = $(this).data('url');
    });
    function clsNext($p,from,to){
        var $e = $('li:first',$p);
        $('.control li.current',$p.parent()).removeClass('current');
        delete clTimes[$p.parent().attr('id')];
        $('.progress',$p.parent()).css({'width':'0'});
        $('.control span',$p.parent()).html('&nbsp;');
        $e.animate({'margin-left':(-700*(to-from))+'px'},'slow',function(){
            for(i=from;i<to;i++){
                $('li:first',$p).remove().css({'margin-left':'0'}).appendTo($p);
            }
            $('.control span',$p.parent()).html($('li:first',$p).data('title'));
            $('.control li[data-index="'+$('li:first',$p).data('index')+'"]',$p.parent()).addClass('current');
            clTimes[$p.parent().attr('id')] = {'id':$p.parent().attr('id'),'val':0};
        });
    }
    function clsBack($p,to,from){
        for(i=from;i>to;i--){
            $('li:last',$p).remove().css({'margin-left':'0'}).prependTo($p);
        }
        var $e = $('li:first',$p);
        $e.css({'margin-left':(-700*(from-to))+'px'});
        $('.control li.current',$p.parent()).removeClass('current');
        delete clTimes[$p.parent().attr('id')];
        $('.progress',$p.parent()).css({'width':'0'});
        $('.control span',$p.parent()).html('&nbsp;');
        $e.animate({'margin-left':'0'},'slow',function(){
            $('.control span',$p.parent()).html($('li:first',$p).data('title'));
            $('.control li[data-index="'+$('li:first',$p).data('index')+'"]',$p.parent()).addClass('current');
            clTimes[$p.parent().attr('id')] = {'id':$p.parent().attr('id'),'val':0};
        });
    }
    $('div.cl-slide ul.pages li').click(function(){
        var $slide = $('ul.slide',$(this).parent().parent().parent());
        var from = $('li',$slide).data('index');
        var to = $(this).data('index');
        if(from!=to){
            if(to>from){
                clsNext($slide,from,to);
            }else{
                clsBack($slide,to,from);
            }
        }
    });
    $('div.cl-slide ul.pages li').mousemove(function(){
        $(this).addClass('hover');
    });
    $('div.cl-slide ul.pages li').mouseout(function(){
        $(this).removeClass('hover');
    });
    setTimeout(function(){
        $.each(clTimes,function(key,e){
            if(e.id==clCSlider) return true;
            e.val +=50;
            var max = parseInt($('li:first',$('#'+e.id)).data('speed'))*1000;
            if(e.val>=max){
                e.val = 0;
                $('.button.right',$('#'+e.id)).click();
            }else{
                $('.progress',$('#'+e.id)).css({'width':100/max*e.val+'%'});
            }
        });
        setTimeout(arguments.callee,50);
    },50);
});
})(jQuery);