window.addEvent('domready', function(){
	var step2 = new FormCheck('step-2', {
    	display : {
    		showErrors: 1,
    		checkValueIfEmpty: 1
    	}
    });
    var step3 = new FormCheck('step-3', {
    	display : {
    		showErrors: 1,
    		checkValueIfEmpty: 1
    	}
    });
	var artist_count = 0;
	var step_4_button_count = 0;
	
	var myScroll = new Fx.Scroll('booking-form-wrapper', {mode: 'horizontal'});
	var myWindow = new Fx.Scroll(window, {mode: 'vertical'});
	
	//checkboxes
	$$('#step-2 input[type="checkbox"]').setStyle('opacity', 0).each(function(item){
		var checkbox = new Element('div', {'class':'checkbox-img'})
		checkbox.inject(item, 'after');
	});
	function addCheck(e)
	{
		if(e.target.getParent().getElement('.checkbox-img').hasClass('on'))
		{
			e.target.getParent().getElement('.checkbox-img').removeClass('on')
		}
		else
		{
			e.target.getParent().getElement('.checkbox-img').addClass('on');
		}
	}
	$$('#step-2 input[type="checkbox"]').addEvent('click', addCheck);
	$$('#step-2 .checkbox-img').addEvent('click',  addCheck);
	
	$$('#step-4 input[type="checkbox"]').setStyle('opacity', 0).each(function(item){
		var checkbox = new Element('div', {'class':'checkbox-img'})
		checkbox.inject(item, 'after');
	});
	function addCheck(e)
	{
		if(e.target.getParent().getElement('.checkbox-img').hasClass('on'))
		{
			e.target.getParent().getElement('.checkbox-img').removeClass('on')
		}
		else
		{
			e.target.getParent().getElement('.checkbox-img').addClass('on');
		}
	}
	$$('#step-4 input[type="checkbox"]').addEvent('click', addCheck);
	$$('#step-4 .checkbox-img').addEvent('click',  addCheck);

	

	if($('step-1'))
	{
		$('concert-roster').getElements('li a').addEvent('click', function(e){
			e.stop();
			if(this.hasClass('selected'))
			{
				this.removeClass('selected');
				this.getElement('input').set('checked', false);
				artist_count--;
				if(artist_count < 1)
				{
					$('step-1').getElement('.next').setStyle('display', 'none');
				}
					
				
			}
			else 
			{
				this.addClass('selected');
				artist_count++;
				this.getElement('input').set('checked', true);
				$('step-1').getElement('.next').setStyle('display', 'block');
			}
		});
		$('teaching-roster').getElements('li a').addEvent('click', function(e){
			e.stop();
			if(this.hasClass('selected'))
			{
				this.removeClass('selected');
				artist_count--;
				this.getElement('input').set('checked', false);
				if(artist_count < 1)
				{
					$('step-1').getElement('.next').setStyle('display', 'none');
				}
				
			}
			else 
			{
				this.addClass('selected');
				artist_count++;
				this.getElement('input').set('checked', true);
				$('step-1').getElement('.next').setStyle('display', 'block');

			}
		});
		
		//next buttons
		$('step-1').getElement('.next').addEvent('click', function(e){
			e.stop();
			
				myScroll.toElement('step-2');
				
				$('step-nav').getElements('li').removeClass('selected');
				$('step-2-nav').getParent('li').addClass('selected');
				Cufon.replace('#step-nav li a');
	
		
		});
		$('step-2').getElement('.next').addEvent('click', function(e){
			e.stop();
			if(step2.isFormValid())
			{
				$('step-2').getElement('.alert').setStyle('display', 'none');
				myScroll.toElement('step-3');
				$('step-nav').getElements('li').removeClass('selected');
				$('step-3-nav').getParent('li').addClass('selected');
				Cufon.replace('#step-nav li a');
	
			}
			else {
				$('step-2').getElement('.alert').set('text', 'Please complete this step.').addClass('negative').setStyle('dispay', 'block');
			}
		});
		
		$('step-3').getElement('.next').addEvent('click', function(e){
			e.stop();
			if(step3.isFormValid())
			{
				$('step-3').getElement('.alert').setStyle('display', 'none');
				toStepFour();
				Cufon.replace('#step-nav li a');
			}
			else {
				$('step-3').getElement('.alert').set('text', 'Please complete this step.').addClass('negative').setStyle('dispay', 'block');
			}

		});
		
		function toStepFour()
		{
			myScroll.toElement('step-4');
				$('step-nav').getElements('li').removeClass('selected');
				$('step-4-nav').getParent('li').addClass('selected');
				if(step_4_button_count > 0)
				{
					$('in-concert').getElement('ul').destroy();
					var el = new Element('ul');
					el.inject($('in-concert'), 'bottom');
					
					$('to-teach').getElement('ul').destroy();
					var el = new Element('ul');
					el.inject($('to-teach'), 'bottom');
					
					$('your-info').getElement('p').destroy();
					var el = new Element('p');
					el.inject($('your-info'), 'bottom');
					
					$('event-info').getElement('p').destroy();
					var el = new Element('p');
					el.inject($('event-info'), 'bottom');
					
					$('venue-info').getElement('p').destroy();
					var el = new Element('p');
					el.inject($('venue-info'), 'bottom');
				}
				step_4_button_count++;
				$('concert-roster').getElements('input:checked').each(function(item){
					var el = new Element('li');
					el.inject($('in-concert').getElement('ul'), 'bottom');
					el.set('text', item.value);
					
				});
				if($('in-concert').getElement('ul').getChildren().length == 0)
				{
					var el = new Element('li');
					el.inject($('in-concert').getElement('ul'), 'bottom');
					el.set('text', 'None');
				}
				$('teaching-roster').getElements('input:checked').each(function(item){
						var el = new Element('li');
						el.inject($('to-teach').getElement('ul'), 'bottom');
						el.set('text', item.value);
				});
				if($('to-teach').getElement('ul').getChildren().length == 0)
				{
					var el = new Element('li');
					el.inject($('to-teach').getElement('ul'), 'bottom');
					el.set('text', 'None');
				}
				$('step-2').getElements('input').each(function(item, index){
					if(index < 4)
					{
						var el = new Element('span');
						el.inject($('your-info').getElement('p'), 'bottom');
						el.set('text', item.value);
					}
				});
				$('event-fields').getElements('input').each(function(item){
					var parent = item.getParent();
					var label = parent.getElement('label').get('text');
					var inputEl = new Element('span');
					var labelEl = new Element('span', {'class': 'left'});
					labelEl.inject($('event-info').getElement('p'), 'bottom');
					inputEl.inject($('event-info').getElement('p'), 'bottom');
					inputEl.set('text', item.value);
					labelEl.set('text', label+':');
					
				});
				$('venue-fields').getElements('input').each(function(item){
					var parent = item.getParent();
					var label = parent.getElement('label').get('text');
					var inputEl = new Element('span');
					var labelEl = new Element('span', {'class': 'left'});
					labelEl.inject($('venue-info').getElement('p'), 'bottom');
					inputEl.inject($('venue-info').getElement('p'), 'bottom');
					inputEl.set('text', item.value);
					labelEl.set('text', label+':');						
				});
				$('venue-fields').getElements('textarea').each(function(item){
					var parent = item.getParent();
					var label = parent.getElement('label').get('text');
					var inputEl = new Element('span');
					var labelEl = new Element('span', {'class': 'left'});
					labelEl.inject($('venue-info').getElement('p'), 'bottom');
					inputEl.inject($('venue-info').getElement('p'), 'bottom');
					inputEl.set('text', item.value);
					labelEl.set('text', label+':');						
				});
		}
		//step navigation
		$('step-nav').getElements('li a').addEvent('click', function(e){
			e.stop();
			if(this.getParent('li').hasClass('selected'))
			{
			
			}
			else if(this.id == 'step-1-nav')
			{
				myScroll.toElement('step-1');
				$('step-nav').getElements('li').removeClass('selected');
				this.getParent('li').addClass('selected');
				Cufon.replace('#step-nav li a');
			}
			else if(this.id == 'step-2-nav' && artist_count > 0)
			{
				myScroll.toElement('step-2');
				$('step-nav').getElements('li').removeClass('selected');
				this.getParent('li').addClass('selected');
				Cufon.replace('#step-nav li a');	
			}
			else if(this.id == 'step-3-nav'){
				if(step2.isFormValid())
				{
					$('step-2').getElement('.alert').setStyle('display', 'none');
					myScroll.toElement('step-3');
					$('step-nav').getElements('li').removeClass('selected');
					this.getParent('li').addClass('selected');
					Cufon.replace('#step-nav li a');
				}
				else
				{
					$('step-2').getElement('.alert').set('text', 'Please complete this step.').addClass('negative').setStyle('dispay', 'block');
					myScroll.toElement('step-2');
					myWindow.toBottom();

				}	
			}
			else if(this.id == 'step-4-nav'){
				if(step3.isFormValid())
				{
					$('step-3').getElement('.alert').setStyle('display', 'none');
					toStepFour();
					Cufon.replace('#step-nav li a');
				}
				else 
				{
					$('step-3').getElement('.alert').set('text', 'Please complete this step.').addClass('negative').setStyle('dispay', 'block');
					myScroll.toElement('step-3');
					myWindow.toBottom();

				}
			}
			else if(this.id == 'step-5-nav'){
				
				myScroll.toElement('step-5');
				$('step-nav').getElements('li').removeClass('selected');
				this.getParent('li').addClass('selected');
				Cufon.replace('#step-nav li a');
			}
		});

	}
	//Back to step 1
	$('back-to-step1').addEvent('click', function(e){
		e.stop();
		myWindow.toTop();
		myScroll.toElement('step-1');
		$('step-nav').getElements('li').removeClass('selected');
		$('step-1-nav').getParent('li').addClass('selected');
		Cufon.replace('#step-nav li a');
	});
	
	// tab remedy
	$('email-input').addEvent('keydown', function(e){
		if(e.key == 'tab')
		{
			e.stop();
		}
	});
	$('ticket-extra').addEvent('keydown', function(e){
		if(e.key == 'tab')
		{
			e.stop();
		}
	});
	$('booking-form').get('send').addEvent('success', function(rsp){
		var json = JSON.decode(rsp);

		if(json.status == "ok")
		{
			$('booking-form').getElement('.alert').set('text', 'Thanks! Your email has been sent!').addClass('positive');
			
			$('step-5-nav').getParent('li').setStyle('display', 'block');
			$('step-nav').getElements('li').removeClass('selected');
			$('step-5-nav').getParent('li').addClass('selected');
			myScroll.toElement('step-5');
			Cufon.replace('#step-nav li a');
			myWindow.toTop()
		}
		else
		{
			$('booking-form').getElement(".alert").set('html', json.msg).addClass('negative');;
		}
	});
	
	 $('booking-form').getElement('button.finish').addEvent('click', function(e){
    	e.stop();
    	if(step2.isFormValid() && step3.isFormValid())
		{		
    		$('booking-form').getElement(".alert").set('html', 'Sending...');
    		$('booking-form').getElement('button.finish').setStyle('display', 'none');
 			$('booking-form').send();
 		}
 	});
});