<?
/***************************************************************************************
Título/Title: 	 Modulo para el acceso a servidores de Correo.
				 Mail access module

Autor/Author:	 Daniel Marjos

Descripción/     Estos servicios pueden ser utilizados tanto para acceder a casillas IMAP, como tambien 
Descripion:      a casillas POP3 y NNTP
				 This services can be used to access IMAP, POP3 and NNTP accounts

F. Inicio/
Started At:		 21 de Agosto de 2003 / August 21, 2003

Ult Modif./
Last Modified:   21 de Agosto de 2003 / August 21, 2003
***************************************************************************************/

/*

This class represents a single message.
Esta clase representa un unico mensaje.

The fields are quite self-explanatories, but here is a little documentation:

date 					: the date the message was sent
msgID					: the ID the SMTP server gave to this message
from					: who sent the message. 
to						: the message's recipients. Semicolon separated.
cc						: carbon-copy recipients.
cco						: blind carbon copy
hasAttachments			: True if the message has any attachment. False otherwise
subject					: the message subject
body					: the message body
attachments				: array holding all the attachments
*/
class clsMessage { 
	var $date; 
	var $msgID;
	var $from;
        var $size;
	var $to;
	var $cc;
	var $cco;
	var $hasAttachs = false;
	var $subject;
	var $body;
	var $attachments = array();
}

/*
Main class.


*/
class clsImapHandler {

	var $login = ""; // The login name
	var $password = ""; // Password to log in into the account
	var $servername = "localhost"; // the server to access
	var $protocol = "143/imap/notls"; // default protocol
	var $folder = "INBOX"; // default folder
	var $mbox; // internal use - the mbox identifier
	var $Messages; // the number of messages in the folder
	var $dispos; // internal use - used to process attachments
	var $currMsg; // internal use - the number of current processing message 
	
	/*
	Constructor.
	Sets up the internal fields.
	Receives as parameters:
	
	login 			: as explained above
	password		: as explained above
	server			: optional. allows to set a explicit server to access
	proto			: the protocol to use
	folder			: the folder to access
	*/
	function clsImapHandler($login,$password,$server="",$proto="",$folder="") {
		
		$this->login=$login;
		$this->password=$password;
		if (!empty($server)) $this->servername=$server;
		if (!empty($proto)) $this->protocol=$proto;
		if (!empty($folder)) $this->folder=$folder;
		$this->mbox=-1;
		$this->Messages=0;
		$this->dispos=0;		
	}
	
	/*
	function Open
	
	used to establish a connection to the mail server. Once connected succesfully, it retrieves 
	the number of messages, sets the mailbox identifier, and returns true. If unsuccesfull, 
	returns false
	*/
	function open() {
	
		$fqsn="{".$this->servername.":".$this->protocol."}".$this->folder;
		$_mbox=imap_open($fqsn,$this->login,$this->password);
		if ($_mbox) {
			$_headers=imap_headers($_mbox);
			$this->Messages=count($_headers);
			$this->mbox=$_mbox;
			return true;
		} else {
			return false;
		}
		
	}

	/*
	Function Close
	
	used to close the connection to the server
	*/
	function close() {
		
		imap_close($this->mbox);
		
	}

	/*
	
	Internal function _decodeString
	
	used to decode a string from bas64 or quoted_printable
	
	thanks to PHP.net user comments
	*/
	function _decodeString($theString) {
		if(ereg("=\?.{0,}\?[Bb]\?",$theString)){ 
			$arrHead=split("=\?.{0,}\?[Bb]\?",$theString); 
			while(list($key,$value)=each($arrHead)){ 
				if(ereg("\?=",$value)){ 
					$arrTemp=split("\?=",$value); 
					$arrTemp[0]=base64_decode($arrTemp[0]); 
					$arrHead[$key]=join("",$arrTemp); 
				} 
			} 
			$strHead=join("",$arrHead); 
		} elseif(ereg("=\?.{0,}\?[Qq]\?",$theString)){ 
			$strHead=quoted_printable_decode($theString); 
			$strHead=ereg_replace("=\?.{0,}\?[Qq]\?","",$strHead); 
			$strHead=ereg_replace("\?=","",$strHead); 
		} else {
			$strHead=$theString;
		}
		
		return $strHead;
	}

	/*
	function getMessage
	
	retrieves the message given as parameter.
	
	*/
	function getMessage($msgNo) {

		// sets the internal message pointer
		$this->currMsg=$msgNo;		
		
		// creates a new instance of clsMessage
		$theMessage = new clsMessage;
		
		// get the header info for the message
		$_theHeader=imap_headerinfo($this->mbox,$msgNo);
		
		// ---- Start Block
		/*
		This block sets the from field
		*/
		$_from=array();
		while (list($k,$v)=each($_theHeader->from)){
			if (!empty($v->personal)) {
				$strHead=$this->_decodeString($v->personal);
				$_address="\"".$strHead."\" <".$v->mailbox."@".$v->host.">";
			} else 
				$_address=$v->mailbox."@".$v->host;
			$_from[]="$_address";
		}
		$theMessage->from=implode(";",$_from);
		// ---- End Block

		// ---- Start Block
		/*
		This block sets the to field
		*/
		$_to=array();
		if (is_array($_theHeader->to)) {
			while (list($k,$v)=each($_theHeader->to)){
				if (!empty($v->personal))  {
					$strHead=$this->_decodeString($v->personal);
					$_address="\"".$strHead."\" <".$v->mailbox."@".$v->host.">";
				} else 
					$_address=$v->mailbox."@".$v->host;
				$_to[]=$_address;
			}
		} else
			$_to[]=$_theHeader->to;
		$theMessage->to=implode(";",$_to);
		// ---- End Block

		// ---- Start Block
		/*
		This block sets the cc field
		*/
		$_cc=array();
		if (is_array($_theHeader->cc)) {
			while (list($k,$v)=each($_theHeader->cc)){
				if (!empty($v->personal))  {
					$strHead=$this->_decodeString($v->personal);
					$_address="\"".$strHead."\" <".$v->mailbox."@".$v->host.">";
				} else 
					$_address=$v->mailbox."@".$v->host;
				$_cc[]=$_address;
			}
		} else
			$_cc[]=$_theHeader->cc;
		$theMessage->cc=implode(";",$_cc);
		// ---- End Block

		// ---- Start Block
		/*
		This block sets the cco field
		*/
		$_cco=array();
		if (is_array($_theHeader->cco)) {
			while (list($k,$v)=each($_theHeader->cco)){
				if (!empty($v->personal))  {
					$strHead=$this->_decodeString($v->personal);
					$_address="\"".$strHead."\" <".$v->mailbox."@".$v->host.">";
				} else 
					$_address=$v->mailbox."@".$v->host;
				$_cco[]=$_address;
			}
		} else
			$_cco[]=$_theHeader->cco;
		$theMessage->cco=implode(";",$_cco);
		// ---- End Block

		// sets date, subject and msgID fields
		$theMessage->date=$_theHeader->udate;
		$theMessage->subject=$_theHeader->subject;
		$theMessage->msgID=$_theHeader->message_id;

		// Fetchs the structure for the message
		$_theStructure=imap_fetchstructure($this->mbox,$msgNo);

                $theMessage->size = ceil(($_theStructure->bytes/1024));

		// tries to guess if the message has or not any attachment.
		if ((count($_theStructure->parts)==2) and (($_theStructure->parts[0]->type==0 and $_theStructure->parts[0]->subtype=="PLAIN") and ($_theStructure->parts[1]->type==0 and $_theStructure->parts[1]->subtype=="HTML"))) {
			$theMessage->hasAttachs=0;
		} else {
			$theMessage->hasAttachs=1;
		}
		
		// if the message has any attach, get them
		if ($theMessage->hasAttachs==1) {
			$this->_getAttachments($theMessage,$_theStructure,1);
		}
		
		$sections = $this->parse($_theStructure);
		if(count($theMessage->attachments)>1) {
			$theMessage->body = imap_fetchbody($this->mbox,  $msgNo, $sections[0]["pid"]);
		} else {
			// sets the body wenn kein attachment
			$theMessage->body = imap_body($this->mbox,$msgNo);
		}
		// returns the message.
		return $theMessage;
	}


