var display;
var imgload = new Array();
addListener(window, 'load', iniEventHandlers);

function iniEventHandlers(){
    addListener(document.getElementById("play"), 'click', play);
    addListener(document.getElementById("stop"), 'click', stop);
    addListener(document.getElementById("forward"), 'click', forward);
    addListener(document.getElementById("backward"), 'click', backward);
    
    preload_img();
    
}//iniEventHandlers

function preload_img(){    
    var src_movie = document.getElementById("movie").src;
    var position_start = src_movie.indexOf("_", 0);
    var start_new_img_src = src_movie.substring(0,position_start+1);

    for(var j=1; j <= 20; j++){
        var num = j;
        if(num < 10){    
            num = num.toString();
            num = "0" + num;
        }
        imgload[j]=new Image();
        imgload[j].src= start_new_img_src + num + ".jpg";
    }
}

function get_new_img_src(operation){
    var src_movie = document.getElementById("movie").src;
    var position_start = src_movie.indexOf("_", 0);
    var position_end = src_movie.indexOf(".jpg", 0);
    var num_img_str = src_movie.substring(position_start + 1, position_end);
    var num_img = parseInt(num_img_str, 10);
    
    if(operation == "+")
        var new_num_img = num_img + 1;
    else if(operation == "-")
        var new_num_img = num_img - 1;
        
    if(new_num_img > 20)
        new_num_img = 1;
    if(new_num_img < 1)
        new_num_img = 20;
    return imgload[new_num_img].src;
}

function set_new_img_src(){
    var id_movie = document.getElementById("movie");
    id_movie.src = get_new_img_src("+");
    
    display = setTimeout("set_new_img_src()",300);
}

function addListener(element, baseName, handler){
    if(element.addEventListener)
        element.addEventListener(baseName, handler, false);
    else if(element.attachEvent)
        element.attachEvent('on' + baseName, handler);
    
}

function play(){
    display = setTimeout("set_new_img_src()",300);
    document.getElementById("play").disabled = true;
    document.getElementById("backward").disabled = true;
    document.getElementById("forward").disabled = true;
    
    document.getElementById("backward").style.backgroundImage = 'url(images/player/disable.jpg)';
    document.getElementById("play").style.backgroundImage = 'url(images/player/disable.jpg)';
    document.getElementById("forward").style.backgroundImage = 'url(images/player/disable.jpg)';
}

function stop(){
    clearTimeout(display);
    document.getElementById("play").disabled = false;
    document.getElementById("backward").disabled = false;
    document.getElementById("forward").disabled = false;
    
    document.getElementById("backward").style.backgroundImage = '';
    document.getElementById("play").style.backgroundImage = '';
    document.getElementById("forward").style.backgroundImage = '';
}

function forward(){
    var id_movie = document.getElementById("movie");
    id_movie.src = get_new_img_src("+");
}

function backward(){
    var id_movie = document.getElementById("movie");
    id_movie.src = get_new_img_src("-");
}