window.onload = function () {
    var scroll, ex1, altura, tags;
    function roll() {};
    function id(id) {
	return document.getElementById(id);
}
    //muestra navegador de paginas
    id("navs").style.display = "block";
    altura = 400;
    //en base al numero de elementos selecciona un altura para scroller
    getPermutas = function () {
	if (document.getElementsByClassName) {
	    tags = id('scroller').getElementsByClassName("princasos");
	}
	else {
	    tags = id('scroller').getElementsByTagName("img");
	}
        tags = tags.length;
        
        if (tags <= 4) {
            altura = altura; 
        }
        else if (tags > 4 && tags <= 8) {
            altura = altura*2;
        }
        else if (tags > 8 && tags <= 12) {
            altura = altura*3; 
        }
        else {
            altura = altura*4; 
        }
        id("scroller").style.height = altura + "px";
    }
    //corremos funcion
    getPermutas();
    
    
    //animacion
    scroll = Animator.apply(id('scroller'), 'top : -'+ (altura - 400), {transition: Animator.makeElastic(.50),duration: ((altura/4)*5)});
    write = function(elemento, escrito) {
        document.getElementById(elemento).innerHTML = escrito;
    }
    ex1 = 1;    
    roll.dos = function(){
            switch (ex1) {
                case -1 : scroll.seekTo(1);write('contador', ' 2 ');break;
                case 1 : scroll.seekTo(1);write('contador', ' 2 ');break;
                default: scroll.seekTo(0);write('contador', ' 1 ');ex1 = 0;break;
            }
            ex1++;
        }
    roll.tres = function(){
            switch (ex1) {
                case -2 : scroll.seekTo(0.43);write('contador', ' 2 ');break;
                case -1 : scroll.seekTo(1);write('contador', ' 3 ');break;
                case 1 : scroll.seekTo(0.43);write('contador', ' 2 ');break;
                case 2 : scroll.seekTo(1);write('contador', ' 3 ');break;
                case 3 : scroll.seekTo(0);write('contador', ' 1 ');ex1 = 0;break;
                default: scroll.seekTo(0);write('contador', ' 1 ');ex1 = 0;break;
            }
            ex1++;
        }
    roll.cuatro = function(){
            switch (ex1) {
                case -3 : scroll.seekTo(0.347);write('contador', ' 2 ');break;
                case -2 : scroll.seekTo(0.511);write('contador', ' 3 ');break;
                case -1 : scroll.seekTo(1);write('contador', ' 4 ');break;
                case 1 : scroll.seekTo(0.347);write('contador', ' 2 ');break;
                case 2 : scroll.seekTo(0.511);write('contador', ' 3 ');break;
                case 3 : scroll.seekTo(1);write('contador', ' 4 ');break;
                case 4 : scroll.seekTo(0);write('contador', ' 1 ');ex1 = 0;break;
                default: scroll.seekTo(0);write('contador', ' 1 ');ex1 = 0;break;
            }
            ex1++;
        }
    //selecciona la función para la altura correspondiente
    switch (altura/4) {
        case 200: rueda = roll.dos;break;
        case 300: rueda = roll.tres;break;
        case 400: rueda = roll.cuatro;break;
        default: rueda = rueda;break;
    };
    scrollOn = function () {
        intervalo = setInterval(rueda,7000);
    };
    
    scrollOn();
    
    //botones de navegacion
    id('navsnext').onclick = function() {
        rueda();
        clearInterval(intervalo);
        scrollOn();
	return false;
        };
    id('navsprev').onclick = function() {
        ex1-=2;
        rueda();
        clearInterval(intervalo);
        scrollOn();
	return false;
        };
    
    //detiene la animacion si el mouse esta sobre los casos
    id('scroller').onmouseover = function(){clearInterval(intervalo);}
    id('scroller').onmouseout = function(){scrollOn();}
}