var images = new Array(
);
$(document).ready(function(){
	var imgSource = $('.imageViewer').html();
	var num = $('.imageViewer').size();


	for (var i = 0 ; i< num ; i++ ){
		
		//Make an array of all images in every viewer
		var list = new Array();
		images[i] = list;
		
		//Oject is index no of viewers:
		var obj = $($('.imageViewer').eq(i));
		obj.attr('id',('view' + i));
		
		//Number of images in object
		var numIm =	$('#view' + i + ' img').size();
		
		$('#view' + i + ' img').each(function(a,b){
				images[i][a] = {
					'href' : b.src,
					'description' : b.alt};	
		});
	
		//Remove images in html file
		$('#view' + i + ' img').remove();

		//Add image 0 to every viewer
		$('#view'+ i ).append($('<div>').addClass('imaged'));
		$('#view'+ i + ' .imaged').append($('<img>').attr('id', "0").attr('src', images[i][0].href));
		
		$('#view'+ i + ' .imaged').append($('<div>').addClass('descriptionClass'));
		$('#view'+ i +' .descriptionClass').text(images[i][0].description);
	
		//Create navigation
		$('#view'+ i +'.imageViewer').append($('<div>').addClass('navI'));
	
		var indexItem = '•';
		for (var y = 0 ; y < numIm ; y++) {$('#view'+ i +' .navI').append('<div class="navigationIndex">' + indexItem + '</div>'); }
		
		$('#view'+ i + ' .navigationIndex').eq(0).css({
			'color' : '#DD0000'
		});
	}	

	$('.navI').append('<div class="navigationArrowsPrev">tidigare</div>');
	
	$('.navI').append('<div class="navigationArrowsNext">nästa</div>');
		
	$('.descriptionClass').css({
		
		'font-size' : '12px',
		'width':'auto',
		'padding' : '5px',
		'text-align' : 'center',
		'margin-bottom':'12px'
	});
			
	$('.navigationIndex').css({
		'float' : 'left',
		'width' : '10px',
		'top' : '10px',
		'left' : '140px',
		'position' : 'relative',
		'text-align' : 'center'
	});
		
	$('.navigationArrowsNext').css({
		'float' : 'right',
		'clear' : 'right',
		'top' : '-20px',
		'position' : 'relative',
		'cursor' : 'pointer',
		'padding' : '10px',
		'text-align' : 'right'
	});
		
	$('.navigationArrowsPrev').css({
		'float' : 'left',
		'clear' : 'left',
		'top' : '-20px',
		'position' : 'relative',
		'cursor' : 'pointer',
		'padding' : '10px'
	});
			
	$('.imageViewer').css({
		'text-align' : 'center',
		'background-color':'#893916',
		'margin' : 'auto',
		'margin-top'  : '30px',
		'padding' : '10px',
		'width':'400px',
		'height':'360px',
		'position' : 'relative',
		'-webkit-user-select':'none',
		'-moz-user-select':'none',
		'-moz-box-shadow':'0 1px 1px black',
		'-webkit-box-shadow':'0 1px 1px black',
		'box-shadow':'0 1px 1px black',
		'-moz-border-radius':'5px',
		'-webkit-border-radius':'5px',
		'border-radius':'5px'
	});
	$('.navI').css({
		'color':'#444444',
		'background-color':'#EEEEEE',
		'width':'400px',
		'height':'30px',
		
		//css3
		'-moz-box-shadow':'-1px -1px 1px white',
		'-webkit-box-shadow':'-1px -1px 1px white',
		'box-shadow':'-1px -1px 1px white',
		'-moz-border-radius':'5px',
		'-webkit-border-radius':'5px',
		
		'border-radius':'5px'
	});
	
	$('.imaged').css({
		'padding' : '10px',
		'background-color':'#EEEEEE',
		'height':'300px',
		'margin-bottom':'10px',
		
		//css3
		'-moz-box-shadow':'0 1px 1px black',
		'-webkit-box-shadow':'0 1px 1px black',
		'box-shadow':'0 1px 1px black',
		'-moz-border-radius':'5px',
		'-webkit-border-radius':'5px',
		
		'border-radius':'5px'
	});

	$('.imaged img').css({
		'padding' : '10px',
		'width':'auto'
	});
	
	$('.navigationArrowsNext').mouseleave(function(){
		$(this).css({'color':'#444444'});
		}).mouseenter(function(){
		$(this).css({'color':'#111111'});
	});
	
	$('.navigationArrowsPrev').mouseleave(function(){
		$(this).css({'color':'#444444'});
		}).mouseenter(function(){
		$(this).css({'color':'#111111'});
	});
	
	//Next click meth, the number is forward or backward
	$('.navigationArrowsNext').live('click', function(){
		next(this.parentNode.parentNode, 1);
	});
	$('.navigationArrowsPrev').live('click', function(){
		next(this.parentNode.parentNode, -1);
	});
});

function next(object, direction){
	//check for the objects number with jquery
	var objNr = Number(object.id.substring(4,5));
	
	//Check which object occupies the view
	var currentObject = $('#view'+ objNr + ' img');
	var currentNum = Number(currentObject.attr('id'));
	
	
	var newNum = currentNum + direction;
	var numberOf = images[objNr].length;
	
	//check if number is at the end then set it to beginning
	if (newNum == numberOf){
		newNum = 0;
		//currentNum = numberOf - 1;
	}
	//check if number is at beginning then set it at the end
	if (newNum < 0){
		newNum = numberOf - 1;
		//oldNum = 0;
	}
	
	currentObject.attr('id',newNum.toString()).attr('src', images[objNr][newNum].href);
	$('#view'+ objNr +' .descriptionClass').text(images[objNr][newNum].description);
		
	//Change color on indexdot
	$('#view'+ objNr + ' .navigationIndex').eq(currentNum).css({'color' : '#444444'});
	$('#view'+ objNr + ' .navigationIndex').eq(newNum).css({'color' : '#DD0000'});
		
		
						
}