	/*
	internal function _getAttachments
	
	This is a recursive function, used to traversing the message to gaet all the attachments to it.
	*/
	function _getAttachments(&$theMessage,$part,$id){

		// How many attachments had we processed so far?		
		$ans=sizeof($theMessage->attachments);

		// if this part has an attach, increase the level.
		if($part->ifdisposition){ 
			$this->dispos++; 
		}
		
		switch($part->type){ // depending on what kind of part we have here...
			case 1: // is this a multipart type? so, skip that...
				if((strtolower($part->subtype)=="mixed") or (strtolower($part->subtype)=="alternative") or (strtolower($part->subtype)=="related")) 
					break;
			default: // Otherwise...

				// How many attachments had we processed so far?		
				$an = sizeof($theMessage->attachments);
				
				if($part->ifdparameters){ // do we have any disposition parameter in this part?
					$dpara = $part->dparameters; // get the parameters
					for ($v=0;$v<sizeof($dpara);$v++){
						if (eregi("filename", $dpara[$v]->attribute)) // is a filename?
							$fname = $dpara[$v]->value; // so, get it...
					}
				}
				if($part->ifparameters){ // do we have any disposition parameter in this part?
					if(empty($fname)){ // is $fname empty? so...
						$para = $part->parameters; // get parameters
						for ($v=0;$v<sizeof($para);$v++){
							if (eregi("name", $para[$v]->attribute)) // do we have a file name ?
								$fname = $para[$v]->value; // so get it...
						}
					}
				}
				
				if ($this->dispos<=1) { // the attachment level is main?
					if(empty($fname)) $fname = "Unknown"; // no file name... :(
					$theMessage->attachments[$an]->id = ($an+1); // sets the attachment ID
					$theMessage->attachments[$an]->part = $id; // sets the attachment part number

					// let's get the mime part number, in the form x.y[.z]
					$_thePartsArray=explode(".",$id);
					$_theParts=array();
					for ($_theIndex=1; $_theIndex<count($_thePartsArray); $_theIndex++){
						$_theParts[]=$_thePartsArray[$_theIndex];
					}
					$_theMimePart=implode(".",$_theParts);
					
					// let's set the fields for this attachment.
					$theMessage->attachments[$an]->mime_part=$_theMimePart;
					$theMessage->attachments[$an]->filename = $fname;
					$theMessage->attachments[$an]->type=$part->type;
					$theMessage->attachments[$an]->subtype=$part->subtype;
					$theMessage->attachments[$an]->dispos=$this->dispos;
					$theMessage->attachments[$an]->disposition=$part->disposition;
					$theMessage->attachments[$an]->size=$part->bytes;
					$theMessage->attachments[$an]->encoding=$part->encoding;
					$theMessage->attachments[$an]->mime_type=$this->_get_mime_type($part);
					$theMessage->attachments[$an]->content=imap_fetchbody($this->mbox,$this->currMsg,$_theMimePart);
				}
				break;
		}
		
		// now, we'll recurse with all the parts found so far...
		for($x = 0; $x < count($part->parts); $x++){
			$this->_getAttachments($theMessage,$part->parts[$x], $id.".".($x+1));
		}
		
		if($part->ifdisposition) $this->dispos--;
	}

	/*
	internal function _get_mime_type
	
	used to get a text representation of the mime part
	*/
	function _get_mime_type(&$structure) {
		$primary_mime_type = array("TEXT", "MULTIPART","MESSAGE", "APPLICATION", "AUDIO","IMAGE", "VIDEO", "OTHER");
		if($structure->subtype) {
			return $primary_mime_type[(int) $structure->type] . '/' .$structure->subtype;
		}
		return "TEXT/PLAIN";
	}
	
	/*
	internal function _get_encoding
	
	not implemented yet. reserved for future extensions.
	*/
	function _get_enconding(&$structure) {
	}

	// parse message body
	
	function parse($structure){
	// Thanks to Harry Wiens
	
	global $type;
	global $encoding;
	
	// create an array to hold message sections
	
	$ret = array();
	
	// split structure into parts
	$parts = $structure->parts;
	
	/*
	iterate through parts
	and create an array whose every element
	represents one part
	each element is itself an associative array
	with keys representing the
	
	- part number
	- part type
	- encoding
	- disposition
	- size
	- filename
	*/
	
	for($x=0; $x<sizeof($parts); $x++) {
		$ret[$x]["pid"] = ($x+1);
		$_this = $parts[$x];
		// default to text
		if ($_this->type == "") $_this->type = 0; 
		$ret[$x]["type"] = $type[$_this->type] . "/" . strtolower($_this->subtype);
		// default to 7bit
		if ($_this->encoding == "") $_this->encoding = 0; 
		$ret[$x]["encoding"] = $encoding[$_this->encoding];
		$ret[$x]["size"] = strtolower($_this->bytes);
		$ret[$x]["disposition"] = strtolower($_this->disposition);
		if (strtolower($_this->disposition) == "attachment") { 
			$params = $_this->dparameters;
			foreach ($params as $p) {
				if($p->attribute == "FILENAME") {
					$ret[$x]["name"] = $p->value;
					break;
				}
			}
		}
		
		return $ret;
	}
	}
	
	
}

?><!doctype html>

<html>

