// Initialize defaults
function InitDefaults()
{
	// Gen login form DIV
	html_loginform =  "<div id=\"LoginForm\" title=\"Login\">";
	html_loginform += "<p id=\"validateTips\"></p>";
	html_loginform += "<form>";
	html_loginform += "<fieldset>";
	html_loginform += "<label for=\"name\">Naam<\/label>";
	html_loginform += "<input type=\"text\" name=\"name\" id=\"name\" class=\"text ui-widget-content ui-corner-all\" />";
	html_loginform += "<label for=\"password\">Wachtwoord<\/label>";
	html_loginform += "<input type=\"password\" name=\"password\" id=\"password\" value=\"\" class=\"text ui-widget-content ui-corner-all\" />";
	html_loginform += "<\/fieldset>";
	html_loginform += "<\/form>";
	html_loginform += "<\/div>";
	$("body").append(html_loginform);    

	// Setup global variabls
	tips = $("#validateTips");
	var	name = $("#name"),
		password = $("#password"),
		allFields = $([]).add(name).add(password),
		height = 220;

	// Setup login form dialog
	$("#LoginForm").dialog({
		bgiframe: true,
		autoOpen: false,
		height: height,
		width: 350,
		modal: true,
		buttons: {
			'Login': function() {
				var bValid = true;
				allFields.removeClass('ui-state-error');

				bValid = bValid && checkNotEmpty(name);
				bValid = bValid && checkNotEmpty(password);

				if (bValid) {
					$.getJSON("/include/backend_topline.php",{ action: "validate_login", username: name.val(), password: password.val() }, function(Login){
						if (Login) {
							window.location="?page=login";				
							$(this).dialog('close');
						} else {
							updateTips(Text.login_incorrect);
						}
					});
				}
			},
			Cancel: function() {
				$(this).dialog('close');
			}
		},
		close: function() {
			allFields.val('').removeClass('ui-state-error');
			updateTips('');
		}
	});
}

// Function to select the genetated main page
function GenPage ( Page )
{

  switch (Page) {
	case "index":
		GenIndex();
		break 
	case "salon":
		GenSalon();
		break 
	case "team":
		GenTeam();
		break 
	case "links":
		GenLinks();
		break 
	case "sieraden":
		GenSieraden();
		break 
	case "events":
		GenEvents();
		break 
	case "contact":
		GenContact();
		break 
	case "login":
		GenLogin();
		break 
	default : GenIndex();
  }
}

// Generate top navigation layout
function GenNav()
{
	$('body').append('<div id=\"nav\"></div>');
	// Add left top image
	$('#nav').append('<img style=\"position: absolute; left: 5px; top: 5px;\" src=\"../images/nav_'+Page+'.jpg\">');
	// Add buttons
	$('#nav').append('<a href=\'?page=news\' id=\"button_news\" style=\"position:absolute; width:105px; height:19px; left: 10px; top:120px;\" class=\"button ui-state-default ui-corner-all\" onMouseOver=\"$(this).addClass(\'ui-state-hover\')\"; onMouseOut=\"$(this).removeClass(\'ui-state-hover\')\"; return false\"><center><h1>Nieuws</h1></center></a>');
	$('#nav').append('<a href=\'?page=salon\' id=\"button_salon\" style=\"position:absolute; width:105px; height:19px; left: 125px; top:120px;\" class=\"button ui-state-default ui-corner-all\" onMouseOver=\"$(this).addClass(\'ui-state-hover\')\"; onMouseOut=\"$(this).removeClass(\'ui-state-hover\')\"; return false\"><center><h1>Salon</center></h1></a>');
	$('#nav').append('<a href=\'?page=team\' id=\"button_team\" style=\"position:absolute; width:105px; height:19px; left: 240px; top:120px;\" class=\"button ui-state-default ui-corner-all\" onMouseOver=\"$(this).addClass(\'ui-state-hover\')\"; onMouseOut=\"$(this).removeClass(\'ui-state-hover\')\"; return false\"><center><h1>Team</center></h1></a>');
	$('#nav').append('<a href=\'?page=links\' id=\"button_links\" style=\"position:absolute; width:105px; height:19px; left: 355px; top:120px;\" class=\"button ui-state-default ui-corner-all\" onMouseOver=\"$(this).addClass(\'ui-state-hover\')\"; onMouseOut=\"$(this).removeClass(\'ui-state-hover\')\"; return false\"><center><h1>Producten</center></h1></a>');
	$('#nav').append('<a href=\'?page=sieraden\' id=\"button_sieraden\" style=\"position:absolute; width:105px; height:19px; left: 470px; top:120px;\" class=\"button ui-state-default ui-corner-all\" onMouseOver=\"$(this).addClass(\'ui-state-hover\')\"; onMouseOut=\"$(this).removeClass(\'ui-state-hover\')\"; return false\"><center><h1>Sieraden</center></h1></a>');
	$('#nav').append('<a href=\'?page=events\' id=\"button_events\" style=\"position:absolute; width:105px; height:19px; left: 585px; top:120px;\" class=\"button ui-state-default ui-corner-all\" onMouseOver=\"$(this).addClass(\'ui-state-hover\')\"; onMouseOut=\"$(this).removeClass(\'ui-state-hover\')\"; return false\"><center><h1>Evenementen</center></h1></a>');
	$('#nav').append('<a href=\'?page=contact\' id=\"button_contact\" style=\"position:absolute; width:105px; height:19px; left: 700px; top:120px;\" class=\"button ui-state-default ui-corner-all\" onMouseOver=\"$(this).addClass(\'ui-state-hover\')\"; onMouseOut=\"$(this).removeClass(\'ui-state-hover\')\"; return false\"><center><h1>Contact</center></h1></a>');
	// Activate button class
	$('#button_'+Page).addClass('ui-state-active');
	// hack for new brouwsers startin ie8	
	if(!$.browser.msie || $.browser.version > 7) $('#nav h1').css('position', 'relative').css('top', '-11px');
}

