/*
 HalleScroll is powered by Alexis Pochettino (http://alexispochettino.com.ar)
 and help from @gbthedoctor (http://twitter.com/gbthedoctor)
 
 Just creating a <ul class="items"> inside a <div class="HalleScroll"> it should work.
 
 e.g.
    <div class="HalleScroll">
        <ul id="items">
            <li><span>This is an example of a scrolling list.</span></li>
            <li><span>Esto es un ejemplo de una lista desplazable.</span></li>
            <li><span>I made it for a website and I wanna share it.</span></li>
            <li><span>La hice para una página web y quiero compartirlo.</span></li>
            <li><span>It's my first jQuery script, I accept advices.</span></li>
            <li><span>Es mi primer script de jQuery, acepto consejos.</span></li>
            <li><span>Hope you like it.</span></li>
        </ul>
    </div>
*/

jQuery(document).ready(function() {
	var amount = 3; //Numbers of li showed in the scroll.
        jQuery(".HalleScroll > #items").hide(); //Let's play Hide & Seek
        jQuery(".HalleScroll").append("<div class='up'></div>"+
                               "<div class='list-container'>"+
                               "<div class='list'>"+
                               "</div>"+
                               "</div>"+
                               "<div class='down'></div>"); //Adding all the stuff to make it look good
        jQuery(".list").append(jQuery(".HalleScroll > #items").show()); //There you are! at the .list div!
        var h = jQuery("#items > li").height()+3; //I need the height to set de global height and the displacement.
        jQuery(".list-container").height((h*amount)+3); //Here you can set how many items do you want to show.
        var childCount = jQuery("#items > li").size(); //Counting childrens for not scrolling al pedo.
        var c = amount-1;
        //Starts the show:
        jQuery(".down").click(function(event) {
                if (c<(childCount-1)) {
                        jQuery(".list").animate({
                                top:"-="+h+"px"},
                                600);
                        c+=1;
                }
        });
        jQuery(".up").click(function(event) {
                if (c>(amount-1)) {
                        jQuery(".list").animate({
                                top:"+="+h+"px"},
                                600);
                        c-=1;
                }
        });
});