//variables that need to annouce first
var box = {};

/*---------------------------------------- OTHER FUNCTIONS ---------------------------------------------*/
//Open Program Details in a nice multibox.
function fn_open_details(_id) {

	var link = document.getElementById(_id);
	
	document.getElementById('mb_delegate').set({
             'href': link.href,
             'title': '',
			 'rel': 'width:620,height:380'
    }); //Change height/width in rel property here, not in css files

    box.open($('mb_delegate'));  

}

/*============================================== DOMREADY ==============================================*/
window.addEvent('domready', function() {

	//Creating necessary variables and functions
	
	var mySlide = new Fx.Slide('aj_table',{duration: 800, mode: 'vertical'});
    $('aj_load').setStyle('display', 'none');

	var urlsend = 'search.php';

	//for multibox
	box = new MultiBox('mb', {useOverlay: false, showNumbers: false, showControls:false});

	/*---------------------------------------- WHEN WE GET RESPONSE BACK ---------------------------------------------*/

	//We can use one Request object many times.
	var req = new Request.HTML({
			url:urlsend, method: 'get', headers: {'If-Modified-Since': 'Sat, 1 Jan 2000 00:00:00 GMT'},
		onSuccess: function(html) {//got data back, now what?
			
			//hide ajax loading gif
			$('aj_load').setStyle('display', 'none');
			//Inject the new data into the div table.
			$('aj_table').set('text','');
			$('aj_table').adopt(html);
			mySlide.show();
			
		},
		//Our request will most likely succeed, but just in case, we'll add an
		//onFailure method which will let the user know what happened.
		onFailure: function() {
			$('aj_table').set('text', 'The request failed. Please refresh the page.');
		}
	});
	
	/*------------------------------------ REQUEST FUNCTION -----------------------------------------*/

	//general function that take care of sending request to search.php (with query strings)
	function fn_send_request() {
		
		//hide div table and show ajax loading gif
		mySlide.hide();
		$('aj_load').setStyle('display', '');
		var txt = $('textsearch').get('value');
		
		if (txt == 'school name & description')
		{
			txt = '';
		}
		var txt = encodeURIComponent(txt);

		var urldata = 'page='+$('page_num').get('text');
		urldata = urldata + '&country='+$('aj_countries').get('value');
		urldata = urldata + '&degree='+$('aj_degrees').get('value');
		urldata = urldata + '&focus='+$('aj_focuses').get('value');
		urldata = urldata + '&text='+txt;
		req.send(urldata);
	};

	/*---------------------------------------- EVENTS ---------------------------------------------*/

	//if click previous ->change page num->refresh table	
	$('prev').addEvent('click', function () {
		$('prev').set('text','<< previous');
		var n = $('page_num').get('text').toInt();
		if (n > 1)
		{
			$('page_num').set('text',n - 1);
		}
		if (n == 2)
		{
			$('prev').set('text','');
		}
		
		fn_send_request();
		
	});
	
	//if click next ->change page num->refresh table
	
	$('next').addEvent('click', function () {
		
		var n = $('page_num').get('text').toInt();
		
		$('page_num').set('text',n + 1);
		$('prev').set('text','<< previous');

		fn_send_request();
	});

	//if select country->set page to 1->refresh table
	$('aj_countries').addEvent('change', function () {
		
		$('page_num').set('text',1);
		$('prev').set('text','');
		fn_send_request();
	});

	//if select country->set page to 1->refresh table
	$('aj_degrees').addEvent('change', function () {
		
		$('page_num').set('text',1);
		$('prev').set('text','');
		fn_send_request();
	});
	
	$('aj_focuses').addEvent('change', function () {
		
		$('page_num').set('text',1);
		$('prev').set('text','');
		fn_send_request();
	});

	$('textsearch').addEvent('submit', function () {
		event.stop();
		$('page_num').set('text',1);
		$('prev').set('text','');
		fn_send_request();
	});

	$('textsearch').addEvent('keydown', function(event){
		event = new Event(event);
		if (event.key == 'enter') {
			event.stop();
			$('page_num').set('text',1);
			$('prev').set('text','');
			fn_send_request();
		} 
	});
	
	//request function with 'chaining' so that we can have effect: slide out first, then request ajax.
	$('makeRequest').addEvent('click', function() {
		
		mySlide.hide();
		//$('aj_table').set('text', '');
		$('aj_load').setStyle('display', '');
		req.send();
	});

	/*---------------------------------------- FINAL THOUGHTS ---------------------------------------------*/

	//at page loading, load the table too
	$('makeRequest').fireEvent('click');

});