/* index functions */

$(document).ready(function () {
	
	//Preload tab images
	jQuery.preloadImages = function()
	{
	  for(var i = 0; i<arguments.length; i++)
	  {
		jQuery("<img>").attr("src", arguments[i]);
	  }
	}
	$.preloadImages("/media/images/book_movie.jpg", "/media/images/search_movies_selected.jpg", "/media/images/check_seat_status_selected.jpg", "/media/images/find_town_codes_selected.jpg");
							
	//show_states();
	show_cities('#book_state');
	
	//On change the state call the cities	
	$('#book_state, #search_state, #status_state, #town_state').change(function () {																				 
		sync_dates($(this));
		show_cities($(this));
	});	
	
	//On change the city call the theaters
	$('#book_city').change(function () {									 
		show_theaters($(this));
	});
	
	//On change the city call the shows in city
	$('#status_city, #search_city').change(function () {									 
		show_cityshows($(this));
	});	
	
	//On change the search city and day, call movie code
	$('#search_city, #search_show, #search_day').change(function () {									 
		show_movie_code();
	});
	
	//On change the status city and day, call status code
	$('#status_city, #status_show, #status_day').change(function () {									 
		show_status_code();
	});	
	
	//On change the town city  town code
	$('#town_city').change(function () {									 
		show_town_format();
	});	
	
	//On change the theater call the show
	$('#book_theater').change(function () {
		show_shows($(this), '#book_city');	
	});	
	
	//datepicker
	$('#book_day, #search_day, #status_day').datepicker({
		dateFormat: 'dd',
		minDate: 0,
		maxDate: '+3D'
	});
	
	
	$('#book, #book_show, #book_day').change(function() {
		show_code();
	});
	//scroller
	$('.town_code_holder').cycle({ 
		fx: 'scrollUp' 
	});
	
	$('#tabs').tabs({select: handleTabSelect});
	
	
	//show_code();
	//remove curver around tabs
	$('#tabs, #tabs > *').removeClass('ui-corner-all');
	$('.tab_middle').removeClass('ui-corner-bottom');
	$('.ui-tabs-panel').addClass('.ui-corner-top');

});

show_states = function() {
	$.get('/data_service/', {"c": "state"}, function(data) {	
		var opt = '<option value="">----Select State----</option>';
		$.each(data, function(i, val) {
			opt += '<option value="' + i + '">' + val + '</option>';	
		});
		$('#book_state, #search_state, #status_state, #town_state').html(opt);
		//assign options to city
	}, 'json');	
}


show_cities = function(state) {
	//retrive value of state and check a valid state
	var state = $(state).val();
	
	if(state == '') {
		$('#options_box1, #options_box2, #options_box3, #options_box4').hide('clip', {}, 200);
		reset_all();
		show_code();
		show_movie_code();
		show_status_code();
		show_town_format();
		return false;
	}
		
	//if state is valid get the cities
	$.get('/data_service/', {"c": "cities", "state": state}, function(data) {											 
		opt = '<option value="">Select Town</option>';
		$.each(data, function(i, val) {
			opt += '<option value="' + i + '">' + val + '</option>';	
		});
		$('div').data(state, opt);
		
		//assign options to city
		$('#book_city, #search_city, #status_city, #town_city').html(opt);
		
		//show town codes in towncode box
		show_towncodes(data);
		reset_show();
		show_code();
		
		$('#options_box1, #options_box2, #options_box3, #options_box4').show('clip', {}, 800);
	}, 'json');		
	
}

show_theaters = function(city) {
	//retrive value of city and check a valid city
	var city = $(city).val();
	if(city == '') {
		return false;
		show_code();
	} 	
	//if city is valid get the theaters
	$.get('/data_service/', {"c": "theater", "city": city}, function(data) {											 
		var opt = '<option value="">Select Theatre</option>';
		$.each(data, function(i, val) {
			opt += '<option value="' + i + '">' + val + '</option>';			
		});
		//assign options to theater
		$('#book_theater').html(opt);
		reset_show();
		show_code();
	}, 'json');	
}

show_shows = function(theater, city) {
	
	//retrive value of city & theater and check they are valid
	var city = $(city).val();
	var theater = $(theater).val();
	if(city == '' || theater == '') {
		reset_show();
		show_code();
		return false;
	} 	
	//if city & theater are valid get the show
	$.get('/data_service/', {"c": "show", "city": city, "theater": theater}, function(data) {										 
		var opt = '<option value="">Select Show</option>';
		$.each(data, function(i, val) {
			opt += '<option value="' + i + '">' + val + '</option>';			
		});
		
		//assign options to show
		$('#book_show').html(opt);
		show_code();
	}, 'json');	
}