<head>
	<meta name="author" content="FKT42 GbR: Tobias FrÃ¶hlich & Michael Siedenbiedel 2012, fkt42.de" />
	<meta name="description" content="" />
	<meta name="robots" content="index,follow" />
	<meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	
	<title>Emil | Reservierungen</title>

	<base href="https://www.emil-dortmund.de/reservierung/" />

	<style type="text/css">
		@import "css/default.css";
		@import "css/carousel.css";
	</style>
	
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
	<script type="text/javascript" src="js/jquery.tappable.js"></script>
	<script type="text/javascript" src="js/functions.js"></script>

	<script type="text/javascript">
			GLOBAL_LANGUAGE = "en";
			GLOBAL_PAX_MAX  = 15;
			GLOBAL_AFFILIATE = "";
			GLOBAL_AFFILIATE_ID = 0;

			GLOBAL_LOCALIZED_STRINGS[0] = "RESTAURANT"; GLOBAL_LOCALIZED_STRINGS[1] = "Loading..."; GLOBAL_LOCALIZED_STRINGS[2] = "Time"; GLOBAL_LOCALIZED_STRINGS[3] = "Number of persons"; GLOBAL_LOCALIZED_STRINGS[4] = "Please choose"; GLOBAL_LOCALIZED_STRINGS[5] = "above"; GLOBAL_LOCALIZED_STRINGS[6] = "Calendar"; GLOBAL_LOCALIZED_STRINGS[7] = "Foods"; GLOBAL_LOCALIZED_STRINGS[8] = "Error"; GLOBAL_LOCALIZED_STRINGS[9] = "Please choose your desired time and the number of persons!"; GLOBAL_LOCALIZED_STRINGS[10] = "Special foods"; GLOBAL_LOCALIZED_STRINGS[11] = "Loading times..."; GLOBAL_LOCALIZED_STRINGS[12] = "Error loading times. Please try again later. Thank you for your patience!"; GLOBAL_LOCALIZED_STRINGS[13] = "Please be aware that we will contact you personally when booking for more than"; GLOBAL_LOCALIZED_STRINGS[14] = "persons, so we can arrange your personal needs and wishes."; GLOBAL_LOCALIZED_STRINGS[15] = "Loading foods..."; GLOBAL_LOCALIZED_STRINGS[16] = "Error loading foods. Please try again later. Thank you for your patience!"; GLOBAL_LOCALIZED_STRINGS[17] = "Pers. Data"; GLOBAL_LOCALIZED_STRINGS[18] = "Personal data"; GLOBAL_LOCALIZED_STRINGS[19] = "Forename:"; GLOBAL_LOCALIZED_STRINGS[20] = "Surname:"; GLOBAL_LOCALIZED_STRINGS[21] = "E-Mail:"; GLOBAL_LOCALIZED_STRINGS[22] = "Phone:"; GLOBAL_LOCALIZED_STRINGS[23] = "Comment"; GLOBAL_LOCALIZED_STRINGS[24] = "Newsltter"; GLOBAL_LOCALIZED_STRINGS[25] = "Subscribe newsletter"; GLOBAL_LOCALIZED_STRINGS[26] = "Summary"; GLOBAL_LOCALIZED_STRINGS[27] = "Date:"; GLOBAL_LOCALIZED_STRINGS[28] = "Persons:"; GLOBAL_LOCALIZED_STRINGS[29] = "Foods:"; GLOBAL_LOCALIZED_STRINGS[30] = "Name:"; GLOBAL_LOCALIZED_STRINGS[31] = "E-Mail:"; GLOBAL_LOCALIZED_STRINGS[32] = "Phone:"; GLOBAL_LOCALIZED_STRINGS[33] = "Book"; GLOBAL_LOCALIZED_STRINGS[34] = "person"; GLOBAL_LOCALIZED_STRINGS[35] = "s"; GLOBAL_LOCALIZED_STRINGS[36] = "according agreement"; GLOBAL_LOCALIZED_STRINGS[37] = "Error validating your personal data. Please try again later. Thank you for your patience!"; GLOBAL_LOCALIZED_STRINGS[38] = "Please enter your forename!"; GLOBAL_LOCALIZED_STRINGS[39] = "Please enter your surname!"; GLOBAL_LOCALIZED_STRINGS[40] = "Please enter your valid e-mail-adress!"; GLOBAL_LOCALIZED_STRINGS[41] = "Please enter your phone number!"; GLOBAL_LOCALIZED_STRINGS[42] = "is an invalid date"; GLOBAL_LOCALIZED_STRINGS[43] = "Number of persons"; GLOBAL_LOCALIZED_STRINGS[44] = "isn't numeric"; GLOBAL_LOCALIZED_STRINGS[45] = "is an invalid time"; GLOBAL_LOCALIZED_STRINGS[46] = "Error saving your booking. Please try again later. Thank you for your patience!"; GLOBAL_LOCALIZED_STRINGS[47] = "Booking saved"; GLOBAL_LOCALIZED_STRINGS[48] = "Thank you for your booking."; GLOBAL_LOCALIZED_STRINGS[49] = "Thank you for your booking. Because of the high number of persons you wish to book for we will contact you as soon as possible to comfirm your booking."; GLOBAL_LOCALIZED_STRINGS[50] = "The given booking doesn't exist."; GLOBAL_LOCALIZED_STRINGS[51] = "Booking canceled"; GLOBAL_LOCALIZED_STRINGS[52] = "Your booking has been canceled."; GLOBAL_LOCALIZED_STRINGS[53] = "Please confirm that you want to cancel your booking!"; GLOBAL_LOCALIZED_STRINGS[54] = "This reservation can not be edited anymore."; GLOBAL_LOCALIZED_STRINGS[55] = "<< Booking"; GLOBAL_LOCALIZED_STRINGS[56] = "Error validating the number of persons and time. Please try again later. Thank you for your patience!"; GLOBAL_LOCALIZED_STRINGS[57] = "Blocked day"; GLOBAL_LOCALIZED_STRINGS[58] = "Bookings are possible via phone only."; GLOBAL_LOCALIZED_STRINGS[59] = "Event on"; GLOBAL_LOCALIZED_STRINGS[60] = "Choice of foods a la carte without prior reservation."; GLOBAL_LOCALIZED_STRINGS[61] = "Please choose"; GLOBAL_LOCALIZED_STRINGS[62] = " menus!"; GLOBAL_LOCALIZED_STRINGS[63] = "Edit booking"; GLOBAL_LOCALIZED_STRINGS[64] = "Here you can edit or cancel your booking."; GLOBAL_LOCALIZED_STRINGS[65] = "Cancel booking"; GLOBAL_LOCALIZED_STRINGS[66] = "Confirm cancellation"; GLOBAL_LOCALIZED_STRINGS[67] = "There are only"; GLOBAL_LOCALIZED_STRINGS[68] = "seats available."; GLOBAL_LOCALIZED_STRINGS[69] = "Please enter your e-mail-adress or your phone number!"; GLOBAL_LOCALIZED_STRINGS[70] = "You will receive a confirmation e-mail shortly."; GLOBAL_LOCALIZED_STRINGS[71] = "Please enter your valid e-mail-adress or leave that field empty!"; GLOBAL_LOCALIZED_STRINGS[72] = "Reason"; 
	</script>
	

	<!-- Facebook Pixel Code -->
	<script>
		!function(f,b,e,v,n,t,s)
		{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
		n.callMethod.apply(n,arguments):n.queue.push(arguments)};
		if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
		n.queue=[];t=b.createElement(e);t.async=!0;
		t.src=v;s=b.getElementsByTagName(e)[0];
		s.parentNode.insertBefore(t,s)}(window, document,'script',
		'https://connect.facebook.net/en_US/fbevents.js');

		fbq('init', '502321010141157');
		fbq('track', 'PageView');
	</script>
	<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=502321010141157&ev=PageView&noscript=1" /></noscript>
	<!-- End Facebook Pixel Code -->
	
