$(document).ready(function(){
	/*
	
	MAKE 20101130:
		Expandable boxes uses jquery for show/hide toggle functionality
		
	HTML Syntax:
		<div class="expandables"> <!-- container (simply adds bottom margin -->
			<!-- Repeat 4 lines below for multiple boxes -->
			<div class="expandable"> <!-- expandable box -->
				<h3>Box header</h3> <!-- box header on which to click to toggle expand/collapse -->
				<p>Text content</p>	<!-- box content -->
			</div>	<!-- end of expandable box --> 
			<!-- Repeat 4 lines above for multiple boxes -->
		</div> <!-- end of container -->
	
	Dependencies:
		Javascript: "http://code.jquery.com/jquery-1.4.4.min.js"
		Javascript: "/script/jquery.common.js"
		Stylesheet: "/styles/Modules.css"
		
	*/
	$("DIV.expandable").each(function(){
		var container = $(this);
		$(container).find("H3").click(function(){
			if(!$(container).hasClass("open")){
				$("DIV.expandable").removeClass("open");
				$(container).addClass("open");
			}else{
				$(container).removeClass("open");
			}
		});
	});
	
	/*
	
	MAKE 20101201:
		Render gif image with H3-header text
		
	HTML Syntax:
		<h3 class="gif">Min rubrik</h3>
	
	Dependencies:
		Javascript: "http://code.jquery.com/jquery-1.4.4.min.js"
		Javascript: "/script/jquery.common.js"
		
	*/
	$("H3.gif, P.h3").each(function(){
		$(this).html('<img src="http://www.porsche.com/ImageMachines/PageTitle.ashx/rendered.gif?text='+$(this).html().replace(' ','+')+'&amp;mode=h3" alt="'+$(this).html()+'" />').addClass('H3');
		//alert($(this).html());
	});
	
	
	/*
	MAKE 20110302:
		Create slide show with images
		
	HTML SYNTAXT
		<div id="kdm-slideshow" rel="[global inline arguments]">
			<img src="slide_show/slide-boxster.jpg" rel="[local inline arguments]" />
			<img src="slide_show/slide-caymanr.jpg" rel="[local inline arguments]" />
			<img src="slide_show/slide-panamera_1.jpg" rel="[local inline arguments]" />
			<img src="slide_show/slide-panamera_2.jpg" rel="[local inline arguments]" />
		</div>
		
	GLOBAL INLINE ARGUMENTS
		syntax: "propertyname=propertyvalue[&propertyname=propertyvalue]"
		arguments:
			animate: boolean(true)
			animatereverse: boolean(false)
			height: integer
			width: integer
			border: integer
			overlap: integer
			duration: integer
			fadetime: integer
			startx: integer
			stopx: integer
			starty: integer
			stopy: integer
	
	LOCAL INLINE ARGUMENTS
		syntax: "propertyname=propertyvalue[&propertyname=propertyvalue]"
		arguments:
			animate: boolean(true)
			animatereverse: boolean(false)
			duration: integer
			fadetime: integer
			startx: integer
			stopx: integer
			starty: integer
			stopy: integer
			
	Dependencies:
		Javascript: "http://code.jquery.com/jquery-1.4.4.min.js"
		Javascript: "/script/jquery.common.js"
		Stylesheet: "/styles/Modules.css"
		
	Example:
		<div id="kdm-slideshow" rel="width=615&height=177&border=0&duration=10000&overlap=1500&fadetime=2000">
			<img src="/media/image/SlideShow/Boxster.jpg" rel="animatereverse=true" />
			<img src="/media/image/SlideShow/CaymanR.jpg" />
			<img src="/media/image/SlideShow/Panamera_1.jpg" rel="animatereverse=true" />
			<img src="/media/image/SlideShow/Panamera_2.jpg" />
		</div>
	
	*/
	
	//setTimeout(function(){
	//},1000);
	
	// Look if slide show is available. If so, hide TopImage and replace with slideshow...
	$("DIV#kdm-slideshow").each(function(){
		$h = $(this);
		$i = $("DIV#introImage");
		//create loader
		//$("DIV#introImage IMG").replaceWith('<img src="/images/slide_loader.gif" style="margin:0 auto;padding:'+($i.innerHeight()/2-16)+'px 0" />');
		$("DIV#introImage IMG").replaceWith('<img src="/images/slide_loader.gif" style="margin:0 auto;padding:'+(Math.round(273/2)-16)+'px 0" />');
		setTimeout(function(){
			//replace loader with slide show
			if($("DIV#introImage IMG").replaceWith($h)){
				var slideshow = new kdm_slideshow($h);
			}
		},500);
	});
	
});

/*SLIDE SHOW OBJECT*/

