function addLoadEvent( func ) {
	var oldonload = window.onload;
	if ( typeof window.onload != "function" ) {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}


function ill() {
	var jox = document.getElementById( "jox" );
	var smyckebilder = document.getElementById( "smyckebilder" ).getElementsByTagName( "a" );
	
	visa_sida();
	he_dit_bilder( 0 );

	/**************************************************************************************/

	function visa_sida() {
		var text = document.getElementById( "text" );
		var sidnummer = document.getElementById( "illnummer" ).getElementsByTagName( "a" ); 
		
		sidnummer[0].className = "nummer";

		for( i = 0; i < sidnummer.length; i++ ) {
			sidnummer[i].onclick = function() {
				if( this.getAttribute( "id" ) == 1 ) {
					visa_illsmycken( 1, 0 );
				}
			
				if( this.getAttribute( "id" ) == 2 ) {
					visa_illsmycken( 2, 4 );
				}
				
				if( this.getAttribute( "id" ) == 3 ) {
					visa_illsmycken( 3, 8 );
				}
				
				if( this.getAttribute( "id" ) == 4 ) {
					visa_illsmycken( 4, 12 );
				}

				if( this.getAttribute( "id" ) == 5 ) {
					visa_illsmycken( 5, 16 );
				}

				if( this.getAttribute( "id" ) == 6 ) {
					visa_illsmycken( 6, 20 );
				}

				if( this.getAttribute( "id" ) == 7 ) {
					visa_illsmycken( 7, 24 );
				}
				
				if( this.getAttribute( "id" ) == 8 ) {
					visa_illsmycken( 8, 28 );
				}
				
				if( this.getAttribute( "id" ) == 9 ) {
					visa_illsmycken( 9, 32 );
				}

				if( this.getAttribute( "id" ) == 10 ) {
					visa_illsmycken( 10, 36 );
				}

				if( this.getAttribute( "id" ) == 11 ) {
					visa_illsmycken( 11, 40 );
				}

				if( this.getAttribute( "id" ) == 12 ) {
					visa_illsmycken( 12, 44 );
				}

				if( this.getAttribute( "id" ) == 13 ) {
					visa_illsmycken( 13, 48 );
				}
			}
		}

		function visa_illsmycken( aktuell_sida, bildnummer ) {
			//aktuell_sida = numret på sidan med smycken som ska visas
			//bildnummer = id för den första lilla bilden på sidan

			for( i = 0; i < sidnummer.length; i++ ) {
				if( sidnummer[i].getAttribute( "id" ) == aktuell_sida ) {
					sidnummer[i].className = "nummer";
				}
				else {
					sidnummer[i].className = "";				
				}
			}	
			he_dit_bilder( bildnummer );
		}	
	}
	
	/**************************************************************************************/

	function he_dit_bilder( id ) {
		var stor_bild;
		var liten_bild;
		
		
		for( i = 0; i < smyckebilder.length; i++ ) {
			var text = "Illsmycke #" + id + " - klicka för att se stor bild";
			var text2 = "Illsmycke #" + id + " - SÅLD";
			var id_liten = smyckebilder[i].getAttribute( "id" );

			liten_bild = document.createElement( "img" );
			liten_bild.setAttribute( "src", "smycken/" + id +".jpg" );
			liten_bild.setAttribute( "id", id );

			
			if( id == 0 || id == 3 || id == 4 || ( id >8 && id <13 ) || id == 14 || id == 16 || id == 17 || id >19 && id <23 || id == 24 || ( id >26 && id <30 ) || ( id >31 && id <37 ) || id == 41 || id == 46 ) {
				liten_bild.setAttribute( "title", text2 );
				} else {
					liten_bild.setAttribute( "title", text );
				}
		
			


			//visa stor bild på smycken
			liten_bild.onclick = function() {
					jox.className = "invisible";
					
					stor_bild = document.createElement( "div" );
					stor_bild.setAttribute( "id", "stor_bild" );
					stor_bild.className = "visible";

					var img = document.createElement( "img" );
					var id_stor = this.getAttribute( "id" );
					var smycke_nr = "Illsmycke #" + id_stor;
					//var smycke_nr = "Illsmycke #" + ( parseInt( id_stor ) + 1 );
					img.setAttribute( "src", "smycken_2/" + id_stor + "_2.jpg" );
					img.setAttribute( "id", id_stor );
					img.setAttribute( "title", smycke_nr );
					stor_bild.appendChild( img );
					
					var illtext = stor_bild.appendChild( document.createElement( "p" ) );
					illtext.appendChild( document.createTextNode( smycke_nr ) );
					illtext.setAttribute( "id", "illtext" );
					if( id_stor == 0 || id_stor == 4 || ( id_stor > 8 && id_stor < 13 )|| id_stor == 14 || id_stor == 16 || id_stor == 17 || id_stor >19 && id_stor <23 || id_stor == 24 || ( id_stor >26 && id_stor <30 ) || ( id_stor >31 && id_stor <37 ) || id_stor == 41 || id_stor == 46 ) {
						illtext.appendChild( document.createElement( "p"  ) );
						illtext.appendChild( document.createTextNode( "SÅLD"  ) );
					}
					
					illtext.className = "courier";

					var a = document.createElement( "a" );
					a.setAttribute( "href", "#" );
					a.setAttribute( "id", "a" );
					a.appendChild( document.createTextNode( "Tillbaka" ) );
					
					a.onclick = function() {
						jox.parentNode.removeChild( stor_bild );
						jox.className = "visible";
					}
					
					stor_bild.appendChild( a );

					jox.parentNode.appendChild( stor_bild );
			}
			
			smyckebilder[i].appendChild( liten_bild );
			id++;
		}
	}	

	/**************************************************************************************/

}


addLoadEvent( ill );