/**
 * Needed for the circular effect of the carousel
 */
var mycarousel_itemList = [
    {url: '/fileadmin/images/slider/image2_sport.jpg', title: 'SPORT', href: '/die_neue_mittelschule/paedagogische_konzepte/sport_video.html'},
    {url: '/fileadmin/images/slider/image5_elearning.jpg', title: 'eLEARNING', href: '/die_neue_mittelschule/paedagogische_konzepte/elearning_video.html'},
    {url: '/fileadmin/images/slider/image3_individualisierung.jpg', title: 'INDIVIDUALISIERUNG DIFFERENZIERUNG', href: '/die_neue_mittelschule/paedagogische_konzepte/individualisierung_video.html'},
    {url: '/fileadmin/images/slider/image6_experten.jpg', title: 'EXTERNE EXPERTINNEN', href: '/die_neue_mittelschule/paedagogische_konzepte/externe_expertinnen_video.html'},
    {url: '/fileadmin/images/slider/image8_integration.jpg', title: 'SOZIALES LERNEN INTEGRATION', href: '/die_neue_mittelschule/paedagogische_konzepte/integration_video.html'},
    {url: '/fileadmin/images/slider/image1_gender.jpg', title: 'GENDER', href: '/die_neue_mittelschule/paedagogische_konzepte/gender_video.html'},
    {url: '/fileadmin/images/slider/image7_ganztags.jpg', title: 'GANZTAGSANGEBOTE', href: '/die_neue_mittelschule/paedagogische_konzepte/ganztagesangebot_video.html'},
    {url: '/fileadmin/images/slider/image4_kreativitaet.jpg', title: 'KREATIVITÄT', href: '/die_neue_mittelschule/paedagogische_konzepte/kreativitaet_video.html'}
];

/**
 * Needed for the hover effect of the carousel
 */
var myhover_itemList = [
    {url: '/fileadmin/images/slider/image2_sport_active.jpg', title: 'SPORT', linktitle: 'SPORT<br />&nbsp;', href: '/die_neue_mittelschule/paedagogische_konzepte/sport_video.html'},
    {url: '/fileadmin/images/slider/image5_elearning_active.jpg', title: 'eLEARNING', linktitle: 'eLEARNING<br />&nbsp;', href: '/die_neue_mittelschule/paedagogische_konzepte/elearning_video.html'},
    {url: '/fileadmin/images/slider/image3_individualisierung_active.jpg', title: 'INDIVIDUALISIERUNG DIFFERENZIERUNG', linktitle: 'INDIVIDUALISIERUNG<br />DIFFERENZIERUNG', href: '/die_neue_mittelschule/paedagogische_konzepte/individualisierung_video.html'},
    {url: '/fileadmin/images/slider/image6_experten_active.jpg', title: 'EXTERNE EXPERTINNEN', linktitle: 'EXTERNE<br />EXPERTINNEN', href: '/die_neue_mittelschule/paedagogische_konzepte/externe_expertinnen_video.html'},
    {url: '/fileadmin/images/slider/image8_integration_active.jpg', title: 'SOZIALES LERNEN INTEGRATION', linktitle: 'SOZIALES LERNEN<br />INTEGRATION', href: '/die_neue_mittelschule/paedagogische_konzepte/integration_video.html'},
    {url: '/fileadmin/images/slider/image1_gender_active.jpg', title: 'GENDER', linktitle: 'GENDER<br />&nbsp;', href: '/die_neue_mittelschule/paedagogische_konzepte/gender_video.html'},
    {url: '/fileadmin/images/slider/image7_ganztags_active.jpg', title: 'GANZTAGSANGEBOTE', linktitle: 'GANZTAGS-<br />ANGEBOTE', href: '/die_neue_mittelschule/paedagogische_konzepte/ganztagesangebot_video.html'},
    {url: '/fileadmin/images/slider/image4_kreativitaet_active.jpg', title: 'KREATIVITÄT', linktitle: 'KREATIVITÄT<br />&nbsp;', href: '/die_neue_mittelschule/paedagogische_konzepte/kreativitaet_video.html'}
];

/**
 * This is the callback function which receives notification
 * when an item becomes the first one in the visible range.
 */