</head>

<body style="text-align: center;">
	<div class="preload">
		<img src="img/bg_navigation_hover.png" alt="" />
		<img src="img/bg_time_active.png" alt="" />
		<img src="img/activityIndicator.gif" alt="" />
		<img src="img/activityIndicator2.gif" alt="" />
		<img src="img/bg_semi_black.png" alt="" />

		<img src="img/bg_messagebox_bottom.png" alt="" />
		<img src="img/bg_messagebox_middle_top.png" alt="" />
		<img src="img/bg_messagebox_middle.png" alt="" />
		<img src="img/bg_messagebox_top.png" alt="" />
	</div>
	
	<div id="outerWrapper">
		<div id="loadingWrapper">
			<img src="img/activityIndicator2.gif" alt="" style="margin-bottom: 10px;" />
			<br />
			Loading...		</div>

		<div id="step1Wrapper" style="position: absolute; left: 0; top: 0; width: 320px; height: 356px;">

		<div class="headerWrapper">
			<div class="logoWrapper"></div>
			<div class="titleWrapper">RESTAURANT</div>
			<div class="flagWrapper">
				<a href="javascript:void(0);" onclick="$('#languageMenuWrapper1').animate({'height' : 'toggle'});"><img src="img/language_en.png" alt="DE" style="margin-bottom: -4px; height: 17px; border: 1px solid #c0c0c0;" /></a>
				<div id="languageMenuWrapper1" class="languageMenuWrapper">
					<div style="padding: 5px;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png)';" onmouseout="this.style.background = 'transparent';">
						<a href="de/"><img src="img/language_de.png" alt="DE" style="margin: 0 0 -5px 0;" /></a>
					</div>
					<div style="padding: 5px;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png)';" onmouseout="this.style.background = 'transparent';">
						<a href="en/"><img src="img/language_en.png" alt="EN" style="margin: -5px 0 -5px 0;" /></a>
					</div>
				</div>
			</div>
			<div class="stepWrapper">1/6</div>
			<div class="clearBoth"></div>
		</div>	

		
		<div id="calendarWrapper" style="position: relative;">

		<div class="boxWrapper">
			<div class="boxTitle" style="line-height: 1; padding-top: 5px; height: 33px;">
				<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
					<tr>

						<td class="touchable1" style="position: relative; cursor: pointer; width: 40px;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png) repeat-x';" onmouseout="this.style.background = 'url(img/blank.gif)';">
							<a onclick="loadCalendar(2021, 12, 'en');" style="color: #000; cursor: pointer; text-decoration: none; display: block; height: 28px; line-height: 28px; width: 48px;">&lt;&lt;</a>
						</td>
							<td>

							January 2021
						</td>

						<td class="touchable1" style="position: relative; cursor: pointer; width: 40px;">
							<div onclick="loadCalendar(2021, 02, 'en');" style="color: #000; cursor: pointer; text-decoration: none; display: block; height: 28px; line-height: 28px; width: 48px;">&gt;&gt;</div>
						</td>
						</tr>
				</table>
			</div>
			<div class="boxMiddle" style="margin-top: -5px; padding-top: 0;">
				<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
					<tr style="background: #dadada;">
						<td style="font-family: MuseoSlab500; text-align: center; width: 40px; height: 25px;">
							MO						</td>
						<td style="font-family: MuseoSlab500; text-align: center; width: 40px; height: 25px;">
							TU						</td>
						<td style="font-family: MuseoSlab500; text-align: center; width: 40px; height: 25px;">
							WE						</td>
						<td style="font-family: MuseoSlab500; text-align: center; width: 40px; height: 25px;">
							TH						</td>
						<td style="font-family: MuseoSlab500; text-align: center; width: 40px; height: 25px;">
							FR						</td>
						<td style="font-family: MuseoSlab500; text-align: center; width: 40px; height: 25px;">
							SA						</td>
						<td style="font-family: MuseoSlab500; text-align: center; width: 40px; height: 25px;">
							SU						</td>
					</tr>


					<tr>
	
						<td style="text-align: center; width: 40px; height: 25px;">
							&nbsp;
						</td>
			
						<td style="text-align: center; width: 40px; height: 25px;">
							&nbsp;
						</td>
			
						<td style="text-align: center; width: 40px; height: 25px;">
							&nbsp;
						</td>
			
						<td style="text-align: center; width: 40px; height: 25px;">
							&nbsp;
						</td>
			
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								1
							</td>
					
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								2
							</td>
					
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								3
							</td>
					
					</tr>
	
					<tr>
	
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								4
							</td>
					
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								5
							</td>
					
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								6
							</td>
					
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								7
							</td>
					
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								8
							</td>
					
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								9
							</td>
					
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								10
							</td>
					
					</tr>
	
					<tr>
	
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								11
							</td>
					
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								12
							</td>
					
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								13
							</td>
					
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								14
							</td>
					
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								15
							</td>
					
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								16
							</td>
					
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								17
							</td>
					
					</tr>
	
					<tr>
	
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								18
							</td>
					
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								19
							</td>
					
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								20
							</td>
					
							<td class="touchable1" style="position: relative; text-align: center; width: 40px; height: 25px;">
								<div style="position: relative; height: 25px;">
									<a onclick="if (!GLOBAL_TOUCH_DISABLED) { GLOBAL_FOODS = new Array(); GLOBAL_SHOW_EVENT_AT_STEP2 = true; GLOBAL_YEAR = '2021'; GLOBAL_MONTH = '01'; GLOBAL_DAY = '21'; updateStep(2); showStepWrapper(2, 1); }" style="text-decoration: none; cursor: pointer; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 25px;">21</a>
								</div>
							</td>
				
							<td class="touchable1" style="position: relative; text-align: center; width: 40px; height: 25px;">
								<div style="position: relative; height: 25px;">
									<a onclick="if (!GLOBAL_TOUCH_DISABLED) { GLOBAL_FOODS = new Array(); GLOBAL_SHOW_EVENT_AT_STEP2 = true; GLOBAL_YEAR = '2021'; GLOBAL_MONTH = '01'; GLOBAL_DAY = '22'; updateStep(2); showStepWrapper(2, 1); }" style="text-decoration: none; cursor: pointer; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 25px;">22</a>
								</div>
							</td>
				
							<td class="touchable1" style="position: relative; text-align: center; width: 40px; height: 25px;">
								<div style="position: relative; height: 25px;">
									<a onclick="if (!GLOBAL_TOUCH_DISABLED) { GLOBAL_FOODS = new Array(); GLOBAL_SHOW_EVENT_AT_STEP2 = true; GLOBAL_YEAR = '2021'; GLOBAL_MONTH = '01'; GLOBAL_DAY = '23'; updateStep(2); showStepWrapper(2, 1); }" style="text-decoration: none; cursor: pointer; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 25px;">23</a>
								</div>
							</td>
				
							<td class="touchable1" style="position: relative; text-align: center; width: 40px; height: 25px;">
								<div style="position: relative; height: 25px;">
									<a onclick="if (!GLOBAL_TOUCH_DISABLED) { GLOBAL_FOODS = new Array(); GLOBAL_SHOW_EVENT_AT_STEP2 = true; GLOBAL_YEAR = '2021'; GLOBAL_MONTH = '01'; GLOBAL_DAY = '24'; updateStep(2); showStepWrapper(2, 1); }" style="text-decoration: none; cursor: pointer; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 25px;">24</a>
								</div>
							</td>
				
					</tr>
	
					<tr>
	
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								25
							</td>
					
							<td style="text-align: center; width: 40px; height: 25px; color: #c0c0c0;">
								26
							</td>
					
							<td class="touchable1" style="position: relative; text-align: center; width: 40px; height: 25px;">
								<div style="position: relative; height: 25px;">
									<a onclick="if (!GLOBAL_TOUCH_DISABLED) { GLOBAL_FOODS = new Array(); GLOBAL_SHOW_EVENT_AT_STEP2 = true; GLOBAL_YEAR = '2021'; GLOBAL_MONTH = '01'; GLOBAL_DAY = '27'; updateStep(2); showStepWrapper(2, 1); }" style="text-decoration: none; cursor: pointer; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 25px;">27</a>
								</div>
							</td>
				
							<td class="touchable1" style="position: relative; text-align: center; width: 40px; height: 25px;">
								<div style="position: relative; height: 25px;">
									<a onclick="if (!GLOBAL_TOUCH_DISABLED) { GLOBAL_FOODS = new Array(); GLOBAL_SHOW_EVENT_AT_STEP2 = true; GLOBAL_YEAR = '2021'; GLOBAL_MONTH = '01'; GLOBAL_DAY = '28'; updateStep(2); showStepWrapper(2, 1); }" style="text-decoration: none; cursor: pointer; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 25px;">28</a>
								</div>
							</td>
				
							<td class="touchable1" style="position: relative; text-align: center; width: 40px; height: 25px;">
								<div style="position: relative; height: 25px;">
									<a onclick="if (!GLOBAL_TOUCH_DISABLED) { GLOBAL_FOODS = new Array(); GLOBAL_SHOW_EVENT_AT_STEP2 = true; GLOBAL_YEAR = '2021'; GLOBAL_MONTH = '01'; GLOBAL_DAY = '29'; updateStep(2); showStepWrapper(2, 1); }" style="text-decoration: none; cursor: pointer; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 25px;">29</a>
								</div>
							</td>
				
							<td class="touchable1" style="position: relative; text-align: center; width: 40px; height: 25px;">
								<div style="position: relative; height: 25px;">
									<a onclick="if (!GLOBAL_TOUCH_DISABLED) { GLOBAL_FOODS = new Array(); GLOBAL_SHOW_EVENT_AT_STEP2 = true; GLOBAL_YEAR = '2021'; GLOBAL_MONTH = '01'; GLOBAL_DAY = '30'; updateStep(2); showStepWrapper(2, 1); }" style="text-decoration: none; cursor: pointer; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 25px;">30</a>
								</div>
							</td>
				
							<td class="touchable1" style="position: relative; text-align: center; width: 40px; height: 25px;">
								<div style="position: relative; height: 25px;">
									<a onclick="if (!GLOBAL_TOUCH_DISABLED) { GLOBAL_FOODS = new Array(); GLOBAL_SHOW_EVENT_AT_STEP2 = true; GLOBAL_YEAR = '2021'; GLOBAL_MONTH = '01'; GLOBAL_DAY = '31'; updateStep(2); showStepWrapper(2, 1); }" style="text-decoration: none; cursor: pointer; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 25px;">31</a>
								</div>
							</td>
				
					</tr>
	
					<tr>
	
						<td style="text-align: center; width: 40px; height: 25px;">
							&nbsp;
						</td>
			
						<td style="text-align: center; width: 40px; height: 25px;">
							&nbsp;
						</td>
			
						<td style="text-align: center; width: 40px; height: 25px;">
							&nbsp;
						</td>
			
						<td style="text-align: center; width: 40px; height: 25px;">
							&nbsp;
						</td>
			
						<td style="text-align: center; width: 40px; height: 25px;">
							&nbsp;
						</td>
			
						<td style="text-align: center; width: 40px; height: 25px;">
							&nbsp;
						</td>
			
						<td style="text-align: center; width: 40px; height: 25px;">
							&nbsp;
						</td>
			
					</tr>
						
					
				</table>
			</div>
			<div class="boxBottom" style="background-position: 0 -5px; height: 5px;"></div>			
		</div>	
		
