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

var mycarousel_itemList = [
	{linkclass: 'ref1', img_title: 'EWR Worms', url: '../images/referenzen/referenzen_ewr.jpg', ref_headline: 'EWR Worms', ref_description: 'Die EWR in Worms feiert mit ihren Kunden ihr <br>100-jähriges Firmen-<br>Jubiläum.<br />&nbsp;'},
	{linkclass: 'ref2', img_title: 'Stadtwerke Osnabrück', url: '../images/referenzen/referenzen_osnabrueck.jpg', ref_headline: 'Stadtwerke Osnabrück', ref_description: 'Die Stadtwerke Osnabrück unterstützen Projekte für Kinder und Jugendliche.<br/>&nbsp;'},
	{linkclass: 'ref3', img_title: 'Pfalzwerke', url: '../images/referenzen/referenzen_pfalzwerke.jpg', ref_headline: 'Pfalzwerke', ref_description: 'Bei den Pfalzwerken in Ludwigshafen steht der Kundenservice im Mittelpunkt.<br />&nbsp;'},
	{linkclass: 'ref4', img_title: 'Stadtwerke Lübeck', url: '../images/referenzen/referenzen_luebeck.jpg', ref_headline: 'Stadtwerke Lübeck', ref_description: 'Die Stadtwerke Lübeck werben für die kulinarische Vielfalt und zeigen ausgewählte Restaurants.'},
	{linkclass: 'ref5', img_title: 'Stadtwerke Werl', url: '../images/referenzen/referenzen_werl.jpg', ref_headline: 'Stadtwerke Werl', ref_description: 'Die Stadtwerke Werl präsentieren sich als wichtiger Sponsor für Vereine.<br/>&nbsp;'},
	{linkclass: 'ref6', img_title: 'WSW', url: '../images/referenzen/referenzen_wsw.jpg', ref_headline: 'WSW Wuppertal', ref_description: 'Unter dem Motto "wir wuppen das" würdigt <br>die WSW soziales Engagement.<br/>&nbsp;'},
	{linkclass: 'ref7', img_title: 'EnBW', url: '../images/referenzen/referenzen_enbw.jpg', ref_headline: 'EnBW', ref_description: 'Die EnBW lädt zu einer kulinarischen Reise durch Baden-Württemberg ein.<br />&nbsp;<br />&nbsp;'},
	{linkclass: 'ref8', img_title: 'badenova', url: '../images/referenzen/referenzen_badenova.jpg', ref_headline: 'badenova', ref_description: 'Die badenova ruft zur Energiewende auf und setzt verstärkt auf erneuerbare Energien.<br/>&nbsp;'},
	{linkclass: 'ref9', img_title: 'Stadtwerke Duisburg', url: '../images/referenzen/referenzen_duisburg.jpg', ref_headline: 'Stadtwerke Duisburg', ref_description: 'Die Stadtwerke Duisburg stellen gut gelaunte Duisburger "Typen" vor.<br/>&nbsp;'},
	{linkclass: 'ref10', img_title: 'SWK Krefeld', url: '../images/referenzen/referenzen_swk.jpg', ref_headline: 'SWK Krefeld', ref_description: 'Die SWK in Krefeld informiert über ihre Leistungen und ihr kulturelles Engagement.<br />&nbsp;'},
	{linkclass: 'ref11', img_title: 'DEW 21', url: '../images/referenzen/referenzen_dew21.jpg', ref_headline: 'DEW 21', ref_description: 'Die DEW 21 bietet Netzsicherheit in Dortmund und zeigt sich Stolz auf ihre Mitarbeiter.<br />&nbsp;'},
	{linkclass: 'ref12', img_title: 'ELE', url: '../images/referenzen/referenzen_ele.jpg', ref_headline: 'ELE', ref_description: 'Die ELE wirbt für die Nutzung erneuerbarer Energien und engagiert sich für die Ausbildung von Fachkräften.'}
];




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="#" class="' + item.linkclass + ' thumblink"><img alt="' + item.img_title + '" src="' + item.url + '" width="149" height="144" /></a>';
    tmpHtml += '<div class="ref_description"><h1>' + item.ref_headline + '</h1>' + item.ref_description + '</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() {
    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();
};
// 3
function mycarousel_itemFirstInCallback_onAfterAnimation(carousel, item, i, state, evt){
    $('.ref_description').not(':eq(1)').hide();
};