$(document).ready(function(){


    /* Using custom settings */
    
    $("a.friends_img").fancybox({
        overlayOpacity: 0.7,
        overlayColor: '#fffd66'
    });
    
    $("a.inline").fancybox({
        hideOnContentClick: false,
        overlayOpacity: 0.7,
        overlayColor: '#fffd66',
        showCloseButton: true,
        showNavArrows: false,
        enableEscapeButton: false,
        titleShow: false
    });
    
    $("a.detail").click(function(){
		$('#fancybox-wrap').css('background-image','url("fileadmin/templates/images/shoedetails_fancyboxouter_bg_620.png")');
	}).fancybox({
        hideOnContentClick: true,
        overlayOpacity: 0.7,
        overlayColor: '#fffd66',
        scrolling: 'no',
		onStart: function(){
			$('a#fancybox-close').html('schließen').css({width:'95px',right:'11px'});
		}
    });
    
    
    //Arrays zum speichern der Inhalte
    var $BildArray = new Array(); //Bilder 
    var $TextArray = new Array(); //Texte
    //Inhalte aller DIVs mit der Klasse data in den Arrays speichern
    $('div.data').each(function(){
        $tmpNr = $(this).attr('content'); //speichern des Attributwertes von "content"
        $tmpNr = parseInt($tmpNr);
        $BildArray[$tmpNr] = $(this).children('.lurchiheft_bild').html(); //speichern des HTML-Quelltextes
        $TextArray[$tmpNr] = $(this).children('.lurchiheft_info').html();
    })
    
    var $direction = '';
    var $nr = null;
    var $curNr = 0;
	var $highest = $('span#heft-highest').attr('nr');
	$highest = parseInt($highest);
    var $lowest = $('span#heft-lowest').attr('nr');
	$lowest = parseInt($lowest);
	
    //JEDEM Bild mit der Klasse fancy-left einen Onklick-Handler zuweisen
    $('img.fancy-left').click(function(){
    
        
        if ($nr == null) { //beim ersten Klick ist die globale Variable $nr noch NULL
            $nr = $(this).attr('nr'); //$nr wird die Nummer des aktuellen Elementes zugewiesen...   
            $nr = parseInt($nr);
        }
        if ($nr > $lowest) {
            $nr = $nr - 1; //und einen runtergerechnet, da bei einem "Klick nach links " das vorherige Element angezeigt werden soll
        }
        else {
            $nr = $highest;
        }
        
        
        $('div#fancybox-inner div.lurchiheft_bild').html($BildArray[$nr]); // der HTML-Inhalt der Fancybox wird mit durch den Inhalt aus dem Array ersetzt
        $('div#fancybox-inner div.lurchiheft_bild img.img-loading').attr('src',$('div#fancybox-inner div.lurchiheft_bild img.img-loading').attr('tmp'));
        $('div#fancybox-inner div.lurchiheft_info').html($TextArray[$nr]);
        
    }).css('cursor', 'pointer');
    
    $('img.fancy-right').click(function(){
    
        
        if ($nr == null) {
            $nr = $(this).attr('nr');
            $nr = parseInt($nr);
        }
        if ($nr < $highest) {
            $nr = $nr + 1;
        }
        else {
            $nr = $lowest;
        }
		
        $('div#fancybox-inner div.lurchiheft_bild').html($BildArray[$nr]);
		$('div#fancybox-inner div.lurchiheft_bild img.img-loading').attr('src',$('div#fancybox-inner div.lurchiheft_bild img.img-loading').attr('tmp'));
        $('div#fancybox-inner div.lurchiheft_info').html($TextArray[$nr]);
        
    }).css('cursor', 'pointer');
    
    $('a#fancybox-close').click(function(){
        $nr = null;
    });
    
   
    $('.jscroll, #scrollarea').jScrollPane({
        showArrows: false,
        arrowSize: 16,
        scrollbarWidth: 12
    });
    $('.jScrollPaneDrag').css('width', ($('.jScrollPaneDrag').width() - 2) + 'px');
    $('#scrollarea').css('margin-top', '0');
    
    $('a#pflegetipps').fancybox();
});