function mycarousel_itemFirstInCallbackBeforeAnimation(carousel, item, idx, state) {
		// generate index according carousel size (count of elements) -> newidx: 1...8
		var newidx = carousel.index(idx, mycarousel_itemList.length);
		var arridx = newidx-1;
		
		// fade out passing center element to normal element on prev element
		if (state == "next") { // arrow down clicked
			jQuery('a', carousel.get(idx+1)).fadeOut('fast');
			var arridx_prev = ((arridx+1) > mycarousel_itemList.length-1) ? (arridx+1)%(mycarousel_itemList.length) : arridx+1;
			jQuery('a', carousel.get(idx+1)).replaceWith(mycarousel_getItemHTML(mycarousel_itemList[arridx_prev])); // remove hover for prev element
			//jQuery('img', carousel.get(idx+1)).addClass('hide');
			//jQuery('img', carousel.get(idx+1)).fadeIn('fast');
		}
		
		// fade out passing center element to normal element on next element
		if (state == "prev") { // arrow up clicked
			jQuery('a', carousel.get(idx+3)).fadeOut('fast');
			var arridx_next = ((arridx+3) > mycarousel_itemList.length-1) ? (arridx+3)%(mycarousel_itemList.length) : arridx+3;
			jQuery('a', carousel.get(idx+3)).replaceWith(mycarousel_getItemHTML(mycarousel_itemList[arridx_next])); // remove hover for next element
			//jQuery('img', carousel.get(idx+3)).addClass('hide');
			//jQuery('img', carousel.get(idx+3)).fadeIn('fast');
		}
};

function mycarousel_itemFirstInCallbackAfterAnimation(carousel, item, idx, state) {
		// generate index according carousel size (count of elements) -> newidx: 1...8
		var newidx = carousel.index(idx, mycarousel_itemList.length);
		var arridx = newidx-1;
		
		// if carousel starts on an item before 1
		if (newidx == 6 && state == 'init') {
			var arridx_new1 = ((arridx+3) > mycarousel_itemList.length-1) ? (arridx+3)%(mycarousel_itemList.length) : arridx+3;
	    carousel.add(idx+3, mycarousel_getItemHTML(mycarousel_itemList[arridx_new1]));
			var arridx_new2 = ((arridx+4) > mycarousel_itemList.length-1) ? (arridx+4)%(mycarousel_itemList.length) : arridx+4;
	    carousel.add(idx+4, mycarousel_getItemHTML(mycarousel_itemList[arridx_new2]));
		}
		
		// if carousel starts on an item before 1
		if (newidx == 7 && state == 'init') {
			var arridx_new1 = ((arridx+2) > mycarousel_itemList.length-1) ? (arridx+2)%(mycarousel_itemList.length) : arridx+2;
	    carousel.add(idx+2, mycarousel_getItemHTML(mycarousel_itemList[arridx_new1]));
			var arridx_new2 = ((arridx+3) > mycarousel_itemList.length-1) ? (arridx+3)%(mycarousel_itemList.length) : arridx+3;
	    carousel.add(idx+3, mycarousel_getItemHTML(mycarousel_itemList[arridx_new2]));
			var arridx_new3 = ((arridx+4) > mycarousel_itemList.length-1) ? (arridx+4)%(mycarousel_itemList.length) : arridx+4;
	    carousel.add(idx+4, mycarousel_getItemHTML(mycarousel_itemList[arridx_new3]));
		}
		
		// if carousel starts on an item before 1
		if (newidx == 8 && state == 'init') {
			var arridx_new1 = ((arridx+1) > mycarousel_itemList.length-1) ? (arridx+1)%(mycarousel_itemList.length) : arridx+1;
	    carousel.add(idx+1, mycarousel_getItemHTML(mycarousel_itemList[arridx_new1]));
			var arridx_new2 = ((arridx+2) > mycarousel_itemList.length-1) ? (arridx+2)%(mycarousel_itemList.length) : arridx+2;
	    carousel.add(idx+2, mycarousel_getItemHTML(mycarousel_itemList[arridx_new2]));
			var arridx_new3 = ((arridx+3) > mycarousel_itemList.length-1) ? (arridx+3)%(mycarousel_itemList.length) : arridx+3;
	    carousel.add(idx+3, mycarousel_getItemHTML(mycarousel_itemList[arridx_new3]));
			var arridx_new4 = ((arridx+4) > mycarousel_itemList.length-1) ? (arridx+4)%(mycarousel_itemList.length) : arridx+4;
	    carousel.add(idx+4, mycarousel_getItemHTML(mycarousel_itemList[arridx_new4]));
		}
		
		// cross fade the center element
		jQuery('img', carousel.get(idx+2)).fadeOut('slow');
		// get index for array element to hover
		var arridx_hover = ((arridx+2) > mycarousel_itemList.length-1) ? (arridx+2)%(mycarousel_itemList.length) : arridx+2;
		jQuery('img', carousel.get(idx+2)).replaceWith(myhover_getItemHTML(myhover_itemList[arridx_hover])); // hover
		jQuery('img', carousel.get(idx+2)).addClass('hide');
		jQuery('img', carousel.get(idx+2)).fadeIn('slow');
		
		
		// fade out passing center element to normal element on prev element
		if (state == "next") { // arrow down clicked
			jQuery('a', carousel.get(idx+1)).fadeOut('fast');
			var arridx_prev = ((arridx+1) > mycarousel_itemList.length-1) ? (arridx+1)%(mycarousel_itemList.length) : arridx+1;
			jQuery('a', carousel.get(idx+1)).replaceWith(mycarousel_getItemHTML(mycarousel_itemList[arridx_prev])); // remove hover for prev element
			//jQuery('img', carousel.get(idx+1)).addClass('hide');
			//jQuery('img', carousel.get(idx+1)).fadeIn('fast');
		}
		
		// fade out passing center element to normal element on next element
		if (state == "prev") { // arrow up clicked
			jQuery('a', carousel.get(idx+3)).fadeOut('fast');
			var arridx_next = ((arridx+3) > mycarousel_itemList.length-1) ? (arridx+3)%(mycarousel_itemList.length) : arridx+3;
			jQuery('a', carousel.get(idx+3)).replaceWith(mycarousel_getItemHTML(mycarousel_itemList[arridx_next])); // remove hover for next element
			//jQuery('img', carousel.get(idx+3)).addClass('hide');
			//jQuery('img', carousel.get(idx+3)).fadeIn('fast');
		}
};

