var fadespeed = 1000;    //fade in and fade out speed (title and description)
var slidespeed = 1000;   // slide speed 
var xml_url = "/wp/index.php/featured-posts-feed/";   //source xml file 

//
$(function() {
    var my_cont = 0;
    //ajax reques to get the source xml file
    $.ajax({
        type: "GET",
        url: xml_url,
        dataType: "xml",
        // retrieved the xml file
        success: function(xml) {
            // het the <post> nodes one by one
            $(xml).find('post').each(function() {
                var pheader = $(this).find('header').text();

                var title = $(this).find('title').text();
                var subtitle = $(this).find('subtitle').text();
                var image = $(this).find('image').text();
                var url = $(this).find('link').text();
                my_cont++;
                //adding the href attributes to the links for the images                                                                               
                $('#img_link_' + my_cont).attr("href", url);
                // storing the info of the images src, title, subtitle 
                slider.data.push({ "id": "slide-img-" + my_cont, "client": title, "desc": subtitle, "image": image });

            });

            $('#slide-img-1')
            // once the image has loaded, execute this code
                    .load(function() {
                        // start the carousel initialization after the first image is loaded
                        slider.init();
                    })
            // *finally*, set the src attribute of the new image to our image
                    .attr('src', slider.data[0]['image']);
        }
    });
});
var slider = {
    started: 0,
    num: -1,
    cur: 0,
    cr: [],
    al: null,
    at: 10 * 887,
    ar: true,
    // initialize function
    init: function() {
        if (!slider.data || !slider.data.length)
            return false;
        var d = slider.data;
        slider.num = d.length;
        var pos = Math.floor(Math.random() * 1);
        $('#general_link').attr("href", $('#img_link_1').attr("href"));
        $('#img_link_5').attr("href", $('#img_link_1').attr("href"));
        $('#slide-img-5').attr("src", $('#img_link_1').attr("src"));
        slider.data.push({ "id": "slide-img-" + (slider.num + 1), "client": slider.data[0]['client'], "desc": slider.data[0]['desc'], "image": slider.data[0]['image'] });
        //initialize the possition of all images
        for (var i = 0; i <= slider.num; i++) {
            $('#' + d[i].id).css({ left: ((i - pos) * 887) });
            if (i < slider.num)
                $('#slide-nav').append('<a id="slide-link-' + i + '" href="#" onclick="slider.slide(' + i + ');return false;" onfocus="this.blur();" ></a>');
        }
        // show the first image
        $('img,div#slide-controls', $('div#slide-holder')).fadeIn();
        slider.text(d[pos]);
        slider.on(pos);
        slider.cur = pos;
        window.setTimeout('slider.auto();', slider.at);
    }, //function at the end of the carousel, after last image - will reset the position of the images to get an infinite carousel
    slend: function(pos) {
        var d = slider.data;
        slider.cur = 0;
        pos = 0;
        for (var i = 0; i <= slider.num; i++) {
            $('#' + d[i].id).css({ left: ((i - pos) * 887) });
        }
    }, //function at the end of each slide - will fade in the title and description of the new slide    
    shdes: function(pos) {
        var d = slider.data;
        $('#general_link').attr("href", $('#img_link_' + (pos + 1)).attr("href"));
        slider.text(d[pos]);
        $('#slide-client').fadeIn(fadespeed);
        $('#slidearrows').fadeIn(fadespeed);
        $('#slide-desc').fadeIn(fadespeed);
        slider.started = 0;
    }, //function that will be triggered before any auto-slide and calculate the next slide id
    auto: function() {
        if (!slider.ar)
            return false;
        var next = slider.cur + 1;
        if (next > slider.num) next = 0;
        slider.slide(next);
    }, //function to prepare slide effect, make sure the images needed are loaded     
    slide: function(pos) {
        if (pos < 0 || pos > slider.num || pos == slider.cur)
            return;
        if (slider.started == 1) return;
        slider.started = 1;
        window.clearTimeout(slider.al);
        var d = slider.data;
        if (pos - slider.cur == 1) {
            if ($('#slide-img-' + (pos + 1)).attr('src') == '') {
                $('#slide-img-' + (pos + 1))
                // once the image has loaded, execute this code
             .load(function() {
                 slider.exec_slide(pos);
             })
                // *finally*, set the src attribute of the new image to our image
             .attr('src', slider.data[pos]['image']);
            }
            else slider.exec_slide(pos);
        }
        else {
            slider.load_img(slider.cur + 1, pos);
        }
    }, // recursive function to load images
    load_img: function(cur, pos) {
        var d = slider.data;
        if ($('#slide-img-' + (cur + 1)).attr('src') == '') {
            $('#slide-img-' + (cur + 1))
            // once the image has loaded, execute this code, check if we need to load other images or just start the slide
        .load(function() {
            if (cur < pos)
                slider.load_img(cur + 1, pos);
            else
                slider.exec_slide(pos);
        })
        .attr('src', slider.data[cur]['image']);
        }
        else
            if (cur < pos)
            slider.load_img(cur + 1, pos);
        else
            slider.exec_slide(pos);
    }, //set the right bullet on and off  on each slide
    on: function(pos) {
        $('#slide-nav a').removeClass('on');
        $('#slide-nav a#slide-link-' + pos).addClass('on');
    }, //set the title and description 
    text: function(di) {
        slider.cr['a'] = di.client;
        slider.cr['b'] = di.desc;
        $('#slide-client span').html(di.client);
        $('#slide-desc').html(di.desc);
    }, //execute the slide, the real animation effect
    exec_slide: function(pos) {
        var d = slider.data;
        $('#slide-client').fadeOut(fadespeed);
        $('#slidearrows').fadeOut(fadespeed);
        $('#slide-desc').fadeOut(fadespeed);
        window.setTimeout(function() { slider.shdes(pos) }, fadespeed);
        for (var i = 0; i <= slider.num; i++)
            $('#' + d[i].id).stop().animate(
    { left: ((i - pos) * 887) }, {
        duration: slidespeed,
        easing: 'easeOutQuart'//change physics effect here
    });
        slider.on(pos);
        slider.cur = pos;
        if (pos == slider.num) {
            slider.on(0);
            window.setTimeout(function() { slider.slend(pos) }, (slider.num * slidespeed));
        }
        slider.al = window.setTimeout('slider.auto();', slider.at);
    }
};