show_cityshows = function(city) {
	//retrive value of city and check they are valid
	var city = $(city).val();
	if(city == '') {
		return false;
	} 	
	//if city & theater are valid get the show
	$.get('/data_service/', {"c": "show", "city": city}, function(data) {										 
		var opt = '<option value="">Select Show</option>';
		$.each(data, function(i, val) {
			opt += '<option value="' + i + '">' + val + '</option>';			
		});
		
		//assign options to show
		$('#status_show, #search_show').html(opt);
	}, 'json');	
}	
reset_show = function() {
	$('#book_show').html('<option value="">Select Show</option>');
}

reset_all = function() {
	
	$('#book_city, #search_city, #status_city, #town_city').html('<option value="">Select Town</option>');
	$('#book_theater').html('<option value="">Select Theatre</option>');
	$('#book_show, #status_show').html('<option value="">Select Show</option>');
	$('#book, #book_day, #search_day').val('');
}

show_code = function() {
	//var defalut_code = 'bookno<span class="space">&lt;space&gt;</span>towncode+theatername<span class="space">&lt;space&gt;</span>showcode<span class="space">&lt;space&gt;</span>date';
	var book = $('#book').val();
	var city = $('#book_city').val().toLowerCase();
	var theater = $('#book_theater').find(':selected').text().toLowerCase();
	var show = $('#book_show').val();
	var day = $('#book_day').val();
	
	//create short code
	space = '<span class="space">&lt;space&gt;</span>';
	code = (book != '') ? 'book' + book : '<span class="grey">bookno</span>';
	code += space;
	code += (city != '') ? city : '<span class="grey">towncode</span>';
	code += (theater != 'select theatre') ? theater : '<span class="grey"><span class="space">+</span>theatre</span>';
	code += space;
	code += (show != '') ? show : '<span class="grey">showcode</span>';
	code += space;
	code += (day != '') ? day : '<span class="grey">date</span>';
	
	//show code
	$('#booking_format').html(code).show('clip');		
}

show_movie_code = function() {

	var city = $('#search_city').val().toLowerCase();
	var show = $('#search_show').val(); 
	var day = $('#search_day').val();
	
	//create short code
	space = '<span class="space">&lt;space&gt;</span>';
	code = 'movies';
	code += space;
	code += (city != '') ? city : '<span class="grey">towncode</span>';
	code += space;
	code += (show != '') ? show : '<span class="grey">showcode</span>';
	code += space;
	code += (day != '') ? day : '<span class="grey">date</span>';
	
	//show code
	$('#movies_format').html(code).show('clip');		
}

show_status_code = function() {

	var city = $('#status_city').val().toLowerCase();
	var show = $('#status_show').val();
	var day = $('#status_day').val();
	
	//create short code
	space = '<span class="space">&lt;space&gt;</span>';
	code = 'seats';
	code += space;
	code += (city != '') ? city : '<span class="grey">towncode</span>';
	code += space;
	code += (show != '') ? show : '<span class="grey">showcode</span>';
	code += space;
	code += (day != '') ? day : '<span class="grey">date</span>';
	
	//show code
	$('#status_format').html(code).show('clip');
}

show_town_format = function() {
	
	var city = ($('#town_city').val() != '') ? $('#town_city :selected').text().toLowerCase() : '';
	
	//create short code
	space = '<span class="space">&lt;space&gt;</span>';
	code = 'towncode';
	code += space;
	code += (city != '') ? city : '<span class="grey">townname</span>';
	
	//show code
	$('#towncode_format').html(code).show('clip');		
}

show_towncodes = function(data) {
	var town_code = '<div>';
	var a = 0;
	$.each(data, function(i, val) {
		if (a%6 == 0 && a != 0) {
			town_code += '</div><div>';
		}
		a++;
		town_code += '<div class="town_name">' + val + '</div><div class="town_code"> ' + i + '</div>';
	});
	//assign towncodes to scroll
	town_code += '</div>';
	$('#console').text(town_code);
	$('#city_codes').html(town_code);
	$('.town_code_holder').cycle({ 
		fx: 'scrollUp' 
	});
}

handleTabSelect = function (event, tab) {
	$('img#imgTab1').attr({ src: "/media/images/book_movie.jpg" });
	$('img#imgTab2').attr({ src: "/media/images/search_movies.jpg" });
	$('img#imgTab3').attr({ src: "/media/images/check_seat_status.jpg" });
	$('img#imgTab4').attr({ src: "/media/images/find_town_codes.jpg" });	
	if (tab.index == 0) {
		// tab 1 selected
		$('img#imgTab1').attr({ src: "/media/images/book_movie_selected.jpg" });
	} else if (tab.index == 1) {
		// tab 2 selected
		$('img#imgTab2').attr({ src: "/media/images/search_movies_selected.jpg" });
	} else if (tab.index == 2) {
		// tab 3 selected
		$('img#imgTab3').attr({ src: "/media/images/check_seat_status_selected.jpg" });
	} else if (tab.index == 3) {
		// tab 4 selected
		$('img#imgTab4').attr({ src: "/media/images/find_town_codes_selected.jpg" });
	}
}

sync_dates = function(state) {
	$('#book_state, #search_state, #status_state, #town_state').val($(state).val());
}