/*
    adds browsing functionality to every div with class="image_browser" defined in the markup 
    with a unique id="browser_{1,2,3,...n}" corresponding to the "browsers"-array
*/
var IB = {
    
    init: function (prev_img, next_img) {
        
        // buttons for navigation
        this.prev_img = prev_img;
        this.next_img = next_img;
        
        for (var article in articles) { // for every browser
            if ( $(article) ) { // if there is an imagebrowser defined in the markup
                $(article).image_no = 0; // start with image 1. this property allways contains the number of the current image
                IB.markup(article); // add browser-functionality to image
            }
        }
    },
    
    // executed for every imagebrowser in document
    markup: function (name) {
        var image = $(name);
        var div = image.parentNode;
        var imgs = articles[name];
        /* -------------------------------------------------------
            create navigation markup
        ------------------------------------------------------- */
        var navi = document.createElement('div');
        navi.className = 'navigation';
        // prev-img-button
        var prev_img = document.createElement('img');
        prev_img.src = this.prev_img;
        prev_img.alt = 'vorheriges Bild';
        prev_img.className = 'previous';
        navi.appendChild(prev_img);
        // next-img-button
        var next_img = document.createElement('img');
        next_img.src = this.next_img;
        next_img.alt = 'n'+String.fromCharCode(228)+'chstes Bild';
        next_img.className = 'next';
        navi.appendChild(next_img);
        // pagecount
        var current_image = document.createElement('span');
        current_image.appendChild( document.createTextNode( image.image_no+1 ) );
        var imagecount = document.createElement('strong');
        imagecount.appendChild(current_image);
        num_imgs = imgs.length; // amount of images assigned to this browser
        imagecount.appendChild( document.createTextNode( '/'+num_imgs ) );
        navi.appendChild(imagecount);
        // add to document
        div.appendChild(navi);
        /* -------------------------------------------------------
            end create navigation markup
        ------------------------------------------------------- */

        // assign eventhandlers
        prev_img.onclick = function () {
            var el = $(name);
            el.image_no = (el.image_no == 0) ? (imgs.length - 1) : el.image_no - 1;
            IB.swap_image(name, el.image_no); // swap image
            IB.update_imagecount(name);
        }
        
        next_img.onclick = function () {
            var el = $(name);
            el.image_no = (el.image_no == imgs.length - 1) ? 0 : el.image_no + 1;
            IB.swap_image(name, el.image_no); // swap image
            IB.update_imagecount(name);
        }
    },
    
    swap_image: function (article, index) {
        var imgs = articles[article];
        $(article).src = imgs[index];
    },
    
    update_imagecount: function (article) {
        var el = $(article);
        var span = el.parentNode.getElementsByTagName('span')[0]; // contains image number
        span.firstChild.data = el.image_no + 1;
    }
}



window.onload = function () {
    IB.init('img/basics/icons/previous.gif', 'img/basics/icons/next.gif');
}