// Generate scroll information in side panel
function GenScroll()
{
	$('body').append('<div id=\"scroll\"></div>');
	// Add joico logo
	$('#scroll').append('<img style=\"position: absolute; left: 10px; top: 15px;\" src=\"../images/joico.jpg\">');
	// Add scroll info
	$('#scroll').append('<img style=\"position: absolute; left: 20px; top: 75px;\" src=\"../images/scroll_nieuws.gif\">');
	$('#scroll').append('<img style=\"position: absolute; left: 5px; top: 105px;\" src=\"../images/blackline.gif\">');	
	$.getJSON("/include/backend_topline.php",{ action: "scroll"}, function(Scroll){
		Cnt = '0';
		HTML_scroll =  "<marquee style=\"position: absolute; left: 5px; top: 107px;\"; behavior=\"scroll\" direction=\"up\" height=\"350\" scrolldelay=\"0\" scrollamount=\"2\">";
		HTML_scroll += "<table width=\"140px\">";
		while(Scroll[Cnt]) {
			HTML_scroll += "<tr><td><h5>"+Scroll[Cnt]["title"]+"<br><font size=\"1\" color=\"#000000\">"+Scroll[Cnt]["content"]+"</font></h5></td></tr>";
			Cnt++;
		}
		HTML_scroll += "</table></marquee>";
		$('#scroll').append(HTML_scroll);
	});	
	$('#scroll').append("<a href=\'#\' onClick=\"$('#LoginForm').dialog('open'); return false\" style=\"position:absolute; left: 10px; top:580px;\"><h6>Login</h6></a>");	
	// hack for new brouwsers startin ie8	
	if(!$.browser.msie || $.browser.version > 7) $('#scroll a').css('top', '550px');
}

// Generate foot note layout
function GenFooter()
{
	$('body').append('<div id=\"footer\"></div>');
	$('#footer').append('<table style=\"position: absolute; left: 150px; top: 0px;\"><tr><td width=\"800\"><p>Copyright &copy 2009 Topline Kappers.nl Alle rechten voorbehouden. Boekel - Tel (0492) 323813</p></td></tr></table>');
	$('#footer p').css('color', '#000').css('font-weight', 'normal').css('font-size', '12px').css('padding', '0px');
	// hack for new brouwsers startin ie8	
	if(!$.browser.msie || $.browser.version > 7) $('#footer p').css('position', 'relative').css('top', '-11px');
}

