var bildanimation = null;
var cntnextbig = 1;
var counterteaser = 1;

//$(document).ready(
$(window).load(
		function()
		{
			//window.setTimeout( 'set3to1Teaser()', 100);
			set3to1Teaser();
		}
);

function set3to1Teaser()
{
	loadImages();
	//anzbilder = $( '#anzbilder' ).val();
	anzbilder = $( 'input[name="anzbilder"]').val();
	anzbilder = parseInt(anzbilder);
	
	addSmallBild();
	
	hideBig(anzbilder);
	
	bildanimation = setInterval("teaser(anzbilder)", 4000);
	
	$('.schleife').click(function (){
									slide(this);							   
								});
	
	$('#bilder_klein_button').css('display', 'none');
	$('#bilder_klein_button').hover( function() {
									$('#bilder_klein_button').css('display', 'block');
								}
							);
	$('.kleines_bild').hover( 	function () {
									$('#bilder_klein_button').css('display', 'block');
								},
								function () {
									allesAufAnfang(anzbilder);
								}
							);
	
	$('#bilder_klein_button').click(function () {
										manuellSlide(anzbilder);
									});
}

function slide(schiebung) {
	position = $(schiebung).text();
	width = '780';
	multi = 1-position;
	new_left = multi * width;
	
	//es werden bei allen Zahlen die roten Pfeile entfernt
	counter = 1;
	obj_id = $('#newshop_' + counter );
	while($(obj_id).length != 0) {
		$( '#newshop_' + counter).removeClass('roter_pfeil');
		counter++;
		obj_id = $('#newshop_' + counter );
	}
	
	//roter Pfeil als optische Markierung setzen
	$( '#newshop_' + position ).addClass('roter_pfeil');
	
	// startten der Animation
	$( '#slider_innen' ).animate( {left: new_left},
								 500
								);
};

function addSmallBild() {
	bild1 = $( '#kbild_1' ).clone();
	bild2 = $( '#kbild_2' ).clone();
	bild3 = $( '#kbild_3' ).clone();
	$( '#bilder_klein_innen' ).append(bild1);
	$( '#bilder_klein_innen' ).append(bild2);
	$( '#bilder_klein_innen' ).append(bild3);
}

function teaser(anzbilder) {
	
	slide_bilder = (anzbilder+1);
	height = 80;
	
	
	if(counterteaser == slide_bilder) {
		$( '#bilder_klein_innen' ).css('top', 0);
		counterteaser = 1;
	}
    verschiebung = ((counterteaser * height) * -1) ;
	$( '#bilder_klein_innen' ).animate( {top: verschiebung},
									   1000
									   );
	nextBig(anzbilder);
	counterteaser++;
};

function nextBig(anzbilder) {
	
	nextbild = cntnextbig;
	
	if (cntnextbig-1 == 0) {
		prevbild = anzbilder;
	}
	else {
		prevbild = cntnextbig-1;
	}
	
	$( '#gbild_' + nextbild ).fadeIn('slow');
	$( '#gbild_' + prevbild ).fadeOut('slow');
	
	cntnextbig++;
	
	if(cntnextbig == anzbilder+1) {
		cntnextbig = 1;
	}
}

function hideBig(anzbilder) {
		for (i = 1; i < anzbilder; i++) {
			$( '#gbild_' + i).hide('fast');
		}
}

function manuellSlide (anzbilder) {
	clearInterval(bildanimation);
	teaser(anzbilder);
	bildanimation = setInterval("teaser(anzbilder)", 4000);
}

function allesAufAnfang(anzbilder) {
	$('#bilder_klein_button').css('display', 'none');
	clearInterval(bildanimation);
	bildanimation = setInterval("teaser(anzbilder)", 4000);
}
function loadImages()
{
	$( '#teaser div[rel]').each(function()
			{
				imagePath = $( this).attr( 'rel');
				sImg = '<img src="' + imagePath + '"';
				
				if ( imagePath.indexOf("klein") > -1)
				{
					sImg += ' width="248" height="78"';
				}
				else
				{
					sImg += ' width="513" height="236"';
				}
				
				sImg += ' alt="">';
				//hat das aktuelle div eine Anker-Element?
				oAnker = $( 'a', this);
				if( oAnker.length)
				{
					oAnker.append( sImg);
				}
				else // img wird direkt in Div platziert
				{
					$( this).append( sImg);
				}
			}
	);
	
	$( '#teaser .loading').remove();
}