/*

	GallyeSlider
	- funksjonalitet for å lage et enkelt slideshow av en rekke bilder, med enkel navigasjon og en kort bildetekst
	
	Basert på et galleri laget av Ali
	
	eks.
	$("[id eller klasse her]:has(img)").each(function() {
		$(this).gallerySlider();
	});
	

*/

(function($) {

	$.fn.gallerySlider = function(options) {
		
		var opts = $.extend({}, $.fn.gallerySlider.defaults, options);
		// Variabel for å telle elementer, og inkrementere for å gi rette id'er og klasser
		var intLi = 0;
		var $this = $(this);
		
		var current = 1;
		
		// Artikkelens id
		var id = $this.attr("id");
		
		
		var inner = $this.find(".innerart");
		
		// Legg til klasse for css
		$this.addClass("galleryslider");
		
		// Finn bildeelementene
		var li = $this.find("li");
		
		// Variabler for å holde de to nye listene
		//var ulli = '';
		var ulli = $(document.createElement('ul'));
		
		//var navElements = '<div id="nav-elements">';
		
		var navElements = $(document.createElement('div'));
		navElements.attr('id', 'nav-elements');
		
		// Gå gjennom listeelementene, lag nye lister
		li.each(function() {
			var li = $(document.createElement('li'));
			var img = $(this).find('img');
			//alert(img.length);
			var a = $(this).find('a');
			var liHtml = '';
			if(img.length > 0) { 
				var wh = ';w;'+opts.imgWidth+';h;'+opts.imgHeight;
				var src = img.attr("src");
				var alt = img.attr("alt");
				var newImg = $(document.createElement('img'));
				newImg.attr('src', src);
				//newImg.attr('src', '/img'+src+wh);
				newImg.attr('alt', alt);
				//var imgHtml = '<img src="/img'+src+wh+'" alt="'+alt+'" />';
			}
			if(a.length > 0) {
				a.append(newImg);
				//liHtml = a;
				li.append(a);
			} else {
				//liHtml = imgHtml;
				li.append(newImg);
			}
			
			intLi++;
			var style = '';
			
			var navDiv = $(document.createElement('div'));
			navDiv.attr('id', 'n_'+intLi);
			navDiv.attr('rel', intLi);
			
			if(intLi == current) {
				navDiv.attr('class', 'active');
				//style = 'class="active"';
			}
			navDiv.html('<strong>'+intLi+'</strong><em>'+alt+'</em>');
			navElements.append(navDiv);
			//navElements += '<div id="n_'+intLi+'" rel="'+intLi+'" '+style+'><strong>'+intLi+'</strong><em>'+alt+'</em></div>';
			li.addClass('n_'+intLi);
			li.attr('style', 'width:'+opts.galleryWidth+'px; height:'+opts.galleryHeight+'px');
			li.attr('id', id+'_'+intLi);
			ulli.append(li);
			//ulli += '<li style="width:'+opts.galleryWidth+'px; height:'+opts.galleryHeight+'px" class="n_'+intLi+'" id="'+id+'_'+intLi+'">'+liHtml+'</li>';
		});
		
		// Lengden på listen. Antall liste elementer
		var ulWidth = intLi*opts.galleryWidth;
		
		//var nav = '<div style="width:'+opts.galleryWidth+'px;" id="'+opts.navId+'">'+navElements+'</div>';
		
		var nav = $(document.createElement('div'));
		nav.attr('style', 'width:'+opts.galleryWidth+'px');
		nav.attr('id', opts.navId);
		nav.append(navElements);
		
		//var ul = '<ul id="images" style="width:'+ulWidth+'px">';
		ulli.attr('id', 'images');
		ulli.addClass('items');
		ulli.attr('style', 'width:'+ulWidth+'px');
		//ul += ulli.html();
		//ul += '</ul>';
		
		//var newHtml = ulli.html+nav;
		var scrollable = $(document.createElement('div'));
		scrollable.attr('id', 'scrollable');
		//scrollable.append(ulli);
		
		scrollable.append(ulli);
		scrollable.append(nav);
		inner.html('');
		inner.append(scrollable);
		
		//inner.html('<div id="scrollable">' + ulli.html() + '</div>' + nav);
		
		$this.css({
			width: opts.galleryWidth+'px',
			height: opts.galleryHeight+'px'
		});
		/*
		$("#nav-elements div").click(function() {
			var intSlideRel = $(this).attr('rel');
			var intSlideTo = (intSlideRel*opts.galleryWidth) - opts.galleryWidth;
			if(intSlideRel != current) {
				$("#n_"+current+' em').hide(opts.slideSpeed/2, function() {
					$("#n_"+intSlideRel+' em').show(opts.slideSpeed/2);
					$("#images").animate({left: '-'+intSlideTo+'px'}, opts.slideSpeed);
				});
				current = intSlideRel;
				
			}
		});*/
		
		
	};
	$.fn.gallerySlider.defaults = {
		galleryWidth: '710',
		galleryHeight: '380',
		imgWidth: '710',
		imgHeight: '380',
		navId: 'slidenav',
		slideSpeed: 600
	};
	
})(jQuery);