var MyTrips = null;

function MyTrip_Station(StnCode,StnName,Date)
{
    this.StnCode = StnCode;
    this.StnName = StnName;

    if (undefined == Date || Date == "")
        Date = $.datepicker.formatDate('dd-M-y', DateFromTo);
    this.Date = Date;
}

function MyTrip(TripName,CtlIDDetail,CtlIDBrief)
{
    this.TripName = TripName;
    this.Stations = [];
    this.CtlIDDetail = CtlIDDetail;
    this.CtlIDBrief = CtlIDBrief==undefined?null:CtlIDBrief;
}

MyTrip.prototype.Reset = function()
{
    this.Stations = [];
    this.NewStnCode = "";
    this.NewStnName=""
}

MyTrip.prototype.AddStation = function(StnCode, StnName, Date)
{
    this.Stations.push(new MyTrip_Station(StnCode, StnName, Date));
}

MyTrip.prototype.UpdateDate = function(Index, Date)
{
    this.Stations[Index].Date = Date;
    this.ShowStations();
}

MyTrip.prototype.GetQuery = function()
{
    var len = this.Stations.length;
    var str = "&Action=TripSave&Stations=" + len;
    for (var i = 0; i < len; i++)
    {
        var stn = this.Stations[i];
        str += "&Stn" + i + "=" + stn.StnCode + ":" + stn.StnName + ":" + stn.Date;
    }
    return str;
}

MyTrip.prototype.AddNewStation = function()
{
    if (this.NewStnCode == "")
    {
        alert("Please enter a station name");
        return false;
    }
    var Index = $("#Trip_StationAddIndex").val();

    var len = this.Stations.length;
    if (len > 1)
        this.Stations[len - 1].Date = this.Stations[len - 2].Date;

    this.Stations.splice(Index, 0, new MyTrip_Station(this.NewStnCode, this.NewStnName, ""));
    this.NewStnCode = "";
    this.ShowStations();
}

MyTrip.prototype.Remove = function(Index)
{
    this.Stations.splice(Index, 1);
    this.ShowStations();
    return false;
}

function MyTripShowDetailDialog()
{
    MyTrips.ShowStations();
    $("#divMyTripDetail").dialog('open');
    return false;
}

MyTrip.prototype.ShowStations = function()
{
    var str = "<table cellpadding='0' cellspacing='1' border='0' style='width:100%;background:#A6C9E2'><tr><th><th colspan=2>Station<th>Travel Date<th>Remove";
    var select = "", len = this.Stations.length;

    for (var i = 0; i < len; i++)
    {
        var stn = this.Stations[i];
        str += "<tr><td>" + (i + 1) + "<td>" + stn.StnName + "<td>" + stn.StnCode + "<td style='width:80px;'>";
        if (i < len - 1)
        {
            str += "<input  id='TripDate_" + i + "' name='TripDate' type='text' style='width:80px' value='" + stn.Date + "'/>";
        }
        str += "<td style='text-align:center'><a href='#' onclick='return MyTrips.Remove(" + i + ");'>X</a>";
        if (i < len - 1 && len >= 2)
            select += "<option value='" + (i + 1) + "'>" + stn.StnName;
    }

    str += "</table>";
    if (len > 0)
    {
        select += "<option selected value='" + len + "'>" + this.Stations[len - 1].StnName;
    }
    var str2 = "<table cellpadding='0' cellspacing='0' border='0'>";
    str2 += "<tr><td><input  id='Trip_NewStation' type='text' placeholder='Type New Station Code / Name' style='width:140px'/>";
    str2 += "<td><input type='button' value='Add Station'  style='width:90px;height:22px;' onclick='MyTrips.AddNewStation()' />";
    str2 += "<td>After";
    str2 += "<td><select id='Trip_StationAddIndex'>" + select + "</select>";
    str2 += "</table><br/>";
    str = str2 + str;

    $("#" + this.CtlIDDetail).html(str);

    $("input[name='TripDate']").datepicker({ dateFormat: 'dd-M-y' });
    //$("#Trip_NewStation").watermark();   
    $('#Trip_NewStation').autocomplete({ maxHeight: 400, width: 300, onSelect: function(value, data)
    {
        $("#Trip_NewStation").val(value);
        MyTrips.NewStnCode = data;
        MyTrips.NewStnName = value;
    }
    });

    $("input[name='TripDate']").bind("change", function(e)
    {
        try
        {
            //$.datepicker.parseDate('dd-M-y', $(this).val());
            MyTrips.UpdateDate($(this)[0].id.replace("TripDate_", ""), $(this).val());
        }
        catch (e)
        {
            //alert(e);
            $(this).focus();
        }
    });

    $('#Trip_NewStation').focus();

    this.ShowStationsBrief();

    return str;
}

MyTrip.prototype.ShowStationsBrief = function()
{
    if (!this.CtlIDBrief)
        return;

    var str21 = "<span style='font-size:16px;color:#FF0000'>&nbsp;&raquo;&nbsp;</span>";
    var str = "<table cellpadding='0' cellspacing='0' border='0' style='width:100%;'>";
    str += "<tr><td colspan=2><select style='width:200px'><option>" + this.TripName + "</select>";
    var len = this.Stations.length;

    for (var i = 0; i < len - 1; i++)
    {
        var stn1 = this.Stations[i], stn2 = this.Stations[i + 1];

        str += "<tr><td><a href='#' title='Click here to view trains between " + stn1.StnName + " and " + stn2.StnName +
           "' onclick=\"return ShowTrains('" + stn1.StnCode + "','" + stn1.StnName + "','" + stn2.StnCode + "','" + stn2.StnName + "','" + this.Stations[i].Date + "')\">" +
           "<div style='width:160px;white-space:nowrap;overflow:hidden;' >" + stn1.StnName + str21 + stn2.StnName + "</span></a><td>" + this.Stations[i].Date;
    }
    //str += "<tr style='height:30px'><td style='border-top:solid #A6C9E2 1px;' ><a href='#' onclick='MyTripShowDetailDialog();'>Edit My Trip&nbsp;&nbsp;</a><td  style='border-top:solid #A6C9E2 1px;'><a href='#'>ShowMap</a>";
    str += "<tr style='height:30px'><td style='border-top:solid #A6C9E2 1px;' ><a href='#' onclick='MyTripShowDetailDialog();'>Edit My Trip&nbsp;&nbsp;</a><td  style='border-top:solid #A6C9E2 1px;'><a href='#'></a>";
    str += "</table>";

    $("#" + this.CtlIDBrief).html(str);
}