/**
 * This is the callback function which receives notification
 * when an item becomes the first one in the visible range.
 * Triggered before animation.
 */
function mycarousel_itemVisibleInCallbackBeforeAnimation(carousel, item, idx, state) {
    // No animation on first load of the carousel
    if (state == 'init') {
      return;
    }

		// fade in item when it becomes first element in carousel
    jQuery('img', item).fadeIn('slow');
    
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
    var newidx = carousel.index(idx, mycarousel_itemList.length);
    carousel.add(idx, mycarousel_getItemHTML(mycarousel_itemList[newidx - 1]));
};

/**
 * This is the callback function which receives notification
 * when an item is no longer the first one in the visible range.
 * Triggered before animation.
 */
function mycarousel_itemVisibleOutCallbackBeforeAnimation(carousel, item, idx, state) {
		// fade out item when it is no longer first element in carousel
    jQuery('img', item).fadeOut('slow');
};

/**
 * This is the callback function which receives notification
 * when an item is no longer the first one in the visible range.
 * Triggered after animation.
 */
function mycarousel_itemVisibleOutCallbackAfterAnimation(carousel, item, idx, state) {
    carousel.remove(idx);
};

/**
 * Item html creation helper (normal element)
 */
function mycarousel_getItemHTML(item)
{
    return '<a href="' + item.href + '"><img src="' + item.url + '" alt="' + item.title + '" /></a>';
};

/**
 * Item html creation helper (hover element)
 */
function myhover_getItemHTML(item)
{
    return '<a href="' + item.href + '"><img src="' + item.url + '" alt="' + item.title + '" class="active_slide" /><br />' + item.linktitle + '</a>';
};

/**
 * Create carousel (now in typo setup because of different start ids on several pages)
 */
/*jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        wrap: 'circular',
        vertical: true,
        scroll: 1,
        size: 8,
				start: 3,

        itemFirstInCallback: {
						onBeforeAnimation: mycarousel_itemFirstInCallbackBeforeAnimation,
						onAfterAnimation: mycarousel_itemFirstInCallbackAfterAnimation
				},
        itemVisibleInCallback: {
            onBeforeAnimation: mycarousel_itemVisibleInCallbackBeforeAnimation
        },
        itemVisibleOutCallback: {
            onBeforeAnimation: mycarousel_itemVisibleOutCallbackBeforeAnimation,
            onAfterAnimation:  mycarousel_itemVisibleOutCallbackAfterAnimation
        }
    });
});
*/