// Generate the main product overview
function GenIndex()
{
	$('body').append('<div id=\"main\"></div>');
	// Add info text
	$('#main').append('<table style=\"position: absolute; left: 35px; top: 20px;\"><tr><td width=\"370\"><p>Welkom, leuk dat je een kijkje neemt op onze site. Topline Kappers is al meer dan 20 jaar een begrip in het Brabantse dorp Boekel. In het karakteristieke pand aan de Kerkstraat staat een enthousiast team voor je klaar. Door onze vakkennis, creativiteit en een eerlijk advies ga je zeker met een trendy kapsel en een goed gevoel de deur uit. Kwaliteit, gezelligheid en service staan hoog in het vaandel bij Topline Kappers. Ook de kids zijn van harte welkom. Kijk rustig rond op onze site, voor meer informatie kun je altijd contact met ons opnemen.</p></td></tr></table>');
	// Add slideshow
	Slideshow  = "<div style=\"position: absolute; left: 450px; top: 20px;\" class=\"slideshow\">";
	Slideshow += "<img src=\"../images/slideshow/slide01.jpg\" width=\"150\" height=\"200\">";
	Slideshow += "<img src=\"../images/slideshow/slide02.jpg\" width=\"150\" height=\"200\">";
	Slideshow += "<img src=\"../images/slideshow/slide03.jpg\" width=\"150\" height=\"200\">";
	Slideshow += "<img src=\"../images/slideshow/slide04.jpg\" width=\"150\" height=\"200\">";
	Slideshow += "<img src=\"../images/slideshow/slide05.jpg\" width=\"150\" height=\"200\">";
	Slideshow += "<img src=\"../images/slideshow/slide06.jpg\" width=\"150\" height=\"200\">";
	Slideshow += "<img src=\"../images/slideshow/slide07.jpg\" width=\"150\" height=\"200\">";
	Slideshow += "<img src=\"../images/slideshow/slide08.jpg\" width=\"150\" height=\"200\">";
	Slideshow += "<img src=\"../images/slideshow/slide09.jpg\" width=\"150\" height=\"200\">";
	Slideshow += "<img src=\"../images/slideshow/slide10.jpg\" width=\"150\" height=\"200\">";
	Slideshow += "<img src=\"../images/slideshow/slide11.jpg\" width=\"150\" height=\"200\">";
	Slideshow += "<img src=\"../images/slideshow/slide12.jpg\" width=\"150\" height=\"200\">";
	Slideshow += "<img src=\"../images/slideshow/slide13.jpg\" width=\"150\" height=\"200\">";
	Slideshow += "<img src=\"../images/slideshow/slide14.jpg\" width=\"150\" height=\"200\">";
	Slideshow += "<img src=\"../images/slideshow/slide15.jpg\" width=\"150\" height=\"200\">";
	Slideshow += "</div>";
	$('#main').append(Slideshow);
	$('.slideshow').cycle({
		fx: 'scrollLeft' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});
	// Add bottom news items
	$.getJSON("/include/backend_topline.php",{ action: "news"}, function(News){

		$('#main').append('<div align=\"center\" style=\"position:absolute; width:315px; height:19px; left: 10px; top:280px;\" class=\"button ui-state-default ui-corner-all\"><h1>'+News[0][1]+'</h1></div>');
		$('#main').append('<div id=\"news1\" style=\"position:absolute; left: 10px; top:305px;\" class=\"news ui-corner-all\">'+News[0][2]+'</div>'); 

		$('#main').append('<div align=\"center\" style=\"position:absolute; width:315px; height:19px; left: 335px; top:280px;\" class=\"button ui-state-default ui-corner-all\"><h1>'+News[1][1]+'</h1></div>');
		$('#main').append('<div id=\"news2\" style=\"position:absolute; left: 335px; top:305px;\" class=\"news ui-corner-all\">'+News[1][2]+'</div>'); 

		$('#main').append('<div align=\"center\" style=\"position:absolute; width:315px; height:19px; left: 10px; top:435px;\" class=\"button ui-state-default ui-corner-all\"><h1>'+News[2][1]+'</h1></div>');
		$('#main').append('<div id=\"news3\" style=\"position:absolute; left: 10px; top:460px;\" class=\"news ui-corner-all\">'+News[2][2]+'</div>'); 

		$('#main').append('<div align=\"center\" style=\"position:absolute; width:315px; height:19px; left: 335px; top:435px;\" class=\"button ui-state-default ui-corner-all\"><h1>'+News[3][1]+'</h1></div>');
		$('#main').append('<div id=\"news4\" style=\"position:absolute; left: 335px; top:460px;\" class=\"news ui-corner-all\">'+News[3][2]+'</div>'); 
	
		$('#news1, #news2, #news3, #news4').css('padding', '10px').css('border', '1px coral solid').css('width', '295px').css('height', '100px');
		// hack for new brouwsers startin ie8	
		if(!$.browser.msie || $.browser.version > 7) $('#main h1').css('position', 'relative').css('top', '-11px');
	});
}

function GenSalon()
{
	// Generate main div
	$('body').append('<div id=\"main\"></div>');

	$('#main').append('<table style=\"position: absolute; left: 20px; top: 0px;\"><tr><td width=\"620\"><p>Wij zijn supertrots op onze salon. De salon ademt een gastvrije en huiselijke sfeer. In onze salon hebben wij alle aandacht en tijd voor jou. Neem hieronder alvast een kijkje in onze dames en heren salon, nagelstudio, zonnestudio en ballenbak. Bij ontvangst in onze salon krijg je uiteraard een heerlijke kop koffie aangeboden. Wij willen graag dat je je thuis voelt bij Topline Kappers.</p></td></tr></table>');
	HTML  = "<div style=\"position:absolute; top:120px; left:15px;\" id=\"gallery\"><ul>";
	for (var Cnt=1; Cnt<21; Cnt++) {
		HTML += "<li><a href=\"../images/salon/fb"+Cnt+".jpg\" title=\"Salon\"><img src=\"../images/salon/fb"+Cnt+".jpg\" width=\"100\" height=\"100\" alt=\"\"></a></li>";
    }
	HTML += "</ul></div>";	
	$('#main').append(HTML);
}