<script type="text/javascript">
	if (typeof ontouchstart == 'undefined')
	{
		// Click
		$('body').append('<style type="text/css">a:hover { color: #000; }</style>');

		$('.touchable1').bind({
			'mouseover' : function () {
				$(this).css('background', 'url(img/bg_navigation_hover.png) repeat-x');
			},
			'mouseout' : function () {
				$(this).css('background', 'url(img/blank.gif)');
			}
		});
	}
	else
	{
		// Touch				
		$('body').append('<style type="text/css">a:hover {} a:active { color: #000; } </style>');
		
		$('.touchable1').bind({
			'touchstart' : function () {
				if (!GLOBAL_TOUCH_DISABLED)
				{
					$(this).css('background', 'url(img/bg_navigation_hover.png) repeat-x');
					//console.log('touchstart: '+$(this).css('color'));
				}
			},
			'touchend' : function () {
				$(this).css('background', 'url(img/blank.gif)');
				//console.log('touchend: '+$(this).css('color'));
			}
		});
	}
</script>
		</div>
		</div>
		<div id="step2Wrapper" style="position: absolute; left: 320px; top: 0; width: 320px; height: 356px;">

<div class="headerWrapper">
	<div class="logoWrapper"></div>
	<div class="titleWrapper">RESTAURANT</div>
	<div class="flagWrapper">
		<a href="javascript:void();" onclick="$('#languageMenuWrapper2').animate({'height' : 'toggle'});"><img src="img/language_en.png" alt="DE" style="margin-bottom: -4px; height: 17px; border: 1px solid #c0c0c0;" /></a>
		<div id="languageMenuWrapper2" class="languageMenuWrapper">
			<div style="padding: 5px;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png)';" onmouseout="this.style.background = 'transparent';">
				<a href="de/"><img src="img/language_de.png" alt="DE" style="margin: 0 0 -5px 0;" /></a>
			</div>
			<div style="padding: 5px;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png)';" onmouseout="this.style.background = 'transparent';">
				<a href="en/"><img src="img/language_en.png" alt="EN" style="margin: -5px 0 -5px 0;" /></a>
			</div>
		</div>
	</div>
	<div class="stepWrapper">2/6</div>
	<div class="clearBoth"></div>
</div>	


