var READY_STATE_COMPLETE=4;
var req=null;
var schedule=null;
var destination = '';
var Images = null;
var pictures=null;
var getRequest = false;
var contentName = 'info_div';
var Picts = ['img000','img001','img002','img003','img004','img005','img006','img007','img008','img009','img010',
             'img011','img012','img013','img014','img015','img016','img017','img018','img019','img020','img021',
             'img022','img023','img024','img025','img026','img027','img028','img029','img030','img031','img032',
             'img033','img034','img035','img036','img037','img038','img039','img040','img041','img042','img043',
             'img044','img045','img046','img047','img048','img049','img050','img051','img052','img053','img054',
             'img055','img056','img057','img058','img059','img060','img061','img062','img063','img064','img065',
             'img066'];
var PictLength = Picts.length;
var currentImage = 0;

//this is Dima:
var iCount = 0;

function Assigne(){
	
	//var sch2 = document.getElementById('sch2');
	//    sch2.style.color = '#3c68a6';
	//    sch2.style.textDecoration = 'underline';
	//    sch2.style.cursor = 'pointer';
	//    sch2.onclick = sendRequest;
	
	var sch1 = document.getElementById('schedule');
	    sch1.style.cursor = 'pointer';
	    sch1.onclick = sendRequest;
 
	if (!Images ){
		initImages();
		var picts = document.getElementById('pictures');
		    picts.style.cursor = 'pointer';
		    picts.onclick = showPictures;
	}
}
function sendRequest(e) {
    iCount = iCount + 1;
	var request = 'cgi-bin/ski';
	url = request;
	loadXMLDoc();
	
	
}
function loadXMLDoc() {
    
    try {

            if (window.XMLHttpRequest) {
                //this is object for IE, Mozila
                req = new XMLHttpRequest();
                
            } else if (window.ActiveXObject) {
                //this is object for IE if one above failed (old browsers)
                req = new ActiveXObject("Microsoft.XMLHTTP");
            }
            
            // initiate server request
            try {
                req.open("GET", url, true);
                req.onreadystatechange = processReqChange;
	            req.setRequestHeader("Content-Type","application/xml");
                req.send(null);
            } catch(e) {
                // display an error in case of failure to process the request
                alert("Can't connect to server:\n" + e.toString());
            }
            
	} catch(e) {
        alert("Unable to create an XMLHttpRequest object:\n" + e.toString());
	}
	
}

// function executed when the state of the request changes
function processReqChange(){

	// continue if the process is completed
    if (req.readyState == 4) {
    
        // continue only if HTTP status is "OK"
        if (req.status == 200) {

            var data = null;    
			    data = req.responseXML;
			    
			    schedule = new Array();
			
			var root = data.getElementsByTagName("schedule")[0];
			
			//alert(req.responseText);
			
			schedule.record = root.getElementsByTagName("record");
			schedule.dest = root.getElementsByTagName("destination");
			getRequest = true;

			createTable();    
    
        } else {
            if (req.status == 500) {
                alert("Internal server error (Code = 500);");
            } else {
                alert("Server Error Status Code: " + req.status);
            }
        }
    }

}