function GenTeam()
{
	// Generate main div
	$('body').append('<div id=\"main\"></div>');
	// Add persons
	$('#main').append('<table style=\"position: absolute; left: 35px; top: 0px;\"><tr><td width=\"640\"><p>Maak hier alvast kennis met het top team van Topline Kappers.</p></td></tr></table>');
	$.getJSON("/include/backend_topline.php",{ action: "team"}, function(Team){
		Cnt=0;
		Left=40;
		Top=50;
		while(Team[Cnt]) {
			$('#main').append('<a class=\"title\" href=\"#\" title=\"'+Team[Cnt][1]+'|'+Team[Cnt][2]+'\"><img style=\"position: absolute; left: '+Left+'px; top:'+Top+'px;\" src=\"../images/team/'+Team[Cnt][3]+'.jpg\"></a>');
			Cnt++;
			if(Cnt%3) Left+=200;
			else { Left-=400; Top+=250;	};			
		}
		$('#main, #scroll').height(Top+245);
		$('#scroll a').css('top', (Top+225)+'px');
		// hack for new brouwsers startin ie8	
		if(!$.browser.msie || $.browser.version > 7) $('#scroll a').css('top', (Top+195)+'px');

		$('#footer').css('top', (Top+405)+'px');
		$('a.title').cluetip({splitTitle: '|', positionBy: 'mouse'});
		$('#main img').css('padding', '15px').css('border', '1px solid #ccc').css('background-color', '#eee');
	});	
}


function GenLinks()
{
	// Generate main div
	$('body').append('<div id=\"main\"></div>');
	// Add product logo's
	$('#main').append('<a href=\"http://www.joicoeurope.com\"><img border=\"0px\" style=\"position: absolute; left: 50px; top: 80px;\" src=\"../images/joico_logo.jpg\"></a>');
	$('#main').append('<a href=\"http://www.joico.com/renu/index.php\"><img border=\"0px\" style=\"position: absolute; left: 50px; top: 180px;\" src=\"../images/renu_logo.jpg\"></a>');
	$('#main').append('<a href=\"http://www.wellaprofessionals.nl\"><img border=\"0px\" style=\"position: absolute; left: 50px; top: 280px;\" src=\"../images/wella_logo.jpg\"></a>');
	$('#main').append('<a href=\"http://www.tigihaircare.com\"><img border=\"0px\" style=\"position: absolute; left: 50px; top: 380px;\" src=\"../images/tigi_logo.jpg\"></a>');
	$('#main').append('<a href=\"http://www.doopproducts.com\"><img border=\"0px\" style=\"position: absolute; left: 50px; top: 480px;\" src=\"../images/doop_logo.jpg\"></a>');
	// Add text 
	$('#main').append('<table style=\"position: absolute; left: 20px; top: 0px;\"><tr><td width=\"620\"><p>Voor de verzorging en styling van jouw haar maken wij gebruik van de professionele producten van onderstaande topmerken.</p></td></tr></table>');
	$('#main').append('<table style=\"position: absolute; left: 250px; top: 90px;\"><tr><td width=\"380\"><p>Producten voor het creeren van mooi en gezond haar.</p></td></tr></table>');
	$('#main').append('<table style=\"position: absolute; left: 250px; top: 190px;\"><tr><td width=\"380\"><p>Producten die verouderingsverschijnselen van je haar bestrijden.</p></td></tr></table>');
	$('#main').append('<table style=\"position: absolute; left: 250px; top: 290px;\"><tr><td width=\"380\"><p>Producten op maat voor alle behoeften van haar en hoofdhuid.</p></td></tr></table>');
	$('#main').append('<table style=\"position: absolute; left: 250px; top: 390px;\"><tr><td width=\"380\"><p>Producten voor trendsetters die het leven met een knipoog bekijken.</p></td></tr></table>');
	$('#main').append('<table style=\"position: absolute; left: 250px; top: 490px;\"><tr><td width=\"380\"><p>Trendy stylingsproducten voor de hippe medemens.</p></td></tr></table>');

	$('#main p:gt(0)').css('color', '#000').css('font-weight', 'normal');
}

