//once the DOM is ready
var startPerc = 0;
var DOM_elements_slider = '';
var html_constructor_begin = '<div class="slider_item"><table border="0" cellpadding="0" cellspacing="0" width="100%">' +
        '<tr style="height:11px;"><td class="wborder_lt"></td><td class="wborder_ct"></td>' +
        '<td class="wborder_rt"></td></tr>' +
        '<tr><td class="wborder_lm"></td>' +
        '<td class="wborder_cm"><a class="link" href="%LINK%" title=""><img class="img_main" src="';
var html_constructor_end = '" alt="" /><span class="db more_info">' +
        '<span class="title">%TITLE%</span><span class="date">%TITLE_B%</span></span></a></td>' +
        '<td class="wborder_rm"></td></tr><tr style="height:11px;"><td class="wborder_lb"></td>' +
        '<td class="wborder_cb"></td><td class="wborder_rb"></td>' +
        '</tr></table>' +
        '</div>';


window.addEvent('domready', function() {
    if( $('slider') ) {

        /* create the progress bar */
        progressBar = new dwProgressBar({
            container: $('progress-bar'),
            startPercentage: 0,
            speed:1000,
            boxID: 'box',
            percentageID: 'perc',
            displayID: 'text',
            displayText: true
        });

        progressBar.set(startPerc);
        currentPerc = startPerc;
        var img_links = [];

        images.each(function(item, index){
            img_links.push(item.img);
            if( index > 5 ) {
                return false;
            }
        });

        var loader = new Asset.images(img_links, {
            onProgress: function(counter,index) {
                progressBar.set((counter + 1) * (100 / images.length));
            },
            onComplete: function(){
                images.each(function(item){
                    if(item){
                        var imageHtmlBegin  = str_replace('%LINK%', item.slug, html_constructor_begin);
                        var imageHtmlEnd    = str_replace('%TITLE%', item.title, html_constructor_end);
                        imageHtmlEnd    = str_replace('%TITLE_B%', item.title_bold, imageHtmlEnd);
                        DOM_elements_slider += imageHtmlBegin + item.img + imageHtmlEnd;
                        $('image-holder').set('html','<div id="spitefirst"></div>'+DOM_elements_slider+'<div class="clear" id="spitelast"></div>');
                    }
                });
                
                $('progress-bar').setStyle('display','none');
                $('slider').setStyle('display','block');

                ff_slider();
            }
        });
    }
});