(function($){
	$(document).ready(function(){
		
		var info = {
			'image': '', 
			'text': '', 
			'infotext': ''
		}
		
		var animator = {
			'top': '',
			'left': '', 
			'startingPosTop': '' , 
			'startingPosLeft': '', 
			'scale': ''
		}
	
		var activeItem = 0;
		var objectArray = [];
		var textObj = $('.infoText');
		var infoObj = $('.info');
		var animate = false;
		var animation  = "";
		var initiated = false;
		
		//preLoadimages
		var imageArray = ["toppdoman.png", "alla.png", "siffror.png", "2-63.png", "jiddisch.png", "beskrivande.png", "prickar.png", "utan-prickar.png", "bindestreck.png", "felstavat.png", "feeling.png", "www-se.png"];
		for(i=0;i<imageArray.length;i++) {
			pic = new Image(); 
			pic.src="./img/"+imageArray[i]; 
		}
	
		objectArray.push({ 'text': 'hemvävt.se', 'image': 'toppdoman.png', 'infotext': 'Välj en .se-adress om du vill ha en tydlig koppling till Sverige! I en webbadress motsvarar denna<br /> så kallade <span>toppdomän</span> "Sweden" på ett vykort, eller +46 när du ringer hem från utlandet.' });
		objectArray.push({ 'text': 'folkfest.se', 'image': 'alla.png', 'infotext': '<span>Alla</span> kan skaffa en .se adress! Det gäller privatpersoner<br /> likaväl som företag och organisationer.' });
		objectArray.push({ 'text': 'svensson72.se', 'image': 'siffror.png', 'infotext': 'Använd gärna <span>siffror!</span> De kan göra din webbadress unik även om du till exempel delar namn med många andra.' });
		objectArray.push({ 'text': '2-63.se', 'image': '2-63.png', 'infotext': 'Formulera webbadressen som du vill! Så länge du <br />använder <span>minst två</span> tecken och som <span>mest sextiotre.</span>' });
		objectArray.push({ 'text': 'מאַמע-לשון.se', 'image': 'jiddisch.png', 'infotext': 'Skriv på <span>jiddisch!</span> Eller norska, danska, isländska, finska, samiska, meänkieli och romani om du vill.<br /> Förutom de svenska tecknen kan du även välja mellan tvåhundra som tillhör våra officiella minoritetsspråk.' });
		objectArray.push({ 'text': 'surdegskurs.se', 'image': 'beskrivande.png', 'infotext': 'Låt din webbadress <span>spegla innehållet</span> på sajten! <br />Den blir mycket lättare att minnas och söka efter på nätet.' });
		objectArray.push({ 'text': 'slöfock.se', 'image': 'prickar.png', 'infotext': 'Glöm inte att du kan använda <span>prickbokstäver!</span> Å, ä och ö funkar fint och <br />gillas särskilt av svensktalande personer och sökmotorer som Google.' });
		objectArray.push({ 'text': 'slofock.se', 'image': 'utan-prickar.png', 'infotext': 'Boka webbadressen även <span>utan prickar!</span> Det kan vara smart att lägga till ett <br />internationellt alternativ (som också har fördelar som e-postadress).' });
		objectArray.push({ 'text': 'hej-baby.se', 'image': 'bindestreck.png', 'infotext': 'Prova <span>bindestreck!</span> En webbadress med flera ord kan bli mer lättläst <br />och enklare att hitta via Google.' });
		objectArray.push({ 'text': 'atfonbladet.se', 'image': 'felstavat.png', 'infotext': 'Säkerhetsboka! Det kan vara slugt att boka varianter med de mest troliga <br /><span>felstavningarna</span> (annars finns risken att någon annan kniper dem).' });
		objectArray.push({ 'text': 'magkänsla.se', 'image': 'feeling.png', 'infotext': 'Känn efter! För att fastna i minnet måste en webbadress ha <span>feeling.</span> <br />Försök att hitta oväntade ordkombinationer, rim eller rytmer.' });
		objectArray.push({ 'text': 'www.se', 'image': 'www-se.png', 'infotext': 'Lek och labba vidare här på <span>vår hemsida!</span> När du väl har bestämt <br />dig så gör du ditt köp direkt, via en av våra <a href="/registrarer.php">återförsäljare</a>.' });
		
		function changeItem(direction){
			if(direction == 'next') {
				animator.startPosLeft = "575px";
				animator.startPosTop = "-250px";
				animator.startScale = 0.05;
				
				animator.endPosLeft =  "-1220px";
				animator.endPosTop = "670px";
				animator.endScale = 3;
			}
			else {
				animator.startPosLeft = "-1220px";
				animator.startPosTop = "670px";
				animator.startScale = 3;
				
				animator.endPosLeft =  "575px";
				animator.endPosTop = "-250px";
				animator.endScale = 0.05;
			}
			if(activeItem < 0) {
				activeItem = objectArray.length-1;	
			}
			if(activeItem > objectArray.length-1) {
				activeItem = 0;	
			}
			$('.pagination a').removeClass('active');
			$('.pagination a#_'+(activeItem+1)).addClass('active');
			
			infoObj.fadeOut(300,function(){
				textObj.stop().animate({
					top: animator.endPosTop, 
					left: animator.endPosLeft, 
					scale: animator.endScale
					
				},400, function(){
					textObj.html(objectArray[activeItem].text);
					infoObj.html(objectArray[activeItem].infotext);
					textObj.scale(animator.startScale);
					textObj.css({'left':animator.startPosLeft, 'top': animator.startPosTop, 'background':'transparent url(./img/'+objectArray[activeItem].image+') 50% 0 no-repeat'});
					textObj.animate({
						top: '82px',
						left: '0',
						scale: 1
					},400,function(){
						infoObj.css({ 'left': '90px', 'top': '250px' });
						infoObj.fadeIn(300, function(){
							if(!initiated) {
								$('.arrowNext').show().animate({
									right: '20px'
								},200);
								$('.arrowPrevious').show().animate({
									left: '20px'
								},200, function(){
									infoObj.hide();
									$('.pagination').fadeIn(600);
									infoObj.show();
								});
								initiated = true;
							}
						});
					});
				});
			});
		}
	
		$('.startTipRound').bind('click',function(event){
			changeItem('next');
			event.preventDefault();
		});
		$('.arrowPrevious').bind('click',function(event){
			activeItem--;
			changeItem('prev');
			event.preventDefault();
		});
		$('.arrowNext').bind('click',function(event){
			activeItem++;
			changeItem('next');
			event.preventDefault();
		});
		$('.pagination a').bind('click',function(event){
			activeItem = $(this).text()-1;
			changeItem('next');
			event.preventDefault();
		});

	});
}(jQuery));