function GenSieraden()
{
	// Generate main div
	$('body').append('<div id=\"main\"></div>');

	$('#main').append('<table style=\"position: absolute; left: 20px; top: 0px;\"><tr><td width=\"620\"><p>Een nieuw sieraad bij je nieuwe coupe? Dat kan. Topline Kappers is een officieel verkooppunt van Exoal accessoires en Oozoo horloges. Exoal is een jong Nederlands merk dat modieuze en tijdloze sieraden ontwerpt. De horloges van Oozoo hebben een eigen uitstraling, zowel mannelijk stoer, als vrouwelijk elegant. Kortom een prachtig cadeau voor jezelf of een ander.</p></td></tr></table>');

	$('#main').append('<a href=\"http://www.oozoo.nl/timepieces.html\"><img border=\"0px\" style=\"position: absolute; left: 190px; top: 175px;\" src=\"../images/oozoo_time.jpg\"></a>');
	$('#main').append('<a href=\"http://www.oozoo.nl/steel.html\"><img border=\"0px\" style=\"position: absolute; left: 190px; top: 300px;\" src=\"../images/oozoo_steel.jpg\"></a>');
	$('#main').append('<a href=\"http://www.exoal.nl\"><img border=\"0px\" style=\"position: absolute; left: 190px; top: 425px;\" src=\"../images/exoal.jpg\"></a>');
}

