var bogi_active_a=null;
var bogi_bilderbuch_panel_active=null;
var bogi_bilderbuch_panel_active_blatt=null;

bogi_bilderbuch_panel_set_active = function(bilderbuch_id) {
    bogi_bilderbuch_panel_active=bilderbuch_id-2;
};

bogi_bilderbuch_panel_set_active_blatt = function(blatt_id) {
    bogi_bilderbuch_panel_active_blatt=blatt_id;
    $j(document).ready(function(){
        bogi_active_a=$j('#bilderbuch_panel_accordion h3 a[rel='+blatt_id+']');
        // console.log('set ',bogi_active_a);

        
    });
};

$j.fn.bogi_load_blatt = function(target_id) {
    // just in case we are list
    var el=$j(this).eq(0);
    var items_div=$j('#col3.bilderbuch .jImageListWidget .items');
    var scrollable_api=$j('.jImageListWidget_scrollable').scrollable({api:true});
    var overlay_api=$j('#col3.bilderbuch .jImageListWidget .jImageWidget a').overlay({api:true})
    // console.log('overlay_api=', overlay_api)
    // console.log('bogi_load_blatt for:',target_id, this);
    $j(items_div).empty();
    scrollable_api.reload();
    overlay_api.close();
    
    // Do stuff before ...
    $j(el).addClass('loading');
    
    // Start the request
    $j.getJSON('bilderbuch_get_images_for_blatt', {blatt_id:target_id}, function(json) {
            // We are succesfully? done
            // console.log('done',this,json);


            //set view
            $j(el).removeClass('loading').addClass('active');
            $j(bogi_active_a).removeClass('active');
            bogi_active_a=el;
            $j('#blatt_name').html(json.blatt_name);
            $j('#bilderbuch_name').html(json.bilderbuch_name);
            
            
            //delete elements
            $j('#blatt_name').html(json.blatt_name);

            // console.log(scrollable_api);
            
            
            //add new items
            
            $j.each (json.bilderliste,function (){
                // console.log(this);
                template='\
                <span id="jImageWidget_${id}" class="jImageWidget">\
                    <a rel="${id}" href="${url}">\
                        <img src="${thumb_url}"/>\
                    </a>\
                </span>'
                    .replace (/\${id}/g, this.id)
                    .replace (/\${thumb_url}/g, this.thumb_url)
                    .replace (/\${url}/g, this.url);
                
                $j(items_div).append(template);

            });

            
            
            // Make them rock
            $j('#col3.bilderbuch .jImageListWidget .jImageWidget a').bogi_gal();
            $j('.jImageWidget_has_a_tool_tip a').bogi_tooltip();

            scrollable_api.reload()
            

            var wrapper_width=parseInt($j('.jImageListWidget .scrollable_layout_wrapper').css('width'),10);
            var navi_width=parseInt($j('.jImageListWidget .navi').css('width'),10);
            // console.log(wrapper_width, navi_width);
            var navi_left= parseInt((wrapper_width-navi_width)/2,10);
            $j('.jImageListWidget .navi').css('left', navi_left);
            
            

            // Fix Bilderliste
            
            bilderliste = json.bilderliste;
        }); //json call
    
    // go back?
    return (false);
    
};

$j.fn.bogi_bilderbuch_panel = function() { 

    // loop through each target 
    return this.each(function() {
        // console.log('this=',this);
        // console.log('i am ', this);
        // get handle to tabs API. 
        jthis=$j(this)
        var rel=jthis.attr('rel');
        // console.log('this is rel:',rel);
        var target_id=parseInt(rel);
        // console.log(target_id);
        $j(this).click(function() {
            // console.log('clicked for:',target_id);
            return($j(this).bogi_load_blatt(target_id));
        })
                
    })
}






$j(document).ready(function(){
    
    $j("#bilderbuch_panel_accordion").accordion({
            animated: 'easeOutBounce',
            active: bogi_bilderbuch_panel_active,
            icons: {
                        header: "ui-icon-circle-arrow-e-mw",
                        headerSelected: "ui-icon-circle-arrow-s-mw"
            } 
        });
    
        
    $j('#bilderbuch_panel_accordion h3 a').bogi_bilderbuch_panel();

});