<div class="boxWrapper">
	<div class="boxTitle">
		Time	</div>
	
	<div class="boxMiddle" style="padding: 10px 0 10px 30px;">
		<div id="step2TimesWrapper" style="max-height: 95px; width: 255px; overflow-y: auto;">
		</div>
	</div>

	<div class="boxBottom"></div>
</div>

<div class="boxWrapper">
	<div class="boxTitle">
		Number of persons	</div>

	<div class="boxMiddle" style="text-align: center;">
		<select id="fPax" onchange="GLOBAL_PAX = this.value;" style="cursor: pointer;">
		</select>
	</div>
	
	<div class="boxBottom"></div>
</div>

<div class="boxWrapper" style="position: absolute; bottom: 10px;">
	<div class="boxTitle" style="height: 5px;"></div>
	<div class="boxMiddle">
		<a id="backToCalendar" class="touchable" onclick="GLOBAL_ALL_FOODS = new Array(); GLOBAL_RELOAD_FOODS = true; GLOBAL_TIME = ''; GLOBAL_PAX = ''; showStepWrapper(1, 2);" style="text-decoration: none; cursor: pointer; display: block; float: left; width: 140px; margin-top: -5px; height: 23px; line-height: 23px; color: #000;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png) repeat-x';" onmouseout="this.style.background = 'url(img/blank.gif)';">&lt;&lt; Calendar</a>
		<a id="step2GoToNextStep" class="touchable" onclick="if (GLOBAL_TIME != '' && GLOBAL_PAX != '') { validateStep(2); } else { showMessageBox(gLS(9), gLS(10)); this.style.background = 'url(img/blank.gif)'; }" style="text-decoration: none; cursor: pointer; display: block; float: left; width: 140px; margin-top: -5px; height: 23px; line-height: 23px; color: #000;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png) repeat-x';" onmouseout="this.style.background = 'url(img/blank.gif)';">Pers. Data &gt;&gt;</a>
		<div class="clearBoth"></div>
	</div>
	<div class="boxBottom" style="background-position: 0 -5px; background-repeat: no-repeat;"></div>
</div>

		</div>
		<div id="step3Wrapper" style="position: absolute; left: 320px; top: 0; width: 320px; height: 356px;">

<div class="headerWrapper">
	<div class="logoWrapper"></div>
	<div class="titleWrapper">RESTAURANT</div>
	<div class="flagWrapper">
		<a href="javascript:void();" onclick="$('#languageMenuWrapper3').animate({'height' : 'toggle'});"><img src="img/language_en.png" alt="DE" style="margin-bottom: -4px; height: 17px; border: 1px solid #c0c0c0;" /></a>
		<div id="languageMenuWrapper3" class="languageMenuWrapper">
			<div style="padding: 5px;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png)';" onmouseout="this.style.background = 'transparent';">
				<a href="de/"><img src="img/language_de.png" alt="DE" style="margin: 0 0 -5px 0;" /></a>
			</div>
			<div style="padding: 5px;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png)';" onmouseout="this.style.background = 'transparent';">
				<a href="en/"><img src="img/language_en.png" alt="EN" style="margin: -5px 0 -5px 0;" /></a>
			</div>
		</div>
	</div>
	<div class="stepWrapper">3/6</div>
	<div class="clearBoth"></div>
</div>	

<div class="boxWrapper">
	<div class="boxTitle">
		Personal data	</div>
	<div class="boxMiddle" style="padding: 10px 20px 10px 20px;">
		<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
			<tr>
				<td style="text-align: left;">
					Forename:				</td>
				<td>
					<div style="position: relative;">
						<input id="forename" type="text" style="width: 150px;" value="" onkeyup="GLOBAL_FORENAME = this.value;" onfocus="this.select();" onkeydown="javascript:if (event.shiftKey && event.keyCode == 9) { $('#phone').focus() } else if (event.keyCode == 9) { $('#surname').focus() }" />
						<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(img/blank.gif);" onclick="$('#forename').focus();"></div>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2" style="height: 5px; font-size: 1px;">
					&nbsp;
				</td>
			</tr>
			<tr>
				<td style="text-align: left;">
					Surname:				</td>
				<td>
					<div style="position: relative;">
						<input id="surname" type="text" style="width: 150px;" value="" onkeyup="GLOBAL_SURNAME = this.value;" onfocus="this.select();" onkeydown="javascript:if (event.shiftKey && event.keyCode == 9) { $('#forename').focus() } else if (event.keyCode == 9) { $('#email').focus() }" />
						<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(img/blank.gif);" onclick="$('#surname').focus();"></div>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2" style="height: 5px; font-size: 1px;">
					&nbsp;
				</td>
			</tr>
			<tr>
				<td style="text-align: left;">
					E-Mail:				</td>
				<td>
					<div style="position: relative;">
						<input id="email" type="text" style="width: 150px;" value="" onkeyup="GLOBAL_EMAIL = this.value;"  onfocus="this.select();" onkeydown="javascript:if (event.shiftKey && event.keyCode == 9) { $('#surname').focus() } else if (event.keyCode == 9) { $('#phone').focus() }" />
						<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(img/blank.gif);" onclick="$('#email').focus();"></div>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2" style="height: 5px; font-size: 1px;">
					&nbsp;
				</td>
			</tr>
			<tr>
				<td style="text-align: left;">
					Phone:				</td>
				<td>
					<div style="position: relative;">
						<input id="phone" type="text" style="width: 150px;" value="" onkeyup="GLOBAL_PHONE = this.value;" onfocus="this.select();" onkeydown="javascript:if (event.shiftKey && event.keyCode == 9) { $('#email').focus() } else if (event.keyCode == 9) { $('#forename').focus() }" />
						<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(img/blank.gif);" onclick="$('#phone').focus();"></div>
					</div>
				</td>
			</tr>
		</table>
	</div>
	<div class="boxBottom">
	</div>
</div>
	
<div class="boxWrapper" style="position: absolute; bottom: 10px;">
	<div class="boxTitle" style="height: 5px;"></div>
	<div class="boxMiddle">
		<a class="touchable" onclick="GLOBAL_RELOAD_FOODS = true; updateStep(2); showStepWrapper(2, 3);" style="text-decoration: none; cursor: pointer; display: block; float: left; width: 140px; margin-top: -5px; height: 23px; line-height: 23px; color: #000;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png) repeat-x';" onmouseout="this.style.background = 'url(img/blank.gif)';">&lt;&lt; Time</a>
		<a id="step3GoToNextStep" class="touchable" onclick="GLOBAL_EMAIL = $('#email').val(); updateStep(4); updateStep(5); validateStep(3);" style="text-decoration: none; cursor: pointer; display: block; float: left; width: 140px; margin-top: -5px; height: 23px; line-height: 23px; color: #000;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png) repeat-x';" onmouseout="this.style.background = 'url(img/blank.gif)';">Foods &gt;&gt;</a>
		<div class="clearBoth"></div>
	</div>
	<div class="boxBottom" style="background-position: 0 -5px; background-repeat: no-repeat;"></div>
</div>
	