function kdm_slideshow($holder){
	me = this;
	me.holder = $holder;
	//set inline properties
	
	if($holder.attr("rel")){
		kvarr = $holder.attr("rel").split("&");
		for(index in kvarr){
			arr = kvarr[index].split("=");
			if(arr.length > 1){
				switch(true){
					case 
						arr[0] == "animate" || 
						arr[0] == "animatereverse":
						me[arr[0]] = (arr[1].toLowerCase() === 'true');
						break;
						
					case
						arr[0] == "height" || 
						arr[0] == "width" || 
						arr[0] == "border" || 
						arr[0] == "overlap" || 
						arr[0] == "duration" || 
						arr[0] == "fadetime" || 
						arr[0] == "startx" || 
						arr[0] == "starty" || 
						arr[0] == "stopx" || 
						arr[0] == "stopy":
						me[arr[0]] = parseInt(arr[1]);
						break; 
						
					default:
						//do nothing, no other properties are "public"
						//alert(arr[0]);
				}
			}
		}
	}
	me.init();
}




kdm_slideshow.prototype = 
{
	duration: 6000,
	fadetime: 1200,
	startx: 0,
	starty: 0,
	stopx: 0,
	stopy: 0,
	animate: true,
	animatereverse: false,
	props: Array(),
	images: Array(),
	overlap: 800,
	slide: 0,
	holder: null,
	init: function(){
		me = this;
		me.images;
		$hld = $(me.holder);
		
		//if height or width are set, lets resize the container
		if(me.height)$hld.height(me.height-1);
		if(me.width)$hld.width(me.width-1);
		if(me.border)$hld.css("border-width",me.border);
		$hld.show();//slideDown();
		
		$hld.find("IMG").each(function(){
			$img = $(this);
			me.images[me.images.length] = $img;
			me.props[me.images.length-1] = me.setprops($img);
		});
		//delay to allow picutes to load and frame to unfold
		//setTimeout(function(){me.fadein();},500);
		me.fadein();
	},
	fadein: function(){
		me = this;	//slideshow object
		$img = $(me.images[me.slide]);

		//fade in
		$img.fadeIn(me.getprops("fadetime"),"swing",function(){me.wait()});
		
		//prepare next
		setTimeout(function(){
			me.next();
		},me.getprops("duration")-me.overlap);

		//om bilden är bredare än containern så ska den samtidigt slajda lite
		if(me.getprops("animate")){	//allow animation
			//holder element
			$hld = $(me.holder);

			//get start and stop values
			startx = me.getprops("startx");
			starty = me.getprops("starty");
			stopx = me.getprops("stopx");
			stopy = me.getprops("stopy");

			if(startx+starty+stopx+stopy == 0){	//automatically assign stop values
				//fails if image is not yet properly loaded
				stopx = $img.width() - $hld.width();
				stopy = $img.height() - $hld.height();
				if(me.getprops("animatereverse")){
					tmpx = startx;
					tmpy = starty;
					startx = stopx;
					starty = stopy;
					stopx = tmpx;
					stopy = tmpy;
				}
				
			}
		
			//reset image position
			//alert("{left: "+me.getprops("startx")+",top: "+me.getprops("starty")+"}");
			$img.css({left:-startx,top:-starty});

			//alert(aduration);
			//set animation
			$img.animate({
				left: -stopx,
				top: -stopy
			},{
				queue: false,
				duration: me.getprops("duration"),
				easing: "linear"
			});

		}
		

	},
	wait: function(){
		me = this;	//slideshow object
		timetowait = me.getprops("duration") - me.getprops("fadetime")*2;
		me.nexttofade = $(me.images[me.slide]);
		setTimeout(function(){me.fadeout()},timetowait);
	},
	fadeout: function(){
		me = this;	//slideshow object
		$img = $(me.nexttofade);
		$img.fadeOut(me.getprops("fadetime"),"swing",function(){
		});
	},
	next: function(){
		me = this;	//slideshow object
		//set next index
		me.slide = (me.slide+1 < me.images.length) ? me.slide + 1: 0;
		//fadein image
		me.fadein();
	},
	setprops: function($img){
		obj = {};
		//alert("setprops: "+);
		if($img.attr("rel")){
			kvarr = $img.attr("rel").split("&");
			for(index in kvarr){
				arr = kvarr[index].split("=");
				if(arr.length > 1){
					switch(true){
						case arr[0] == "animate" || arr[0] == "animatereverse":
							obj[arr[0]] = (arr[1].toLowerCase() === 'true');
							break;
						default:
							obj[arr[0]] = parseInt(arr[1]);
							break; 
					}
				}
			}
		}
		return obj;
	},
	getprops: function(key){
		index = this.slide;
		//alert(this.duration);
		if(this.props[index][key]){
			return this.props[index][key];
		}else{
			return this[key];
		}
	}
	
};