$(document).ready(function() {
   // Create overlay and append to body:
   $('<div id="overlay"/>').css({
     position: 'fixed',
     top: '0',
     left: '0',
     background: 'grey',
     opacity: '0.6',
     width: '100%',
     height: $(window).height() + 'px'
   }).hide().appendTo('body')

   // Build Body HTML for Booking Forms
   $('<div id="booking-form"/>').addClass('booking-form').hide().appendTo('body')
   $('<div id="close">X</div>').addClass('close').appendTo('div#booking-form')

   $('<div id="booking-form1"/>').addClass('booking-form').hide().appendTo('body')
   $('<div id="close1">X</div>').addClass('close').appendTo('div#booking-form1')

   $('<div id="booking-form2"/>').addClass('booking-form').hide().appendTo('body')
   $('<div id="close2">X</div>').addClass('close').appendTo('div#booking-form2')

   $('<div id="booking-proc"/>').addClass('booking-form').hide().appendTo('body')
   $('<img id="booking-proc-load" src="./images/loading.gif"/>').appendTo('div#booking-proc')
   $('<p id="booking-proc-text">Behind the scenes stuff...</p>').appendTo('div#booking-proc')

   $('<div id="booking-complete"/>').addClass('booking-form').hide().appendTo('body')
   $('<div id="booking-error"/>').addClass('booking-form').hide().appendTo('body')

   // Build HTML for Booking Form 0
   $('<form id="booking"></form>').appendTo('div#booking-form')
   $('<div id="bookingheader"/>').appendTo('form#booking')
   $('<h1 class="bookingheader">Book a tour</h1>').appendTo('div#bookingheader')
   $('<div id="bookingcontent"/>').appendTo('form#booking')
   $('<div id="questions"/>').appendTo('div#bookingcontent')
   $('<div id="question"><p>your artfeeler name (booking name)</p></div>').appendTo('div#questions')
   $('<div id="question"><p>your email address</p></div>').appendTo('div#questions')
   $('<div id="question"><p>email again please</p></div>').appendTo('div#questions')
   $('<div id="question"><p>main contact telephone no</p></div>').appendTo('div#questions')
   $('<div id="question"><p>country you hail from</p></div>').appendTo('div#questions')
   $('<div id="answers"/>').appendTo('div#bookingcontent')
   $('<div id="answer"><input type="text" name="afname"></input></div>').appendTo('div#answers')
   $('<div id="answer"><input type="text" name="afemail"></input></div>').appendTo('div#answers')
   $('<div id="answer"><input type="text" name="afemailconfirm"></input></div>').appendTo('div#answers')
   $('<div id="answer"><input type="text" name="afcontact"></input></div>').appendTo('div#answers')
   $('<div id="answer"><input type="text" name="afcountry"></input></div>').appendTo('div#answers')
   $('<div id="navigation"/>').appendTo('form#booking')
   $('<div id="submit1" class="nextfirst">next</div>').appendTo('div#navigation')

   // Build HTML for Booking Form 1
   $('<form id="booking1">').appendTo('div#booking-form1')
   $('<div id="bookingheader1"/>').appendTo('form#booking1')
   $('<h1 class="bookingheader">Book a tour</h1>').appendTo('div#bookingheader1')
   $('<div id="bookingcontent1">').appendTo('form#booking1')
   $('<div id="questions1">').appendTo('div#bookingcontent1')
   $('<div id="question1"><p>tour type</p></div>').appendTo('div#questions1')
   $('<div id="question1"><p>date of tour you want to book</p></div>').appendTo('div#questions1')
   $('<div id="question1"><p>how many people (max 3)</p></div>').appendTo('div#questions1')
   $('<div id="question1"><p>Do you agree to our <a id="legal">Terms and Legal?</a></p></div>').appendTo('div#questions1')
   $('<div id="answers1">').appendTo('div#bookingcontent1')
   $('<div id="answer1"><select name="tourtype"><option>artfeelers tour</option><option>special tour (coming soon)</option></select></div>').appendTo('div#answers1')
   $('<div id="answer1"><select name="tourdate"><option>16 January 2010</option><option>23 January 2010</option><option>30 January 2010</option><option>6 February 2010</option><option>13 February 2010</option><option>20 February 2010</option><option>27 February 2010</option><option>6 March 2010</option><option>13 March 2010</option><option>20 March 2010</option><option>27 March 2010</option></select></div>').appendTo('div#answers1')
   $('<div id="answer1"><select name="tourpeople"><option>1</option><option>2</option><option>3</option><option>more than 3 ? email claire@artfeelers please!</option></select></div>').appendTo('div#answers1')
   $('<div id="answer2"><input type="checkbox" name="aflegal">yes</input></div>').appendTo('div#answers1')
   $('<div id="navigation1">').appendTo('form#booking1')
   $('<div id="back1" class="back">back</div>').appendTo('div#navigation1')
   $('<div id="submit2" class="next">next</div>').appendTo('div#navigation1')

   // Build HTML for Booking Form 2
   $('<form id="booking2">').appendTo('div#booking-form2')
   $('<div id="bookingheader2">').appendTo('form#booking2')
   $('<h1 class="bookingheader">Book a tour</h1>').appendTo('div#bookingheader2')
   $('<div id="bookingcontent2">').appendTo('form#booking2')
   $('<div id="questions2">').appendTo('div#bookingcontent2')
   $('<div id="question2"><p>average age of group</p></div>').appendTo('div#questions2')
   $('<div id="question2"><p>do you require a funky e-gift voucher?</p></div>').appendTo('div#questions2')
   $('<div id="question2"><p>name of person/people the e-gift vouncher is for</p></div>').appendTo('div#questions2')
   $('<div id="question2"><p>your name(s) and tell us what you would like to get out of the tour?</p></div>').appendTo('div#questions2')
   $('<div id="answers2">').appendTo('div#bookingcontent2')
   $('<div id="answer2"><select name="afage"><option>18 - 25</option><option>25 - 35</option><option>35 - 50</option><option>50 +</option><option>mixed</option></select></div>').appendTo('div#answers2')
   $('<div id="answer2"><input type="checkbox" name="afegift">yes</input></div>').appendTo('div#answers2')
   $('<div id="answer2"><input type="text" name="afgifter"></input></div></div>').appendTo('div#answers2')
   $('<div id="answer2"<textarea cols="25" rows="3" name="afnames"></textarea></div>').appendTo('div#answers2')
   $('<div id="navigation2">').appendTo('form#booking2')
   $('<div id="back2" class="back">back</div>').appendTo('div#navigation2')
   $('<div id="submit3" class="finish">finish</div>').appendTo('div#navigation2')

   // Legal!
   $('<div id="legalstuff" />').hide().appendTo('body')
   $('<h1 class="legalheader">Terms and Conditions</h1>').appendTo('div#legalstuff')
   $('<p>You (if purchased for yourself) or the Gift Voucher recipient/s will be bound by the following Terms and Conditions, of which you/they will be advised at the time of booking. Please read these carefully and if there is any known reason which may make the recipient/s unsuitable to participate in a tour, do not proceed with the booking - contact us.</p>').appendTo('div#legalstuff')
   $('<p>1. You (the tour participant) accept the risks involved in participating in a artfeelers tour and participate at your own risk. Going on an artfeelers tour is a physical activity, which can be risky in the busy centre of London. Tours may involve crossing busy roads which are hazardous and entering into galleries and studios in which there are may be risks. Risks include accidents, physical injury and death. You take full responsibility for this risk and confirm that you are in a suitable physical condition with no underlying medical conditions or injuries which may affect your ability to safely participate in an artfeelers tour.</p>').appendTo('div#legalstuff')
   $('<p>2. You will not hold artfeelers or the owners, organisers, staff, sponsors, partners, galleries or artists involved liable for any injuries or illness sustained as a result of your participation in a tour. artfeelers will not be liable for any loss, damage, action, claim or costs arising as a consequence of your participation in an artfeelers tour</p>').appendTo('div#legalstuff')
   $('<p>3. If you miss a pre-booked Scheduled or Customised Tour or cancel with less than 48 hours notice, you will be charged the full price of the tour. No refunds can be given for missed appointments or cancellations made with less than 48 hours notice. We will, where possible, offer you the chance to reschedule, but this is not guaranteed. We offer a full refund on cancellations made at least 48hrs before the start of your artfeelers. </p>').appendTo('div#legalstuff')
   $('<p>4. Refunds will be given if artfeelers cancels a tour that you have already pre-booked. Where a Gift Voucher has been used to book, you will receive a further Gift Voucher of the same value to redeem against the cost of a tour. artfeelers accepts no responsibility for the cancellation of a tour and reserves the right to cancel a particular tour at any time for any reason.</p>').appendTo('div#legalstuff')
   $('<p>5. The Terms and Conditions stated here are binding and without the need for a signed agreement. You are deemed to have accepted these Terms and Conditions if you sign-up for a tour. These Terms and Conditions may be amended or updated by artfeelers without prior notice.</p>').appendTo('div#legalstuff')


   // Assign click function:
   $('#booking').click(function(){

     $('#overlay').show()
     // Set all the slides to be centered
     $('#booking-form').center()
     $('#booking-form1').center()
     $('#booking-form2').center()
     $('#booking-proc').center()
     $('#booking-complete').center()
     $('#booking-error').center()
	 $('#booking-form').slideDown(1000)

     $('#legal').hover(function(e) {
       $('div#legalstuff').css( {
         width: '600px',
         height: '400px',
         position: 'fixed',
         top: ((e.pageX - this.offsetLeft) - 250) + 'px',
         left: ((e.pageY - this.offsetTop) - 0) + 'px',
         background: 'white'
       })
       $('div#legalstuff').show()
     }, function() {
       $('div#legalstuff').hide()
     });

     $('#submit1').click(function(){
       $('#booking-form').hide("slide", { direction: "left"}, 1000)
       $('#booking-form1').show("slide", { direction: "right"}, 1000)
     })

     $('#submit2').click(function(){
       $('#booking-form1').hide("slide", {direction: "left"}, 1000)
       $('#booking-form2').show("slide", {direction: "right"}, 1000)
     })

     $('#submit3').click(function(){
       $('#booking-form2').hide("slide", {direction: "left" }, 1000)
       $('#booking-proc').show("slide", {direction: "right" }, 1000)

       var afname = $('#booking input[name=afname]').val()
       var afemail = $('#booking input[name=afemail]').val()
       var afemailconfirm = $('#booking input[name=afemail]').val()
       var afcontact = $('#booking input[name=afcontact]').val()
       var afcountry = $('#booking input[name=afcountry]').val()

       var tourtype = $('#booking1 select[name=tourtype]').val()
       var tourdate = $('#booking1 select[name=tourdate]').val()
       var tourpeople = $('#booking1 select[name=tourpeople]').val()
	   var aflegal = $('#booking1 input[name=aflegal]').val()

       var afage = $('#booking2 select[name=afage]').val()
       var afegift = $('#booking2 input[name=afegift]').val()
       var afgifter = $('#booking2 input[name=afgifter]').val()
       var afnames = $('#booking2 textarea[name=afnames]').val()

       // Validate the email address and all REQUIRED fields

       //send the form array to PHP for processing!

       $.ajax({
         type: "POST",
         url: "./php/booking.php",
         data: "afname=" + afname + "&afemail=" + afemail + "&afemailconfirm=" + afemailconfirm + "&afcontact=" + afcontact + "&afcountry=" + afcountry + "&tourtype=" + tourtype + "&tourdate=" + tourdate + "&tourpeople=" + tourpeople + "&aflegal=" + aflegal +"&afage=" + afage + "&afegift=" + afegift + "&afgifter=" + afgifter + "&afnames=" + afnames,
         success: function(msg){
           $('<div>' + msg + '</div>').appendTo('body')
           $('<h1 class="bookingheader">You\'ve Booked!</h1>').appendTo('div#booking-complete')

           $('<p>Great, all done</p>').appendTo('div#booking-complete')
           $('<p>We\'ve sent you an email with your booking confirmation</p>').appendTo('div#booking-complete')
           $('<p>We\'ll also give you a call closer to the time with some tour information</p>').appendTo('div#booking-complete')
           $('<p>See you soon!</p>').appendTo('div#booking-complete')
           $('<BR />').appendTo('div#booking-complete')
           $('<BR />').appendTo('div#booking-complete')
           $('<BR />').appendTo('div#booking-complete')
           $('<BR />').appendTo('div#booking-complete')
           $('<a id="close3">Close this</a>').appendTo('div#booking-complete')

           $('#booking-proc').hide("slide", {direction: "left" }, 1000)
           $('#booking-complete').show("slide", {direction: "right" }, 1000)

           $('a#close3').click(function() {
             $('#booking-complete').hide("fold", {}, 1000)

             $('#submit1').unbind('click')
             $('#submit2').unbind('click')
             $('#submit3').unbind('click')
             $('#back1').unbind('click')
             $('#back2').unbind('click')
             $('#close').unbind('click')
             $('#close1').unbind('click')
             $('#close2').unbind('click')
             $('#close3').unbind('click')
             $('#overlay').hide(1000)
           })

         },
         error: function(XMLHttpRequest, textStatus, errorThrown) {
           $('<h1>Error!</h1>').appendTo('div#booking-error')
           $('<p>' + errorThrown + '</p>').appendTo('div#booking-error')
           $('#booking-proc').hide("slide", {direction: "left" }, 1000)
           $('#booking-error').show("slide", {direction: "right" }, 1000)
         }
       })

     })

     $('#back1').click(function() {
       $('#booking-form1').hide("slide", {direction: "right"}, 1000)
       $('#booking-form').show("slide", {direction: "left"}, 1000)
     })

     $('#back2').click(function() {
       $('#booking-form2').hide("slide", {direction: "right"}, 1000)
       $('#booking-form1').show("slide", {direction: "left"}, 1000)
     })

     $('div#close').click(function() {
       $('#booking-form').hide("fold", {}, 1000)

       $('#submit1').unbind('click')
       $('#submit2').unbind('click')
       $('#submit3').unbind('click')
       $('#back1').unbind('click')
       $('#back2').unbind('click')
       $('#close').unbind('click')
       $('#close1').unbind('click')
       $('#close2').unbind('click')
       $('#close3').unbind('click')
       $('#overlay').hide(1000)
     })

     $('div#close1').click(function() {
       $('#booking-form1').hide("fold", {}, 1000)

       $('#submit1').unbind('click')
       $('#submit2').unbind('click')
       $('#submit3').unbind('click')
       $('#back1').unbind('click')
       $('#back2').unbind('click')
       $('#close').unbind('click')
       $('#close1').unbind('click')
       $('#close2').unbind('click')
       $('#close3').unbind('click')
       $('#overlay').hide(1000)
     })

     $('div#close2').click(function() {
       $('#booking-form2').hide("fold", {}, 1000)

       $('#submit1').unbind('click')
       $('#submit2').unbind('click')
       $('#submit3').unbind('click')
       $('#back1').unbind('click')
       $('#back2').unbind('click')
       $('#close').unbind('click')
       $('#close1').unbind('click')
       $('#close2').unbind('click')
       $('#close3').unbind('click')
       $('#overlay').hide(1000)
     })

     return false;

    })

 })