function changeDisplay(holder){
	var holders = ['info_div','schedule_div','pictureHolder'];
	var visible = (holder == 'pictureHolder') ? 'hidden' : 'visible';
	document.getElementById('pictures').style.visibility = visible;
	contentName = holder;
	for (var i=0;i<holders.length;i++){
		if (holder == holders[i]){
			document.getElementById(holders[i]).style.display = 'block';
		}
		else{
			document.getElementById(holders[i]).style.display = 'none';
		}
	}
}
function createTable(){
        
	var content = document.getElementById('content');
	content.style.background = "#b3cef2";
	var schedule_div = document.getElementById('schedule_div');
	
	if (getRequest){
		if (contentName != 'schedule_div'){
			changeDisplay('schedule_div');
		}
		getRequest = false;
		schedule_div.innerHTML = '';
		
		// I need to create line to display entire XML:
		//var test = document.createElement('div');
		//    test.innerHTML = '<span class="test">' +  req.responseText + '</span>';
		//    test.id = 'test';
		//        schedule_div.appendChild(test);
		
		var banner = document.createElement('div');
		    banner.innerHTML = '<span class="red">S</span>chedule';
		    banner.id = 'schedule_title';
		        schedule_div.appendChild(banner);

		var head = document.createElement('div');
		    head.style.height = '22px';
		    head.style.background = '#5c8aca';
		    head.style.marginTop = '6px';
		    
		var t = document.createElement('table');
		    t.className = 'header_tline';
		    
		var tb = document.createElement('tbody');
		var trt = document.createElement('tr');

		var td11 = document.createElement('td');
		    td11.innerHTML = 'Destination';
		    td11.className = 'td1';
		        trt.appendChild(td11);

		td11 = document.createElement('td');
		td11.innerHTML = 'Date';
		td11.className = 'td2';
		trt.appendChild(td11);

		td11 = document.createElement('td');
		td11.innerHTML = 'WeekDay';
		td11.className = 'td3';
		trt.appendChild(td11);

		td11 = document.createElement('td');
		td11.innerHTML = 'Price';
		trt.appendChild(td11);

		tb.appendChild(trt);
		t.appendChild(tb);
		head.appendChild(t);
		schedule_div.appendChild(head);
		
		var t_w = document.createElement('div');
		t_w.id = 'table_wrapper';
		var table = document.createElement('table');
		table.style.background = "#FFF";

		var tbody = document.createElement('tbody');
		var class_date = '';
		var className = 'b'; 


		for ( var i=0; i<schedule.record.length; i++ ) {
			var rec = schedule.record[i];
			var destin = rec.getElementsByTagName('dest')[0].firstChild.nodeValue;
			if ( destination && destination != 'All Destinations' && destin != destination ) continue; 
			var text1 = document.createTextNode(destin);
			var tr = document.createElement('tr');
			var td1 = document.createElement('td');
			td1.appendChild(text1);
			td1.style.width = "222px";
			tr.appendChild(td1);
		
			var td2 = document.createElement('td');
			var dd = rec.getElementsByTagName('date')[0].firstChild.nodeValue;
			var text2 = document.createTextNode(dd);
			if ( dd != class_date ) {
				class_date = dd;
				className = (className == 'b') ? 'a' : 'b';
				tr.className = className;
			}
			else {
				tr.className = className;
			}
			td2.appendChild(text2);
			td2.style.width = "119px";
			tr.appendChild(td2);

			var td3 = document.createElement('td');
			var wd = rec.getElementsByTagName('wday')[0].firstChild.nodeValue;
			var text3 = document.createTextNode(wd);
			td3.appendChild(text3);
			td3.style.width = "59px";
			tr.appendChild(td3);

			var td4 = document.createElement('td');
			var text4 = document.createTextNode(rec.getElementsByTagName('price')[0].firstChild.nodeValue);
			td4.appendChild(text4);
			tr.appendChild(td4);
			tbody.appendChild(tr);
		}
		table.appendChild(tbody);
		t_w.appendChild(table);
		schedule_div.appendChild(t_w);
		createDestSelect(schedule_div);
	}
	else{
		changeDisplay('schedule_div');
	}
	var sch = document.getElementById('schedule');
	sch.innerHTML = 'Info';
	sch.onclick = getInfo;
}
function getInfo(){
	changeDisplay('info_div');
	var ch = document.getElementById('schedule');
	ch.innerHTML = 'Schedule';
	ch.onclick = schedule ? createTable : sendRequest;
	var ch2 = document.getElementById('sch2');
	ch2.onclick = schedule ? createTable : sendRequest;
	document.getElementById('content').style.background = "#b3cef2";
}
function createDestSelect(content){
    var str = "";
	var dests = schedule.dest;
	var div = document.createElement('div');
	    div.id  = 'destinations';
	
	var span = document.createElement('span');
	    span.id = 'dest_title';
	    span.innerHTML = 'Destinations:';
	    div.appendChild(span);
	
	var select = document.createElement('select');
	var all = document.createElement('option');
	    all.text = 'All Destinations'; 
	    all.value = 'All Destinations';
	    
	    select.options.add(all);
	    
	    for ( var i=0; i < dests.length; i++ ) {
		    var d = dests[i];
		    var v = d.getElementsByTagName('name')[0].firstChild.nodeValue;
		    var option = document.createElement('option');
    		    option.text = v;
	    	    option.value = v;
	    	    str = str + v + ";";
	    	    
		        select.options.add(option);
		        
    		    if ( destination && v == destination ) {
	    		    option.selected = true;
		        }
	    }
	    select.onchange = getDestination;
	    div.appendChild(select);
	    
	    
	span = document.createElement('span');
	span.innerHTML = 'For Reservation Call: <span class="red">1 (917) 400-1430</span>';
	div.appendChild(span);
	span = document.createElement('span');
	span.innerHTML = '<a href="#" id="get_info" onclick="getInfo()">Info</a>';
	div.appendChild(span);
	content.appendChild(div);
	
	//alert(dests.length);
}
function getDestination(e){
	destination = this.options[this.selectedIndex].text;
	getRequest = true;
	createTable();
}
function initImages(){
	
	Images = new Array();
	for (var i=0;i<Picts.length;i++ ){
		var im = new Image;
		im.src = 'images/'+Picts[i]+'.jpg';
		im.id = i;
		Images[i] = im;
	}
}
function showPictures(){
	var div = document.getElementById('pictureHolder');
	document.getElementById('content').style.background = '#5c8aca';
	//content.style.background = "#b3cef2";
	if (contentName != 'pictureHolder'){
		changeDisplay('pictureHolder');
	}
	
	if (!div.innerHTML){
		var arrowl = document.createElement('div');
		arrowl.id = 'prev_button';
		arrowl.onclick = prevPicture;
		div.appendChild(arrowl);
		var arrowr = document.createElement('div');
		arrowr.id = 'next_button';
		arrowr.onclick = nextPicture;
		div.appendChild(arrowr);

		div.style.textAlign = 'center';
		var img = document.createElement('img');
		img.src = Images[0].src;
		img.setAttribute('width','440px');
		img.setAttribute('id','imageHolder');
		img.style.border = '3px groove lightblue';
		div.appendChild(img);
	}
}
function nextPicture(e){
	currentImage++;
	if (currentImage == PictLength){currentImage = 0;}
	changeImage();
}
function prevPicture(e){
	--currentImage;
	if (currentImage < 0){currentImage = parseInt(PictLength)-1;}
	changeImage();
}
function changeImage(){
	var img = document.getElementById('imageHolder');
	img.src = Images[currentImage].src;
}