var global_i = 0;
var global_j = 0;
var my_timout = null;
$(window).load(function () {
    set_alpha_images();
    load_top_img();
});

function set_alpha_images() {
    var slider_width = 120;

    var slider_customers = $('[id$=my_slider_customers]');

    var kids_customers = slider_customers.children();

    var slider_customers_width = 140;

    slider_width = slider_customers_width;

    $(slider_customers).css({ "width": slider_width + "px", "padding-top": "20px", "padding-right": "0px", "padding-bottom": "45px" });

    var j = 0;
    for (j = 0; j < kids_customers.length; j++) {
        $(kids_customers[j]).css({ "position": "absolute", "left": "0", "display": "" });
        if (global_j == j) {
            if ($(kids_customers[j]).attr("src") != undefined) {
                $(kids_customers[j]).css({ "width": slider_width + "px" });
                $(kids_customers[j]).animate({ "opacity": 0 }, 800);
                $(kids_customers[Number((global_j + 1) % kids_customers.length)]).animate({ "opacity": 1 }, 800, function () {
                    $(this).removeAttr("style");
                    $(this).css({ "position": "absolute", "left": "0", "display": "" });
                    $(this).css({ "width": slider_width + "px" });
                });
            }
            else {
                global_j = Number(global_j + 1);
                if (global_j == kids_customers.length) {
                    global_j = 0;
                }                
            }
        }
        else {
            $(kids_customers[j]).css({ "opacity": 0, "width": slider_width + "px" });
        }
    }

    global_j = Number(global_j + 1);
    if (global_j == kids_customers.length) {
        global_j = 0;
    }


    my_timout = setTimeout(function () { set_alpha_images(); }, 4800);
}

function load_top_img() {
    $('[id$=top_image]').css({ "display": "", "opacity": "0", "height" : "0px" });
    $('[id$=top_image]').animate({ "height": "80px" }, 300, function () {
        $('[id$=top_image]').removeAttr("style");
        $('[id$=top_image]').css({"opacity": "0"});
        $('[id$=top_image]').animate({ "opacity": "1" }, 250, function () {
            $('[id$=top_image]').removeAttr("style");
        });
    });
}

function draw_image(img_src, img_id) {
    var img = new Image();

    img.onload = function () {
        document.getElementById(img_id).setAttribute('src', img_src);
    }

    img.src = img_src;
}