// Mark Brettin
//
// Using AJAX : image_slider.js 
//
//


var thumbList = Array();
var imageList = Array();
var myImages = Array();
var imagesPerSlider = 5;
var first = 0;
var last = imagesPerSlider -1;
var baseURL = "http://www.seaxp.com";


function getXmlHttpObject()
{
    var xmlHttp = null;

    // Firefox, Opera 8.0+, Safari
    try { xmlHttp = new XMLHttpRequest(); }
    catch(e)
    {
        // Internet Explorer
        try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); }
        catch(e)
        {
            try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }
            catch(e)
            {
                alert("Your browser does not support AJAX!");
                displaySlider();
                return(null);
            }
        }
    }

    return(xmlHttp);
}


function getImages()
{
    document.getElementById('slider').innerHTML = "<b>Image Slider Loading...</b>";

    var xmlHttp = getXmlHttpObject();

    if(xmlHttp)
    {
        xmlHttp.onreadystatechange = function()
	{
            var msg = "xmlHttp.readyState = ";

            switch(xmlHttp.readyState)
            {
                case 0: 
    	            msg = msg + xmlHttp.readyState + " : request is not initialized";
                    //alert(msg);
                    break;
                case 1:
	            msg = msg + xmlHttp.readyState + " : request has been set up";
                    //alert(msg);
                    break;
                case 2:
	            msg = msg + xmlHttp.readyState + " : request has been sent";
                    //alert(msg);
                    break;
                case 3:
	            msg = msg + xmlHttp.readyState + " : request is in process";
                    //alert(msg);
                    break;
                case 4:
	            msg = msg + xmlHttp.readyState + " : request is complete";
		    //alert(msg);
                    //alert("response: " + xmlHttp.responseText);
	            res = xmlHttp.responseText;
                    if(res != null)
                    {
                        var resArray = res.split("|");
                        for(var i = 0; i < resArray.length; i++)
                        {
                            if(((i % 2) == 0) || (i == 0)) 
                            {
                                if(resArray[i] != null && resArray[i].length > 0)
                                {
                                    imageList.push(resArray[i]); 
                                    //alert("imageList.push(\"" + resArray[i] + "\")"); 
				}
                            }
                            else
                            {
                                if(resArray[i] != null && resArray[i].length > 0)
                                {
                                    thumbList.push(resArray[i]); 
                                    //alert("thumbList.push(\"" + resArray[i] + "\")");
				}
			    }
			}
		    }

                    myImages = loadImages(thumbList);
	   	    displaySlider();
                    break;
                default:
                    msg = msg + xmlHttp.readyState + " : Unknown state";
                    //alert(msg);
                    break;
            }
	}

        // Open up the request.
        try
        {
            // When doing cross-domain requests we need to set the below and also in
            // Firefox about:config set 'signed.applets.codebase_principal_support' to true.
            // 
            //netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
            //netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); 
            xmlHttp.open("GET", "cgi-bin/getImages.php", true);
        }
        catch(e)
        {
            alert("Call to method XMLHttpRequest.open() failed.");
            return(null);
        }

        // Send the request off to the server.
        xmlHttp.send(null);
    }
}


function loadImages(the_imageList)
{
    var images = new Array;

    for(var i = 0; i < the_imageList.length; i++)
    { 
        images[i] = new Image();
        images[i].src = the_imageList[i];
    }

    return(images);
}


function displayNoSlider()
{
    var str  = "<table border=\"3\" cellpadding=\"4\" cellspacing=\"0\" ";
        str += "class=\"border\" bordercolor=\"#0000ff\" width=\"370\">";
        str += "<tr>";
        str += "<td align=\"center\">";
	str += "<font color=\"#000080\" class=\"myfont3\"><b>Private Charters Available!</b></font>";
        str += "<br/><br/>";

        str += "<a class=\"mylink\" href=\"departures.html\"><font class=\"myfont2\"><b>";
        str += "SCUBA Diving Daily Departures at 8:30am</b></font></a>";
        str += "<br/><br/>";

        str += "<a class=\"mylink\" href=\"departures.html\"><font class=\"myfont2\"><b>";
        str += "Snorkeling Daily Departures at 10:15am &amp; 2:15pm</b></font></a>";
        str += "</td>";
        str += "</tr>";
        str += "</table>";

    return(str);
}

function displaySlider()
{
    var str;

    if(myImages != null && myImages.length > 0)
    {
        var imageURL;
        var j = 0;

        str  = "<table border=\"0\" width=\"650\" style=\"border-collapse: collapse;\" ";
        str += "cellpadding=\"0\" cellspacing=\"0\">";
        str += "<tr>";
        str += "<td valign=\"middle\" align=\"right\">";
        str += "<img src=\"images/arrow_blue_left.jpg\" ";
        str += "onMouseOver=\"this.src='images/arrow_red_left.jpg'; this.style.cursor='pointer';\" ";
        str += "onMouseOut=\"this.src='images/arrow_blue_left.jpg';\" ";
        str += "onMouseUp=\"slideBackward(); \"></td>";
        str += "<td align=\"center\" width=\"550\" style=\"height: 75px;\">";

        for(var i = first; i <= last; i++)
        {
	    imageURL = baseURL + imageList[i];
            str += "<a id=\"anchor" + j + "\" href=\"" + imageURL + "\" target=\"_blank\">";
            str += "<img id=\"image" + j + "\" src=\"" + myImages[i].src + "\" border=\"3\" ";
            str += "width=\"100\" height=\"75\" style=\"border-color: #000000;\" ";
            str += "onMouseOver=\"this.style.borderColor='#ffff00'; this.style.height=75; this.style.width=100;\" ";
            str += "onMouseOut=\"this.style.borderColor='#000000';  this.style.height=75; this.style.width=100;\" /></a>";
            j++;
        }

        str += "</td>";
        str += "<td valign=\"middle\" align=\"left\"><img src=\"images/arrow_blue_right.jpg\" ";
        str += "onMouseOver=\"this.src='images/arrow_red_right.jpg'; this.style.cursor='pointer';\" ";
        str += "onMouseOut=\"this.src='images/arrow_blue_right.jpg';\" ";
        str += "onMouseUp=\"slideForeward(); \">";
        str += "</td></tr>";
        str += "</table>";

        //alert("str = " + str);
        //str += "<br><br>first = " + first + "<br>last = " + last + "<br>total images = " + myImages.length;
    }
    else { str = displayNoSlider(); }

    document.getElementById("slider").innerHTML = str;
}


function updateSlider()
{
    if(myImages != null && myImages.length > 0)
    {
        var id;
        var j = 0;
        for(var i = first; i <= last; i++)
        {
            id = "anchor" + j;
            document.getElementById(id).href = baseURL + imageList[i];

            id = "image" + j;
            document.getElementById(id).src = myImages[i].src;
            j++;
        }
    }
}


function slideForeward()
{
    if((first + 1) < myImages.length) first += 1;

    last = first + imagesPerSlider -1;

    if(last >= myImages.length)
    {
        last = myImages.length -1;
        first = last - imagesPerSlider +1;
    }

    updateSlider();
}


function slideBackward()
{
    first -= 1;

    if(first < 0) first = 0;

    last = first + imagesPerSlider -1;

    updateSlider();
}