jQuery(function($){
    if($('.edit').length) return;
    var pages = $('#book > .b-load > div').length, 
    $book = $('#book', document).booklet({
        width:780,
        height:280,
        pageNumbers:false,
        overlays:false,
        arrows:true,
        arrowsHide:true,
        after: function(o)
        {
          $($('#pages select option').removeAttr('selected')[o.curr / 2]).attr('selected', true);
          
        }
        
    });
    renderBlackkey();

    if(pages > 2)
    {
        var $sel = $('<select></select>').change(function(){

            $book.booklet(parseInt($(this).val()));
        });
        for(var i = 0; i < pages; i = i + 2)
        {

        $('<option value="' + i +'"' + (!i ? 'selected' : '') + '>Seite ' + (0.5 * i + 1) + '</option>').appendTo($sel);
        }

        $sel.appendTo('#pages');
        $('<span>&lt;&lt; Zurück</span>').css('margin', '0 10px').click(function(){$book.booklet('prev')}).insertBefore($sel);
        $('<span>Weiter &gt;&gt;</span>').css('margin', '0 10px').click(function(){$book.booklet('next')}).insertAfter($sel);
    }
    
    
    var $a = $('#piano > ul > li > a');
    $('#piano > ul').css({
        marginLeft: $a.length * -55.5,
        width: $a.length * 111
    });
    
    $a.each(function(c){
        var $this = $(this);
        var $button = $('<div class="button">' + $this.text()+ '</div>').insertBefore(this);
        $this.text('');
        if(c < $a.length - 1 && c != 2)
        $('<li style="left:'+(c*111 + 91)+'px;" class="black"></li>').prependTo('#piano ul'); 
        $('<div></div>').css({height:78, width:111, position:'absolute', left:0, top:0, background:'#fff', opacity:0, cursor: 'pointer'})
        .mouseenter(function(){
            $('.button', this.parentNode).clearQueue().animate({
                top:25       
            });
        }).mouseleave(function(){
            $('.button', this.parentNode).clearQueue().animate({
                top:0           
            })
        }).click((function(href){
            return function(){
                window.location.href = href;
            };
        })($(this).attr('href'))).insertAfter(this);
    }).remove()

    //if(($.browser.msie && $.browser.version < 8.0)) $('#piano > div.gradient').remove();
    $('a.lightbox').lightBox();
});
var keys = false;
function renderBlackkey() {

    var w = $('#piano').width(),
        k = (Math.ceil((w-111) / 222) * 2 + 1),
        a = $('#piano > ul > li').length,
        b = new Array();
    if (keys) {
        a = keys;
    } else {
        keys = a;
    }
    //Alle Tasten bekommen schwarz
    for(var i = 0; i < k; i++) b.push(true);
    //Mittlere bekommen keine
    for(var i = 0; i < a - 1; i++) b[(((k-a) / 2)+i)] = false;;
    //2 und 3er Blöcke
    for(var i = 0; i < b.length; i++)
    {
      var j = -((k - a) / 2) + i;
      //alert(j);
      if(0 == (j - 2)%7) b[i] = false;
      if(0 == (j - 6)%7) b[i] = false;
    }
    
    $('.blackkey').each(function(){
        $(this).remove();
    });
    
    //Schwarze Tasten zeichnen
    
    for(var i = 0; i < b.length; i++) if(b[i]) $('<div class="blackkey"></div>').
    css('left', (w - (k - 2) * 111) / 2 + (i * 111)- 20).insertAfter('#content');

}

$(window).bind('resize',function(){
    renderBlackkey();
});