/* #### circular functionality #### */

var mycarousel_itemList = [
	{link: 'kalender_energieundleben.html', linkclass: 'ref1', img_title: 'Energie und Leben', url: '../images/kalender/kalenderthumbnails_energieleben.jpg', ref_headline: 'Energie und Leben', ref_description: 'Der vielseitige Allrounder ist ein Typ für alle Fälle.<br /><a class="linkPDF" href="../downloads/Energie_und_Leben_2012.pdf" target="_blank">Kalender-PDF herunterladen</a><br />', img_layer: '../images/kalender/layer_energie_leben.jpg'},
	{link: 'kalender_koestliches.html', linkclass: 'ref2', img_title: 'Köstliches fürs ganze Jahr', url: '../images/kalender/kalenderthumbnails_koestliches.jpg', ref_headline: 'Köstliches fürs ganze Jahr', ref_description: 'Auf seinem Gebiet ist der Spezialist eine Koryphäe.<br /><a class="linkPDF" href="../downloads/Koestliches_fuers_Jahr_2012.pdf" target="_blank">Kalender-PDF herunterladen</a>', img_layer: '../images/kalender/layer_koestliches.jpg'},
	{link: 'kalender_termine.html', linkclass: 'ref3', img_title: 'Die Termine', url: '../images/kalender/kalenderthumbnails_termine.jpg', ref_headline: 'Die Termine', ref_description: 'Perfekte Organisation ist das Metier des Strategen.<br /><a class="linkPDF" href="../downloads/Termine_2012.pdf" target="_blank">Kalender-PDF herunterladen</a><br />', img_layer: '../images/kalender/layer_termine.jpg'},
	{link: 'kalender_energiewelten.html', linkclass: 'ref4', img_title: 'EnergieWelten', url: '../images/kalender/kalenderthumbnails_energiewelten.jpg', ref_headline: 'EnergieWelten', ref_description: 'Der Innovative geht gerne ins Detail.<br /><a class="linkPDF" href="../downloads/Energiewelten_2012.pdf" target="_blank">Kalender-PDF herunterladen</a><br />', img_layer: '../images/kalender/layer_energiewelten.jpg'},
	{link: 'kalender_momente.html', linkclass: 'ref5', img_title: 'Momente der Energie', url: '../images/kalender/kalenderthumbnails_momente.jpg', ref_headline: 'Momente der Energie', ref_description: 'Wahres Format und nicht zu übersehen: der Großzügige.<br /><a class="linkPDF" href="../downloads/Momente_der_Energie_2012.pdf" target="_blank">Kalender-PDF herunterladen</a>', img_layer: '../images/kalender/layer_momente.jpg'},
	{link: 'kalender_individuell.html', linkclass: 'ref7', img_title: 'Individuelle Kalender', url: '../images/kalender/kalenderthumbnails_individuell.jpg', ref_headline: 'Individuelle Kalender', ref_description: 'Unverwechselbar und einzigartig: der Individualist.<br><a class="linkPDF" href="../downloads/Individuelle_Kalender.pdf" target="_blank">Prospekt herunterladen</a>', img_layer: '../images/kalender/layer_individuell.jpg'},
	{link: 'kalender_scheckkarten.html', linkclass: 'ref6', img_title: 'Scheckkartenkalender', url: '../images/kalender/kalenderthumbnails_scheckkarten.jpg', ref_headline: 'Scheckkarten kalender', ref_description: 'Der Effektive erreicht mit kleinem Aufwand große Wirkung.', img_layer: '../images/kalender/layer_scheckkarten.jpg'}
];





// Layer vom Kalender ein / ausblenden
var lastlayer = '';
function callayer(layid, action) {

	if(action == 'show') {
	  if(lastlayer != '') document.getElementById(lastlayer).style.display = 'none';
	  
		document.getElementById(layid).style.display = 'block';
		lastlayer = layid;
	} else {
		document.getElementById(layid).style.display = 'none';
		lastlayer = '';
	}

}



// Layer Div schreiben
function print_callayer() {

	var tmpHtml = '';
	
 	var len = mycarousel_itemList.length;
	
	for(m = 0; m < len; m ++) {
		var the_linkclass = mycarousel_itemList[m].linkclass;
		var the_img_layer = mycarousel_itemList[m].img_layer;
	  var the_img_title = mycarousel_itemList[m].img_title;
	  
		tmpHtml += '<div class="kalenderlayer" id="layer_'+the_linkclass+'"><a title="SCHLIEßEN" class="layerdivclose" onclick="callayer(\'layer_'+the_linkclass+'\', \'hide\')">SCHLIEßEN X</a><img src="'+the_img_layer+'" alt="'+the_img_title+'" height="398" width="306" /></div>';
		
	}

	// Schreibt in den Platzhalter die Layer DIVs
  document.getElementById('callayerdiv').innerHTML = tmpHtml;
}


