/*********************************************
© teamrubber (http://www.teamrubber.com)

SCRIPT NOTES
expects a slide container (html element) with "id=slides"
will treat container's children (but not the children's children) nodes as individual slides 
expects a controller container (html element) with "id=controller"
must javascript file must be imported below containers
**********************************************/


/* INTIALILISE */

// USER SETTINGS
speed = 3000 // slideshow speed 
num_fade_out = 10 // number of steps - more equals slower transition
num_fade_in = 10 // number of steps - more equals slower transition
fade_out_easing = 1.1 // 1.1 slow to dissapper
fade_in_easing = 0.9 // 0.9 fast to appear
current_id = 0 // first item to display
// END USER SETTINGS




// makes a list of values with easing
function easeInOut(from_value, to_value, total_steps, powr) { 
    // (powr = 1) = linear
    diff = to_value - from_value
    var steps = []
    var calc = 0
    for (var i=0; i<total_steps; i++){
        calc = from_value+(Math.pow(((1 / total_steps) * i), powr) * diff)
        steps.push(Math.round(calc*100)/100)
    } 
    steps.push(to_value) // make complete range  e.g. [1, 0.5, 0] not [1, 0.5]
    return steps
}

// fixed settings
fade_out = easeInOut(0.99, 0.1, num_fade_out, fade_out_easing) 
fade_in = easeInOut(0.1, 0.99, num_fade_in, fade_in_easing) 
fade_out_index = 0
fade_in_index = 0


// opacity setup
var transparency = ""
var fully_visible = 0.99
var fully_transparent = 0.1
if (document.getElementsByTagName("body")[0].style.opacity != undefined) {
    transparency = "opacity" // safari firefox
} else if (document.getElementsByTagName("body")[0].style.filter != undefined) {
    transparency = "filter" // IE
    
    for (var i=0; i<num_fade_out; i++){
        var scaled_value = fade_out[i] * 100
        fade_out[i] = "alpha(opacity="+scaled_value+")"
    }
    for (var i=0; i<num_fade_in; i++){
        var scaled_value = fade_in[i] * 100
        fade_in[i] = "alpha(opacity="+scaled_value+")"
    }
    fully_visible = "alpha(opacity=99)"
    fully_transparent =  "alpha(opacity=1)"
}

// slide & controller setup
var slides = document.getElementById("slides").childNodes
filter_text_nodes = []
for (var i=0; i<slides.length; i++) {
    if (slides[i].nodeName != "#text" && slides[i].nodeName != "#comment"){
        filter_text_nodes.push(slides[i]) 
    }
}
var slides = filter_text_nodes

var controller = ""
var button_class = ""
for (var i=0; i<slides.length; i++) {
	slides[i].onmouseover = pause
	slides[i].onmouseout = play
	
	if (i == current_id){ // first item
	    button_class = "button_on"
	    slides[0].style[transparency] =  fully_visible // visible
	} else {
	    button_class = "button_off"	
	    slides[i].style[transparency] = fully_transparent // transparent
	}

	controller += '<span class="'+button_class+'" onmouseover="jumpToSlide('+i+')" onmouseout=play()>&nbsp;</span>'
}
num_slides = slides.length

document.getElementById("controller").innerHTML = controller // display controller
controls = document.getElementById("controller").childNodes


/* SLIDESHOW FUNCTIONS */

function jumpToSlide(target){
    clearInterval(slideID)
    slides[current_id].className = "hide"
    controls[current_id].className = "button_off"
    slides[current_id].style[transparency] = fully_transparent
    
    current_id = target
    
    slides[current_id].className = "show"
    controls[current_id].className = "button_on"
    slides[current_id].style[transparency] = fully_visible
}

function slideShow(){
    
    try { clearInterval(fadeoutID) } catch(err) {}
    try { clearInterval(fadeinID) } catch(err) {}

    init_date = new Date()
    now_ms = init_date.getTime()
    diff = now_ms - then_ms

    if (diff > speed){ // change

       fade_out_index = 0
       fade_in_index = 0

       clearInterval(slideID) // stop slideshow
       fadeoutID = setInterval(fadeout, 83)
       // 62ms = 16.1fps, 50ms = 20fps, 40ms = 25fps, 33ms = 30fps
    }
}

function fadeout(){

    try { clearInterval(slideID) } catch(err) {}
    try { clearInterval(fadeinID) } catch(err) {}

    if (fade_out_index < num_fade_out){

		slides[current_id].style[transparency] = fade_out[fade_out_index]
		fade_out_index ++
		
	} else {

		slides[current_id].className = "hide"
		controls[current_id].className = "button_off"
		
		current_id = (current_id + 1 == num_slides) ? 0 : current_id + 1 // increment slide id
		
		slides[current_id].className = "show"
		controls[current_id].className = "button_on"
		
		clearInterval(fadeoutID) // stop fadeout
		fadeinID = setInterval(fadein, 83) // fadein next item
	}        
}

function fadein(){

    try { clearInterval(slideID) } catch(err) {}
    try { clearInterval(fadeoutID) } catch(err) {}

    if (fade_in_index < num_fade_in){

        slides[current_id].style[transparency] = fade_in[fade_in_index]
        fade_in_index ++
		
    } else {
        clearInterval(fadeinID)
        play()
    }
}

function pause(){
    clearInterval(slideID)
}

function play(){ 
    init_date = new Date()
    then_ms = init_date.getTime()
    now_ms = init_date.getTime()
    slideID = setInterval(slideShow, 1500) // every second
}

play() // auto play