function GenEvents()
{
	// Generate main div
	$('body').append('<div id=\"main\"></div>');
	// add info text
	$('#main').append('<table style=\"position: absolute; left: 20px; top: 0px;\"><tr><td width=\"620\"><p>Onderstaande foto\'s geven je een indruk van de evenementen en activiteiten die Topline Kappers regelmatig organiseert. Ook de foto\'s van ons gezellige teamuitje willen we je niet onthouden.</p></td></tr></table>');

	// Topline Kappers bij Guus Meeuwis
	$('#main').append('<div style=\"position:absolute; width:250px; height:18px; left: 20px; top:100px;\" class=\"button ui-state-default ui-corner-all\"><h1><center>Topline Kappers bij Guus Meeuwis</center></h1></div>');
	HTML  = "<div style=\"position:absolute; top:120px; left:15px;\" id=\"gallery\"><ul>";
	for (var Cnt=1; Cnt<=2; Cnt++) {
		HTML += "<li><a href=\"../images/guus_meeuwis/image"+Cnt+".jpg\" title=\"Topline Kappers bij Guus Meeuwis\"><img src=\"../images/guus_meeuwis/image"+Cnt+".jpg\" width=\"100\" height=\"100\" alt=\"\"></a></li>";
	}
/*
	for (var Cnt=6; Cnt<=17; Cnt++) {
		HTML += "<li><a href=\"../images/guus_meeuwis/image"+Cnt+".jpg\" title=\"Topline Kappers bij Guus Meeuwis\"></a></li>";
	}
*/
	HTML += "</ul></div>";
	$('#main').append(HTML);

	// cursus B academy
	$('#main').append('<div style=\"position:absolute; width:250px; height:18px; left: 20px; top:250px;\" class=\"button ui-state-default ui-corner-all\"><h1><center>Cursus B academy door Isabelle</center></h1></div>');
	HTML  = "<div style=\"position:absolute; top:270px; left:15px;\" id=\"gallery\"><ul>";
	for (var Cnt=1; Cnt<=5; Cnt++) {
		HTML += "<li><a href=\"../images/cursus_b/image"+Cnt+".jpg\" title=\"Cursus B academy door Isabelle\"><img src=\"../images/cursus_b/image"+Cnt+".jpg\" width=\"100\" height=\"100\" alt=\"\"></a></li>";
	}
	for (var Cnt=6; Cnt<=19; Cnt++) {
		HTML += "<li><a href=\"../images/cursus_b/image"+Cnt+".jpg\" title=\"Cursus B academy door Isabelle\"></a></li>";
	}
	HTML += "</ul></div>";
	$('#main').append(HTML);

	// Add fotoshoot Sanne
	$('#main').append('<div style=\"position:absolute; width:180px; height:18px; left: 20px; top:400px;\" class=\"button ui-state-default ui-corner-all\"><h1><center>Fotoshoot Sanne</center></h1></div>');
	HTML  = "<div style=\"position:absolute; top:420px; left:15px;\" id=\"gallery\"><ul>";
	for (var Cnt=1; Cnt<=5; Cnt++) {
		HTML += "<li><a href=\"../images/fotoshoot_sanne/image"+Cnt+".jpg\" title=\"Fotoshoot Sanne\"><img src=\"../images/fotoshoot_sanne/image"+Cnt+".jpg\" width=\"100\" height=\"100\" alt=\"\"></a></li>";
	}
	for (var Cnt=6; Cnt<=30; Cnt++) {
		HTML += "<li><a href=\"../images/fotoshoot_sanne/image"+Cnt+".jpg\" title=\"Fotoshoot Sanne\"></a></li>";
	}
	HTML += "</ul></div>";
	$('#main').append(HTML);

	// Add fotoshoot Marjolein
	$('#main').append('<div style=\"position:absolute; width:180px; height:18px; left: 20px; top:550px;\" class=\"button ui-state-default ui-corner-all\"><h1><center>Fotoshoot Marjolein</center></h1></div>');
	HTML  = "<div style=\"position:absolute; top:570px; left:15px;\" id=\"gallery\"><ul>";
	for (var Cnt=1; Cnt<=5; Cnt++) {
		HTML += "<li><a href=\"../images/fotoshoot_marjolein/image"+Cnt+".jpg\" title=\"Fotoshoot Marjolein\"><img src=\"../images/fotoshoot_marjolein/image"+Cnt+".jpg\" width=\"100\" height=\"100\" alt=\"\"></a></li>";
	}
	for (var Cnt=6; Cnt<=16; Cnt++) {
		HTML += "<li><a href=\"../images/fotoshoot_marjolein/image"+Cnt+".jpg\" title=\"Fotoshoot Marjolein\"></a></li>";
	}
	HTML += "</ul></div>";
	$('#main').append(HTML);

/*
	// Add Euro Disney uitje
	$('#main').append('<div style=\"position:absolute; width:180px; height:18px; left: 20px; top:550px;\" class=\"button ui-state-default ui-corner-all\"><h1><center>Uitstapje Euro Disney</center></h1></div>');
	HTML  = "<div style=\"position:absolute; top:570px; left:15px;\" id=\"gallery\"><ul>";
	for (var Cnt=1; Cnt<=5; Cnt++) {
		HTML += "<li><a href=\"../images/euro_disney/image"+Cnt+".jpg\" title=\"Uitstapje Euro Disney\"><img src=\"../images/euro_disney/th_image"+Cnt+".jpg\" width=\"100\" height=\"100\" alt=\"\"></a></li>";
	}
	for (var Cnt=6; Cnt<=30; Cnt++) {
		HTML += "<li><a href=\"../images/euro_disney/image"+Cnt+".jpg\" title=\"Uitstapje Euro Disney\"></a></li>";
	}
	HTML += "</ul></div>";
	$('#main').append(HTML);
*/

	// Add Show Time out uitje
	$('#main').append('<div style=\"position:absolute; width:180px; height:18px; left: 20px; top:700px;\" class=\"button ui-state-default ui-corner-all\"><h1><center>Show Time-Out</center></h1></div>');
	HTML  = "<div style=\"position:absolute; top:720px; left:15px;\" id=\"gallery\"><ul>";
	for (var Cnt=1; Cnt<=5; Cnt++) {
		HTML += "<li><a href=\"../images/time_out/image"+Cnt+".jpg\" title=\"Show Time-Out\"><img src=\"../images/time_out/th_image"+Cnt+".jpg\" width=\"100\" height=\"100\" alt=\"\"></a></li>";
	}
	for (var Cnt=6; Cnt<=90; Cnt++) {
		HTML += "<li><a href=\"../images/time_out/image"+Cnt+".jpg\" title=\"Show Time-Out\"></a></li>";
	}
	HTML += "</ul></div>";
	$('#main').append(HTML);

	$('#gallery a').lightBox();

	Top=600;
	$('#main, #scroll').height(Top+265);
	$('#scroll a').css('top', (Top+245)+'px');

	// hack for new brouwsers starting ie8	
	if(!$.browser.msie || $.browser.version > 7) $('#scroll a').css('top', (Top+215)+'px');

	$('#footer').css('top', (Top+425)+'px');
	
	// hack for new brouwsers starting ie8	
	if(!$.browser.msie || $.browser.version > 7) $('#main h1').css('position', 'relative').css('top', '-11px');
}