<script type="text/javascript">
	if (typeof ontouchstart == 'undefined')
	{
		// Click
		$('.touchable').bind({
			'mouseover' : function () {
				$(this).css('background', 'url(img/bg_navigation_hover.png) repeat-x');
			},
			'mouseout' : function () {
				$(this).css('background', 'url(img/blank.gif)');
			}
		});
	}
	else
	{
		// Touch
		$('.touchable').bind({
			'touchstart' : function () {
				$(this).css('background', 'url(img/bg_navigation_hover.png) repeat-x');
			},
			'touchend' : function () {
				$(this).css('background', 'url(img/blank.gif)');
			}
		});
	}
</script>
		</div>
		<div id="step4Wrapper" style="position: absolute; left: 320px; top: 0; width: 320px; height: 356px;">

<div class="headerWrapper">
	<div class="logoWrapper"></div>
	<div class="titleWrapper">RESTAURANT</div>
	<div class="flagWrapper">
		<a href="javascript:void();" onclick="$('#languageMenuWrapper4').animate({'height' : 'toggle'});"><img src="img/language_en.png" alt="DE" style="margin-bottom: -4px; height: 17px; border: 1px solid #c0c0c0;" /></a>
		<div id="languageMenuWrapper4" class="languageMenuWrapper">
			<div style="padding: 5px;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png)';" onmouseout="this.style.background = 'transparent';">
				<a href="de/"><img src="img/language_de.png" alt="DE" style="margin: 0 0 -5px 0;" /></a>
			</div>
			<div style="padding: 5px;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png)';" onmouseout="this.style.background = 'transparent';">
				<a href="en/"><img src="img/language_en.png" alt="EN" style="margin: -5px 0 -5px 0;" /></a>
			</div>
		</div>
	</div>
	<div class="stepWrapper">4/6</div>
	<div class="clearBoth"></div>
</div>	

<div class="boxWrapper">
	<div class="boxTitle">
		Special foods	</div>
	<div class="boxMiddle" style="padding: 10px 10px 10px 20px;">
		<div id="step4FoodsWrapper" style="max-height: 185px; width: 265px; overflow-y: auto;">
		</div>
	</div>
	<div class="boxBottom"></div>
</div>


<div class="boxWrapper" style="position: absolute; bottom: 10px;">
	<div class="boxTitle" style="height: 5px;"></div>
	<div class="boxMiddle">
		<a class="touchable" onclick="GLOBAL_RELOAD_FOODS = true; updateStep(3); showStepWrapper(3, 4);" style="text-decoration: none; cursor: pointer; display: block; float: left; width: 140px; margin-top: -5px; height: 23px; line-height: 23px; color: #000;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png) repeat-x';" onmouseout="this.style.background = 'url(img/blank.gif)';">&lt;&lt; Pers. Data</a>
		<a class="touchable" onclick="validateStep(4);" style="text-decoration: none; cursor: pointer; display: block; float: left; width: 140px; margin-top: -5px; height: 23px; line-height: 23px; color: #000;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png) repeat-x';" onmouseout="this.style.background = 'url(img/blank.gif)';">Comment &gt;&gt;</a>
		<div class="clearBoth"></div>
	</div>
	<div class="boxBottom" style="background-position: 0 -5px; background-repeat: no-repeat;"></div>
</div>

<script type="text/javascript">
	if (typeof ontouchstart == 'undefined')
	{
		// Click
		$('.touchable').bind({
			'mouseover' : function () {
				$(this).css('background', 'url(img/bg_navigation_hover.png) repeat-x');
			},
			'mouseout' : function () {
				$(this).css('background', 'url(img/blank.gif)');
			}
		});
	}
	else
	{
		// Touch
		$('.touchable').bind({
			'touchstart' : function () {
				$(this).css('background', 'url(img/bg_navigation_hover.png) repeat-x');
			},
			'touchend' : function () {
				$(this).css('background', 'url(img/blank.gif)');
			}
		});
	}

	$('.touchable').bind({
		'mouseover' : function () {
			$(this).css('background', 'url(img/bg_navigation_hover.png) repeat-x');
		},
		'mouseout' : function () {
			$(this).css('background', 'url(img/blank.gif)');
		}
	});

</script>
		</div>
		<div id="step5Wrapper" style="position: absolute; left: 320px; top: 0; width: 320px; height: 356px;">

<div class="headerWrapper">
	<div class="logoWrapper"></div>
	<div class="titleWrapper">RESTAURANT</div>
	<div class="flagWrapper">
		<a href="javascript:void();" onclick="$('#languageMenuWrapper5').animate({'height' : 'toggle'});"><img src="img/language_en.png" alt="DE" style="margin-bottom: -4px; height: 17px; border: 1px solid #c0c0c0;" /></a>
		<div id="languageMenuWrapper5" class="languageMenuWrapper">
			<div style="padding: 5px;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png)';" onmouseout="this.style.background = 'transparent';">
				<a href="de/"><img src="img/language_de.png" alt="DE" style="margin: 0 0 -5px 0;" /></a>
			</div>
			<div style="padding: 5px;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png)';" onmouseout="this.style.background = 'transparent';">
				<a href="en/"><img src="img/language_en.png" alt="EN" style="margin: -5px 0 -5px 0;" /></a>
			</div>
		</div>
	</div>
	<div class="stepWrapper">5/6</div>
	<div class="clearBoth"></div>
</div>	

<div class="boxWrapper">
	<div class="boxTitle">
		Comment	</div>
	<div class="boxMiddle" style="padding: 10px 20px 5px 20px;">
		<textarea id="anmerkungen" style="height: 90px; width: 240px; min-height: 90px; min-width: 240px; max-height: 90px; max-width: 240px;" onkeydown="javascript:if (event.shiftKey && event.keyCode == 9) { $('#newsletterCheckbox').focus() } else if (event.keyCode == 9) { $('#newsletterCheckbox').focus() }"></textarea>
	</div>
	<div class="boxBottom">
	</div>
</div>

<div id="newsletterCheckboxWrapper" class="boxWrapper">
	<div class="boxTitle">
		Newsltter	</div>
	<div class="boxMiddle" style="padding: 10px 20px 10px 20px;">
		<input id="newsletterCheckbox" type="checkbox" onchange="GLOBAL_NEWSLETTER = this.value;"  onkeydown="javascript:if (event.shiftKey && event.keyCode == 9) { $('#anmerkungen').focus() } else if (event.keyCode == 9) { $('#anmerkungen').focus() }" /> Subscribe newsletter	</div>
	<div class="boxBottom">
	</div>
</div>
	
