var current_layer = 0;
var scroll_mode = 2;  // 1 = normal, 2 = endlos

var mycarousel_itemList = [];

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]));
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
    carousel.remove(i);
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item)
{
    var erg = '';
    if(item.link != '') erg += '<a href="'+ item.link +'">';
    erg += '<img src="' + item.url + '" alt="' + item.title + '" width="84" height="63"/>';
				erg +=	'<h3>' + item.title + '</h3>';
    if(item.link != '') erg += '</a>';
				return erg;
};

function li_to_array() {
  var arr = jQuery('#carousel li');
  var arr_tmp;
  for (var i = 0; i < arr.length; i++){
    var e = arr[i];
		  arr_tmp = Array();
		  if(jQuery(e).children('a').length > 0) {
		    arr_tmp['link'] = jQuery(e).children('a').attr('href');
		    arr_tmp['url'] = jQuery(e).children('a').children('img').attr('src');
		    arr_tmp['title'] = jQuery(e).children('a').children('h3').text();		  				
				} else {
		    arr_tmp['link'] = '';
		    arr_tmp['url'] = jQuery(e).children('img').attr('src');
		    arr_tmp['title'] = jQuery(e).children('h3').text();
				}
		  mycarousel_itemList = mycarousel_itemList.concat(Array(arr_tmp));
  }
  jQuery('#carousel').empty();
}


function mycarousel_initCallback(carousel)
{
	// Disable autoscrolling if the user clicks the prev or next button.
	carousel.buttonNext.bind('click', function() {
		carousel.startAuto(0);
	});

	carousel.buttonPrev.bind('click', function() {
		carousel.startAuto(0);
	});

	// Pause autoscrolling if the user moves with the cursor over the clip.
	carousel.clip.hover(function() {
		carousel.stopAuto();
	}, function() {
		carousel.startAuto();
	});
};
	
	
jQuery(document).ready(function() {
	jQuery(".pos_top").css('z-index', 300);
	jQuery(".pos_back").css('z-index', 100);
	
	jQuery("#inner_1").css('z-index', 300);
	jQuery("#inner_2").css('z-index', 100);
	jQuery("#inner_3").css('z-index', 100);
	jQuery("#inner_4").css('z-index', 100);

	jQuery('#link_1').hover(show_layer_1);
	jQuery('#link_2').hover(show_layer_2);
	jQuery('#link_3').hover(show_layer_3);
	jQuery('#link_4').hover(show_layer_4);
	
 if(scroll_mode == 1) {  // normal
					jQuery('#carousel').jcarousel({
						scroll:3,
						auto: 3,
						wrap: 'last',
				        initCallback: mycarousel_initCallback
					});
	} 
 if(scroll_mode == 2) {  // endlos
   li_to_array();
    jQuery('#carousel').jcarousel({
        wrap: 'circular',
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback},
      		scroll:3,
		    auto: 3,
        initCallback: mycarousel_initCallback
    });
	}
});
	

function show_layer_1() {
 if(current_layer != 1) {
   // $("#inner_1").animateToClass('lay_top_new',1).css('z-index', '900').animateToClass('lay_top', 2000, 'swing');  
     //jQuery('#marker').animateToClass('marker_pos_1', 1000, 'swing');
	 jQuery('#marker').animateToClass('marker_pos_1', 0, 'swing');

     //jQuery("#show1").animateToClass('pos_top_new', 0).css('z-index', 900).animateToClass('pos_top', 1000, 'swing', function(){
     jQuery("#show1").animateToClass('pos_top_new', 0).css('z-index', 900).animateToClass('pos_top', 0, 'swing', function(){
     jQuery("#show1").css('z-index', 300);
     jQuery("#show2").css('z-index', 100);
     jQuery("#show3").css('z-index', 100);
     jQuery("#show4").css('z-index', 100);
     jQuery("#link_1").addClass('active');
     jQuery("#link_2").removeClass('active');
     jQuery("#link_3").removeClass('active');
     jQuery("#link_4").removeClass('active');
     current_layer = 1;
	});
	 
 }
}

function show_layer_2() {
 if(current_layer != 2) {
   // $("#inner_1").animateToClass('lay_top_new',1).css('z-index', '900').animateToClass('lay_top', 2000, 'swing');  
     //jQuery('#marker').animateToClass('marker_pos_2', 1000, 'swing');
	 jQuery('#marker').animateToClass('marker_pos_2', 0, 'swing');

	 //jQuery("#show2").animateToClass('pos_top_new', 0).css('z-index', 900).animateToClass('pos_top', 1000, 'swing', function(){  
	 jQuery("#show2").animateToClass('pos_top_new', 0).css('z-index', 900).animateToClass('pos_top', 0, 'swing', function(){ 
     jQuery("#show2").css('z-index', '300');
     jQuery("#show1").css('z-index', '100');
     jQuery("#show3").css('z-index', '100');
     jQuery("#show4").css('z-index', '100');
     jQuery("#link_1").removeClass('active');
     jQuery("#link_2").addClass('active');
     jQuery("#link_3").removeClass('active');
     jQuery("#link_4").removeClass('active');
     current_layer = 2;

	});

 }
}


function show_layer_3() {
 if(current_layer != 3) {
   // $("#inner_1").animateToClass('lay_top_new',1).css('z-index', '900').animateToClass('lay_top', 2000, 'swing');  
     //jQuery('#marker').animateToClass('marker_pos_3', 1000, 'swing');
	 jQuery('#marker').animateToClass('marker_pos_3', 0, 'swing');

     jQuery("#show3").animateToClass('pos_top_new', 0);
	 jQuery("#show3").css('z-index', '900');
	 //jQuery("#show3").animateToClass('pos_top', 1000, 'swing', function(){
	 jQuery("#show3").animateToClass('pos_top', 0, 'swing', function(){
     jQuery("#show3").css('z-index', '300');
     jQuery("#show1").css('z-index', '100');
     jQuery("#show2").css('z-index', '100');
     jQuery("#show4").css('z-index', '100');
     jQuery("#link_1").removeClass('active');
     jQuery("#link_2").removeClass('active');
     jQuery("#link_3").addClass('active');
     jQuery("#link_4").removeClass('active');
     
     current_layer = 3;
	});

 }
}

function show_layer_4() {
 if(current_layer != 4) {
   // $("#inner_1").animateToClass('lay_top_new',1).css('z-index', '900').animateToClass('lay_top', 2000, 'swing');  
     //jQuery('#marker').animateToClass('marker_pos_4', 1000, 'swing');
	 jQuery('#marker').animateToClass('marker_pos_4', 0, 'swing');
	 
     jQuery("#show4").animateToClass('pos_top_new', 0);
	 jQuery("#show4").css('z-index', '900');
	 //jQuery("#show4").animateToClass('pos_top', 1000, 'swing', function(){
	 jQuery("#show4").animateToClass('pos_top', 0, 'swing', function(){
     jQuery("#show4").css('z-index', '300');
     jQuery("#show1").css('z-index', '100');
     jQuery("#show2").css('z-index', '100');
     jQuery("#show3").css('z-index', '100');
     jQuery("#link_1").removeClass('active');
     jQuery("#link_2").removeClass('active');
     jQuery("#link_3").removeClass('active');
     jQuery("#link_4").addClass('active');
     current_layer = 4;
	});

 }
}