function GenContact()
{
	// Generate main div
	$('body').append('<div id=\"main\"></div>');

	$('#main').append('<img style=\"position: absolute; left: 380px; top: 90px;\" src=\"../images/topline.jpg\">');

	$('#main').append('<div style=\"position:absolute; width:640px; height:19px; left: 10px; top:40px;\" class=\"button ui-state-default ui-corner-all\"><h1><center>Topline Kappers</center></h1></div>');
	HTML  = "<div id=\"address\" style=\"position:absolute; left: 10px; top:65px;\" class=\"news ui-corner-all\">";
	HTML += "<table style=\"position: absolute; top: 0px; left: 10px;\" width=\"275px\" border=\"0\" cellspacing=\"5\">";
	HTML += "<td width=\"9%\" valign=\"top\"><p align=\"left\">Adres: <br> Postcode: <br> Telefoon: <br> Email: <br> Website: </p></td> <td width=\"30%\" valign=\"top\"><p align=\"left\">Kerkstraat 41C <br> 5427 BB Boekel <br> (0492) 323813 <br> <a href=\"mailto:info@toplinekappers.nl\">info@toplinekappers.nl</a> <br> www.toplinekappers.nl</font></p></td></table>";
	$('#main').append(HTML);


	// add contact hours
	$('#main').append('<div style=\"position:absolute; width:315px; height:19px;left: 10px; top:280px;\" class=\"button ui-state-default ui-corner-all\"><h1><center>Salon op afspraak</center></h1></div>');
	HTML  = "<div id=\"af1\" style=\"position:absolute; left: 10px; top:305px;\" class=\"news ui-corner-all\">";
	HTML += "<table style=\"position: absolute; top: 0px; left: 10px;\" width=\"275px\" border=\"0\" cellspacing=\"5\">";
	HTML += "<td width=\"9%\" valign=\"top\"><p align=\"left\">Maandag <br> Dinsdag <br> Woensdag <br> Donderdag <br> Vrijdag <br> Zaterdag <br> </p></td> <td width=\"30%\" valign=\"top\"><p align=\"left\">gesloten <br> van 9.00 tot 17.30 uur<br> van 9.00 tot 17.30 uur <br> van 9.00 tot 20.00 uur <br> van 8.30 tot 18.00 uur <br> van 8.30 tot 16.00 uur <br></p></td></table>";
	$('#main').append(HTML);

	$('#main').append('<div style=\"position:absolute; width:315px; height:19px; left: 335px; top:280px;\" class=\"button ui-state-default ui-corner-all\"><h1><center>Heren zonder afspraak</center></h1></div>');
	HTML  = "<div id=\"af2\" style=\"position:absolute; left: 335px; top:305px;\" class=\"news ui-corner-all\">";
	HTML += "<table style=\"position: absolute; top: 0px; left: 10px;\" width=\"275px\" border=\"0\" cellspacing=\"5\">";
	HTML += "<td width=\"9%\" valign=\"top\"><p align=\"left\">Maandag <br> Dinsdag <br> Woensdag <br> Donderdag <br> Vrijdag <br> Zaterdag <br> </p></td> <td width=\"30%\" valign=\"top\"><p align=\"left\">gesloten <br> van 8.30 tot 17.30 uur<br> van 8.30 tot 17.30 uur <br> van 8.30 tot 17.30 uur <br> van 8.00 tot 18.00 uur <br> van 8.00 tot 15.30 uur <br></p></td></table>";
	$('#main').append(HTML);

	$('#af1, #af2, #address').css('padding', '10px').css('border', '1px coral solid').css('width', '295px').css('height', '150px');
	$('#address').css('width', '620px');

	$('#main p').css('color', '#000').css('font-weight', 'normal');
	
	// hack for new brouwsers startin ie8	
	if(!$.browser.msie || $.browser.version > 7) $('#main h1').css('position', 'relative').css('top', '-11px');
}
function GenLogin()
{
	// Generate main div
	$('body').append('<div id=\"main\"></div>');
	// Add info text
	$('#main').append('<table style=\"position: absolute; left: 35px; top: 10px;\"><tr><td width=\"370\"><p>Nieuws Items:</p></td></tr></table>');
	// Add bottom news items
	$.getJSON("/include/backend_topline.php",{ action: "news"}, function(News){

		$('#main').append('<textarea id=\"head_news1\" style=\"position:absolute; width:315px; height:19px; left: 10px; top:60px;\" class=\"button ui-state-default ui-corner-all\">'+News[0][1]+'</textarea>');
		$('#main').append('<textarea id=\"news1\" style=\"position:absolute; left: 10px; top:85px;\" class=\"news ui-corner-all\">'+News[0][2]+'</textarea>'); 

		$('#main').append('<textarea id=\"head_news2\" style=\"position:absolute; width:315px; height:19px; left: 335px; top:60px;\" class=\"button ui-state-default ui-corner-all\">'+News[1][1]+'</textarea>');
		$('#main').append('<textarea id=\"news2\" style=\"position:absolute; left: 335px; top:85px;\" class=\"news ui-corner-all\">'+News[1][2]+'</textarea>'); 

		$('#main').append('<textarea id=\"head_news3\" style=\"position:absolute; width:315px; height:19px; left: 10px; top:215px;\" class=\"button ui-state-default ui-corner-all\">'+News[2][1]+'</textarea>');
		$('#main').append('<textarea id=\"news3\" style=\"position:absolute; left: 10px; top:240px;\" class=\"news ui-corner-all\">'+News[2][2]+'</textarea>'); 

		$('#main').append('<textarea id=\"head_news4\" style=\"position:absolute; width:315px; height:19px; left: 335px; top:215px;\" class=\"button ui-state-default ui-corner-all\">'+News[3][1]+'</textarea>');
		$('#main').append('<textarea id=\"news4\" style=\"position:absolute; left: 335px; top:240px;\" class=\"news ui-corner-all\">'+News[3][2]+'</textarea>'); 
	
		$('#news1, #news2, #news3, #news4').css('padding', '10px').css('border', '1px coral solid').css('width', '295px').css('height', '100px');
		$('#head_news1, #head_news2, #head_news3, #head_news4').css('font-size', '13px').css('font-family', 'Comic Sans MS').css('font-weight', 'bold');
		
		// hack for new brouwsers startin ie8	
		if(!$.browser.msie || $.browser.version > 7) $('#main h1').css('position', 'relative').css('top', '-11px');
	});
	// Add button
	$('#main').append('<a href=\'#\' onClick=\"SaveChanges(\'news\'); return false\" style=\"position:absolute; width:105px; height:19px; left: 500px; top:375px;\" class=\"button ui-state-default ui-corner-all\" onMouseOver=\"$(this).addClass(\'ui-state-hover\')\"; onMouseOut=\"$(this).removeClass(\'ui-state-hover\')\"; return false\"><center><h1>Opslaan</h1></center></a>');
		
	// Add info text
	$('#main').append('<table style=\"position: absolute; left: 35px; top: 400px;\"><tr><td width=\"370\"><p>Scroll Items:</p></td></tr></table>');
	// Add scroll input
	$('#main').append('<input maxlength=\"18\" id=\"head_scroll\" style=\"position:absolute; width:150px; left: 60px; top:450px;\" class=\"news ui-corner-all\"></input>');
	$('#main').append('<textarea id=\"main_scroll\" style=\"position:absolute; width:150px; left: 60px; top:480px; height:150px; \" class=\"news ui-corner-all\"></textarea>'); 
	// Add button
	$('#main').append('<a href=\'#\' onClick=\"SaveChanges(\'add_scroll\'); return false\" style=\"position:absolute; width:105px; height:19px; left: 230px; top:610px;\" class=\"button ui-state-default ui-corner-all\" onMouseOver=\"$(this).addClass(\'ui-state-hover\')\"; onMouseOut=\"$(this).removeClass(\'ui-state-hover\')\"; return false\"><center><h1>Toevoegen</h1></center></a>');
	$.getJSON("/include/backend_topline.php",{ action: "scroll"}, function(Scroll){
		Cnt = '0';
		Left=60;
		Top=660;
		while(Scroll[Cnt]) {
			$('#main').append('<table width=\"140px\" style=\"position: absolute; left: '+Left+'px; top: '+Top+'px;\"><tr><td><h5>'+Scroll[Cnt]["title"]+'<br><font size=\"1\" color=\"#000000\">'+Scroll[Cnt]["content"]+'</font></h5></td></tr></table>');
			$('#main').append('<a href=\'#\' onClick=\"SaveChanges(\'remove_scroll'+Scroll[Cnt]["id"]+'\'); return false\" style=\"position:absolute; width:105px; height:19px; left: '+Left+'px; top:'+(Top+180)+'px;\" return false\"><center><h1>Verwijderen</h1></center></a>');
			Cnt++;
			if(Cnt%3) Left+=200;
			else { Left-=400; Top+=200;	};			
		}
		if(Cnt%3) Top+=250;
		else Top+=50;			
		$('#main, #scroll').height(Top);
		$('#scroll a').remove();
		$('#footer').css('top', (Top+160)+'px');
	});	
}

function SaveChanges(Action)
{
	if(Action == 'news') {
		$.getJSON("/include/backend_topline.php",{ action: "save_news", head_news1: $('#head_news1').val(), news1: $('#news1').val(), head_news2: $('#head_news2').val(), news2: $('#news2').val(), head_news3: $('#head_news3').val(), news3: $('#news3').val(), head_news4: $('#head_news4').val(), news4: $('#news4').val() });
	} else if(Action == 'add_scroll') {
		$.getJSON("/include/backend_topline.php",{ action: "add_scroll", head_scroll: $('#head_scroll').val(), main_scroll: $('#main_scroll').val() });	
	} else {
		$id = Action.replace("remove_scroll","");
		$.getJSON("/include/backend_topline.php",{ action: "remove_scroll", id: $id });		
	}	
	alert("De wijzigingen zijn opgeslagen!");
	window.location="?page=login";				
}