<div class="boxWrapper" style="position: absolute; bottom: 10px;">
	<div class="boxTitle" style="height: 5px;"></div>
	<div class="boxMiddle">
		<a id="step5GoToPreviousStep" class="touchable" onclick="GLOBAL_LAST_STEP = 5; if (GLOBAL_FOODS_AVAILABLE) { updateStep(4); showStepWrapper(4, 5); } else { updateStep(3); showStepWrapper(3, 5); }" style="text-decoration: none; cursor: pointer; display: block; float: left; width: 140px; margin-top: -5px; height: 23px; line-height: 23px; color: #000;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png) repeat-x';" onmouseout="this.style.background = 'url(img/blank.gif)';">&lt;&lt; Foods</a>
		<a class="touchable" onclick="GLOBAL_NOTE = $('#anmerkungen').val(); updateStep(6); showStepWrapper(6, 5);" style="text-decoration: none; cursor: pointer; display: block; float: left; width: 140px; margin-top: -5px; height: 23px; line-height: 23px; color: #000;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png) repeat-x';" onmouseout="this.style.background = 'url(img/blank.gif)';">Summary &gt;&gt;</a>
		<div class="clearBoth"></div>
	</div>
	<div class="boxBottom" style="background-position: 0 -5px; background-repeat: no-repeat;"></div>
</div>
	
<script type="text/javascript">
	if (typeof ontouchstart == 'undefined')
	{
		// Click
		$('.touchable').bind({
			'mouseover' : function () {
				$(this).css('background', 'url(img/bg_navigation_hover.png) repeat-x');
			},
			'mouseout' : function () {
				$(this).css('background', 'url(img/blank.gif)');
			}
		});
	}
	else
	{
		// Touch
		$('.touchable').bind({
			'touchstart' : function () {
				$(this).css('background', 'url(img/bg_navigation_hover.png) repeat-x');
			},
			'touchend' : function () {
				$(this).css('background', 'url(img/blank.gif)');
			}
		});
	}
</script>
		</div>
		<div id="step6Wrapper" style="position: absolute; left: 320px; top: 0; width: 320px; height: 356px;">

<div class="headerWrapper">
	<div class="logoWrapper"></div>
	<div class="titleWrapper">RESTAURANT</div>
	<div class="flagWrapper">
		<a href="javascript:void();" onclick="$('#languageMenuWrapper6').animate({'height' : 'toggle'});"><img src="img/language_en.png" alt="DE" style="margin-bottom: -4px; height: 17px; border: 1px solid #c0c0c0;" /></a>
		<div id="languageMenuWrapper6" class="languageMenuWrapper">
			<div style="padding: 5px;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png)';" onmouseout="this.style.background = 'transparent';">
				<a href="de/"><img src="img/language_de.png" alt="DE" style="margin: 0 0 -5px 0;" /></a>
			</div>
			<div style="padding: 5px;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png)';" onmouseout="this.style.background = 'transparent';">
				<a href="en/"><img src="img/language_en.png" alt="EN" style="margin: -5px 0 -5px 0;" /></a>
			</div>
		</div>
	</div>
	<div class="stepWrapper">6/6</div>
	<div class="clearBoth"></div>
</div>	

<div class="boxWrapper">
	<div class="boxTitle">
		Summary	</div>
	<div class="boxMiddle" style="padding: 10px 20px 10px 20px;">
		<div style="max-height: 185px; width: 265px; overflow-y: auto;">
			<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
				<tr>
					<td style="text-align: left; width: 80px; vertical-align: top; font-family: MuseoSlab500;">
						Date:					</td>
					<td id="infoDateAndTime" style="text-align: left;">
					</td>
				</tr>
				<tr>
					<td colspan="2" style="height: 3px; font-size: 1px;">
						&nbsp;
					</td>
				</tr>
				<tr>
					<td style="text-align: left; vertical-align: top; font-family: MuseoSlab500;">
						Persons:					</td>
					<td id="infoPAX" style="text-align: left;">
					</td>
				</tr>
				<tr>
					<td colspan="2" style="height: 3px; font-size: 1px;">
						&nbsp;
					</td>
				</tr>
				<tr>
					<td style="text-align: left; vertical-align: top; font-family: MuseoSlab500;">
						Foods:					</td>
					<td id="infoFoods" style="text-align: left;">
					</td>
				</tr>
				<tr>
					<td colspan="2" style="height: 3px; font-size: 1px;">
						&nbsp;
					</td>
				</tr>
				<tr>
					<td style="text-align: left; vertical-align: top; font-family: MuseoSlab500;">
						Name:					</td>
					<td id="infoName" style="text-align: left;">
					</td>
				</tr>
				<tr>
					<td colspan="2" style="height: 3px; font-size: 1px;">
						&nbsp;
					</td>
				</tr>
				<tr>
					<td style="text-align: left; vertical-align: top; font-family: MuseoSlab500;">
						E-Mail:					</td>
					<td id="infoEmail" style="text-align: left;">
					</td>
				</tr>
				<tr>
					<td colspan="2" style="height: 3px; font-size: 1px;">
						&nbsp;
					</td>
				</tr>
				<tr>
					<td style="text-align: left; vertical-align: top; font-family: MuseoSlab500;">
						Phone:					</td>
					<td id="infoPhone" style="text-align: left;">
					</td>
				</tr>
			</table>
			<div id="infoNoteWrapper">
				<div style="text-align: left; vertical-align: top; font-family: MuseoSlab500; margin-top: 15px;">Comment</div>
				<div id="infoNote" style="text-align: left; vertical-align: top;"></div>
			</div>			
		</div>
	</div>
	<div class="boxBottom">
	</div>
</div>

<div class="boxWrapper" style="font-size: 11px;">
	* Durch das Klicken auf "Reservieren" stimmen Sie unseren <a href="https://www.emil-dortmund.de/datenschutz/" target="_blank">Datenschutzbestimmungen</a> zu.
</div>
	
<div class="boxWrapper" style="position: absolute; bottom: 10px;">	
	<div class="boxTitle" style="height: 5px;"></div>
	<div class="boxMiddle">
		<a class="touchable" onclick="updateStep(5); showStepWrapper(5, 6);" style="text-decoration: none; cursor: pointer; display: block; float: left; width: 140px; margin-top: -5px; height: 23px; line-height: 23px; color: #000;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png) repeat-x';" onmouseout="this.style.background = 'url(img/blank.gif)';">&lt;&lt; Comment</a>
		<a class="touchable" onclick="saveBooking();" style="text-decoration: none; cursor: pointer; display: block; float: left; width: 140px; margin-top: -5px; height: 23px; line-height: 23px; color: #000;" onmouseover="this.style.background = 'url(img/bg_navigation_hover.png) repeat-x';" onmouseout="this.style.background = 'url(img/blank.gif)';">Book &gt;&gt;</a>
		<div class="clearBoth"></div>
	</div>
	<div class="boxBottom" style="background-position: 0 -5px; background-repeat: no-repeat;"></div>
</div>
	
<script type="text/javascript">
	if (typeof ontouchstart == 'undefined')
	{
		// Click
		$('.touchable').bind({
			'mouseover' : function () {
				$(this).css('background', 'url(img/bg_navigation_hover.png) repeat-x');
			},
			'mouseout' : function () {
				$(this).css('background', 'url(img/blank.gif)');
			}
		});
	}
	else
	{
		// Touch
		$('.touchable').bind({
			'touchstart' : function () {
				$(this).css('background', 'url(img/bg_navigation_hover.png) repeat-x');
			},
			'touchend' : function () {
				$(this).css('background', 'url(img/blank.gif)');
			}
		});
	}
</script>
		</div>
	</div>
</body>

</html>