function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
{
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
    var idx = carousel.index(i, mycarousel_itemList.length);
    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
    $('.ref_description').not(':eq(1)').hide();
      if(state != 'init'){
      $('.ref_description').eq(1).fadeOut();
    }
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
    carousel.remove(i);
    $('.ref_description').eq(1).fadeIn();
};

// Item html creation helper.

function mycarousel_getItemHTML(item)
{
   var tmpHtml = '<a href="#" onclick="callayer(\'layer_'+item.linkclass+'\',\'show\')" title="Großansicht Kalender" class="' + item.linkclass + ' thumblink"><img alt="' + item.img_title + '" src="' + item.url + '" width="162" height="195" /></a>';
	tmpHtml += '<div class="ref_description"><h1>' + item.ref_headline + '</h1>' + item.ref_description + '<a href="' + item.link + '">ZUM KALENDER &gt;</a></div>';
   return tmpHtml;
};





// #### init callback stage ####

function mycarousel_initCallback(carousel) {

    $('.stageControl').mouseover(function(){
      carousel.stopAuto();
    }).mouseout(function(){
		  carousel.startAuto();
    });

    jQuery('#mycarousel-next').bind('click', function() {
        carousel.startAuto(0);
        carousel.next();
        
        return false;
    });

    jQuery('#mycarousel-prev').bind('click', function() {
				carousel.startAuto(0);
        carousel.prev();
        return false;
    });

   // assign functionality to the controls
   jQuery('.jcarousel-control a').bind('click', function() {
        //carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
      var i = 1;
      for (i=1;i<=mycarousel_itemList.length;i++) {
         var tmpclass = 'ref' + i;
         if (jQuery(this).hasClass(tmpclass)) {
            var j = i-1;
            carousel.scroll(jQuery.jcarousel.intval(j));
            return false;
         }
      }
    });

   // assign functionality to the thumbnails
      jQuery('.jcarousel-thumbs li').live('click', function() {
         //alert($.jcarousel.intval($(this).attr("jcarouselindex"))-1);
         carousel.scroll(($.jcarousel.intval($(this).attr("jcarouselindex"))-1));
         //return false;

    });


    jQuery('.jcarousel-scroll select').bind('change', function() {
				carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
        return false;
    });

    jQuery('#mycarousel-next').bind('click', function() {
				carousel.next();
        return false;
    });

    jQuery('#mycarousel-prev').bind('click', function() {
				carousel.prev();
        return false;
    });

};





// #### init callback control ####

function myctrlcarousel_initCallback(carousel) {

    $('.ctrlControl').mouseover(function(){
      carousel.stopAuto();
    }).mouseout(function(){
      carousel.startAuto();
    });

};




jQuery(document).ready(function() {

	// Layer Div schreiben
	print_callayer();
	


    jQuery('#referenceStageModule').jcarousel({
      scroll: 1,
        wrap: 'circular',
      //auto: 3,
      animation: 500,
      buttonNextHTML: '<a href="#" class="stageControl"></a>',
    buttonPrevHTML: '<a href="#" class="stageControl"></a>',
    itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
    itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback},
      initCallback: mycarousel_initCallback,
    itemFirstInCallback: {
      onBeforeAnimation: mycarousel_itemFirstInCallback_onBeforeAnimation,
      onAfterAnimation: mycarousel_itemFirstInCallback_onAfterAnimation
    }

    });


   jQuery('#jcarousel_ctrl').jcarousel({
      scroll: 1,
        //wrap: 'last',
      //auto: 3,
      animation: 500,
      buttonNextHTML: '<a href="#" class="ctrlControl"></a>',
        buttonPrevHTML: '<a href="#" class="ctrlControl"></a>',
        //itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        //itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback},
      initCallback: myctrlcarousel_initCallback
  });

});

// 1
function mycarousel_itemFirstInCallback_onBeforeAnimation(carousel, item, i, state, evt){
    $('.ref_description').eq(1).show();
    
    /*
		Hier wuerde das grosse Bild autom. eingeblendet, dass war aber doch nicht gewuenscht.
		
		// Anzahl der mycarousel_itemList Elemente
		var itemListlen = mycarousel_itemList.length;

    var refid =  i + 1;

		// Erzeugt die richtige Nummer, ggf. mit Umrechnung (Controll Elemente haben bspw. den Wert "-5")
		if(refid <= 0) {
    	var stopper = 0;
      while(stopper == 0) {
        refid += itemListlen;
        if(refid > 0) stopper = 1;
			}
		} else if(refid > itemListlen) {
			var stopper = 0;
      while(stopper == 0) {
        refid -= itemListlen;
        if(refid <= itemListlen) stopper = 1;
			}
		}
		// alert(i + ' = ' +refid);

		// Layer einblenden
		callayer('layer_ref'+refid,'show');
		
		*/
		
};
// 3
function mycarousel_itemFirstInCallback_onAfterAnimation(carousel, item, i, state, evt){
    $('.ref_description').not(':eq(1)').hide();
};