// returns the script element matching the current script's name (based on params[:action])
function selfLocate() {
  var scriptName = "widget_medium_two",
      hostName = "www.ridecharge.com",
      scripts = document.getElementsByTagName("script"),
      script,
      src;
  
  for(i = 0, j = scripts.length; i < j; ++i) {
    script = scripts[i];
    src = script.getAttribute("src");
    if(src && (src.indexOf(scriptName) != -1) && (src.indexOf(hostName) != -1) )
      return script;
  }
  return false;
}

// inserts markup before some element, first wrapping it in a div
function injectBefore(origNode, content) {
  var parent = origNode.parentNode,
      wrapper = document.createElement("div");
  wrapper.innerHTML = content;
  parent.insertBefore(wrapper, origNode);
  return wrapper;
}

function emptyElement(elem) {
  while(elem.firstChild)
    elem.removeChild(elem.firstChild);
}

function replaceText(elem, txt) {
  txt = document.createTextNode(txt);
  emptyElement(elem);
  elem.appendChild(txt);
}
function addEvent(elem, evt, func, bind) {
  if(bind) {
    var oldFunc = func;
    func = function() {
      oldFunc.apply(bind, Array.prototype.slice.call(arguments));
    };
  }
  if(elem.addEventListener)
    elem.addEventListener(evt, func, false);
  else if(elem.attachEvent)
    elem.attachEvent("on" + evt, func);
}

function delegateListener(elem, childTagName, evt, func, bind) {
  
}

function preventEventDefault(evt) {
  if(evt.preventDefault)
    evt.preventDefault();
  else
    evt.returnValue = false;
}

function getTarget(evt) {
  return (evt.target) ? evt.target : window.event.srcElement;
}
function clickIsWithin(elem, container) {
  if(elem == container)
    return true;
  var parent, success = false;
  while(elem.parentNode) {
    elem = elem.parentNode;
    if(elem == container)
      return true;
  }
  return false;
}
// !!!depends on events partial!!!

function DateMgr(field) {
  // set field to today's date
  this.d = new Date;
  this.now = new Date;
  this.massageDate();
  this.field = field;
  this.addIcon();
  this.addCalendar();
  this.setupMonth();
}

DateMgr.prototype = {
  calendarDayBGColor: "white",
  calendarSelectedDayBGColor: "#ccc",
  // ensure date's minutes are multiple of 5, always round up
  massageDate: function() {
    var minutes = this.d.getMinutes(),
        diff;
    if(! ((minutes % 5) == 0)) {
      diff = minutes % 5;
      minutes = minutes + 5 - diff;
      this.d.setMinutes(minutes);
    }
  },
  // add icon beside field, make clickable
  addIcon: function() {
    var fieldRow = this.field.parentNode,
        link = document.createElement("a"),
        img = document.createElement("img");
    
    img.src = "http://www.gocurb.com/stylesheets/images/calendar_icon.gif";
    img.style.border = "none";
    img.style.position = "relative";
    img.style.top = "0px";
    img.style.left = "0px";

    link.href="#";
    link.style.position = "absolute";
    link.style.left = "25px";
    this.link = link;
    this.icon = img;
    
    fieldRow.insertBefore(link, this.field);
    this.field.previousSibling.appendChild(img);
    addEvent(img, "click", this.showCalendar, this);
  },
  // add calendar element (initially hidden) beside field
  addCalendar: function() {
    this.calendar = document.createElement("div");
    var fieldRow = this.field.parentNode,
        cal = this.calendar,
        s = cal.style,
        tables,
        navLinks,
        selectBoxes;
        
    s.display = "none";
    s.position = "absolute";
    s.left = (parseInt(this.link.style.left, 10) + 20) + "px";
    s.width = "260px";
    s.zIndex = "5000";
    
    cal.innerHTML = "<div style=\"padding:0;margin:0;width:auto;border:1px solid #ccc;-moz-border-radius:0px 5px 5px 5px;-webkit-border:0px 5px 5px 5px;-khtml-border:0px 5px 5px 5px;border-radius:0px 5px 5px 5px;background:white;\">\n  <table style=\"font-size:13px;\" border=\"0\" cellspacing=\"5\" cellpadding=\"5\" width=\"100%\">\n    <tbody>\n      <tr>\n        <td><a style=\"display:block;\" href=\"#\">&lt;<\/a><\/td>\n        <td style=\"text-align:center;\">Month<\/td>\n        <td style=\"text-align:right;\"><a style=\"display:block;\" href=\"#\">&gt;<\/a><\/td>\n      <\/tr>\n    <\/tbody>\n  <\/table>\n\n  <table style=\"font-size:11px;\" border=\"0\" cellspacing=\"5\" cellpadding=\"5\" width=\"100%\">\n    <thead>\n      <tr>\n        <th style=\"text-align:center;\">Sun<\/th>\n        <th style=\"text-align:center;\">Mon<\/th>\n        <th style=\"text-align:center;\">Tue<\/th>\n        <th style=\"text-align:center;\">Wed<\/th>\n        <th style=\"text-align:center;\">Thu<\/th>\n        <th style=\"text-align:center;\">Fri<\/th>\n        <th style=\"text-align:center;\">Sat<\/th>\n      <\/tr>\n    <\/thead>\n    <tbody>\n    <\/tbody>\n  <\/table>\n\n  <table style=\"font-size:11px;\" border=\"0\" cellspacing=\"5\" cellpadding=\"5\" width=\"100%\">\n    <tbody>\n      <tr>\n        <td valign=\"middle\">\n          Hour:\n          <select style=\"\">\n            <option value=\"0\">12 (AM)<\/option>\n<option value=\"1\">1 (AM)<\/option>\n<option value=\"2\">2 (AM)<\/option>\n<option value=\"3\">3 (AM)<\/option>\n<option value=\"4\">4 (AM)<\/option>\n<option value=\"5\">5 (AM)<\/option>\n<option value=\"6\">6 (AM)<\/option>\n<option value=\"7\">7 (AM)<\/option>\n<option value=\"8\">8 (AM)<\/option>\n<option value=\"9\">9 (AM)<\/option>\n<option value=\"10\">10 (AM)<\/option>\n<option value=\"11\">11 (AM)<\/option>\n<option value=\"12\">12 (PM)<\/option>\n<option value=\"13\">1 (PM)<\/option>\n<option value=\"14\">2 (PM)<\/option>\n<option value=\"15\">3 (PM)<\/option>\n<option value=\"16\">4 (PM)<\/option>\n<option value=\"17\">5 (PM)<\/option>\n<option value=\"18\">6 (PM)<\/option>\n<option value=\"19\">7 (PM)<\/option>\n<option value=\"20\">8 (PM)<\/option>\n<option value=\"21\">9 (PM)<\/option>\n<option value=\"22\">10 (PM)<\/option>\n<option value=\"23\">11 (PM)<\/option>\n          <\/select>\n        <\/td>\n        <td valign=\"middle\">\n          Minutes:\n          <select style=\"\">\n            <option value=\"0\">00<\/option>\n<option value=\"5\">05<\/option>\n<option value=\"10\">10<\/option>\n<option value=\"15\">15<\/option>\n<option value=\"20\">20<\/option>\n<option value=\"25\">25<\/option>\n<option value=\"30\">30<\/option>\n<option value=\"35\">35<\/option>\n<option value=\"40\">40<\/option>\n<option value=\"45\">45<\/option>\n<option value=\"50\">50<\/option>\n<option value=\"55\">55<\/option>\n          <\/select>\n        <\/td>\n      <\/tr>\n      <tr>\n        <td>&nbsp;<\/td>\n        <td align=\"right\"><input style=\"\" type=\"button\" value=\"OK\"><\/td>\n      <\/tr>\n    <\/tbody>\n  <\/table>\n<\/div>";
    
    tables = cal.getElementsByTagName("table");

    navLinks = tables[0].getElementsByTagName("a");
    addEvent(navLinks[0], "click", this.prevMonth, this);
    addEvent(navLinks[1], "click", this.nextMonth, this);

    selectBoxes = tables[2].getElementsByTagName("select");
    this.hoursBox = selectBoxes[0];
    addEvent(this.hoursBox, "change", this.setHour, this);
    this.minutesBox = selectBoxes[1];
    addEvent(this.minutesBox, "change", this.setMinutes, this);
    
    this.okButton = tables[2].getElementsByTagName("input")[0];
    addEvent(this.okButton, "click", this.hideCalendar, this);
    
    this.calendarMonth = tables[0].getElementsByTagName("td")[1];
    this.calendarTable = tables[1].getElementsByTagName("tbody")[0];
    
    addEvent(document.body, "click", this.handleClick, this);
    fieldRow.insertBefore(cal, this.field);
  },
  // set the field with some date, if nothing passed in set to today's date
  updateField: function() {
    this.field.value = this.format();
  },
  // format a date string for display in a text field. Example: 6/9/2010 at 12:15PM
  format: function() {
    var o = this.humanReadableObject();
    return o.month + "/" + o.day + "/" + o.year + " at " + o.hours + ":" + o.minutes + o.meridian;
  },
  humanReadableObject: function() {
    var d = this.d,
        o = {
      day: d.getDate(),
      month: d.getMonth() + 1,
      year: d.getFullYear(),
      machineHours: d.getHours(),
      machineMinutes: d.getMinutes(),
      meridian: (d.getHours() >= 12) ? "PM" : "AM"
    };
    o.hours = (o.machineHours > 12) ? (o.machineHours - 12) : ((o.machineHours == 0) ? 12 : o.machineHours);
    o.minutes = (o.machineMinutes.toString().length == 2) ? o.machineMinutes : "0" + o.machineMinutes;
    return o;
  },
  // set up a month's data based on date entered in the field
  setupMonth: function() {
    this.month = this.d.getMonth();
    this.year = this.d.getFullYear();
    this.updateCalendar();
  },
  // set calendar's current month
  prevMonth: function(evt) {
    this.month -= 1;
    if(this.month < 0) {
      this.year -= 1;
      this.month = 11;
    }
    this.setD();
    this.updateCalendar();
    preventEventDefault(evt);
  },
  nextMonth: function(evt) {
    this.month += 1;
    if(this.month > 11) {
      this.year += 1;
      this.month = 0;
    }
    this.setD();
    this.updateCalendar();
    preventEventDefault(evt);
  },
  setDay: function(day) {
    this.d.setDate(day);
    this.updateField();
  },
  // called when user chooses hour or sets meridian via time picker
  setHour: function(evt) {
    var selectBox = getTarget(evt);
    this.d.setHours(selectBox.value);
    this.updateField();
  },
  setMinutes: function(evt) {
    var selectBox = getTarget(evt);
    this.d.setMinutes(selectBox.value);
    this.updateField();
  },
  // sets the running date object accordingly
  setD: function() {
    this.d.setMonth(this.month);
    this.d.setFullYear(this.year);
      
    this.updateField();
  },
  // update all markup for a given month
  updateCalendar: function() {
    var tempDate = new Date(this.d.valueOf()),
        day,
        daysInMonth = 31,
        calTable = this.calendarTable,
        dayOfWeek,
        weekRow,
        i,
        elem,
        monthStr = this.monthName() + " " + this.year;
    replaceText(this.calendarMonth, monthStr);
    emptyElement(calTable);
    
    // start rows
    weekRow = calTable.appendChild(document.createElement("tr"))
    // also update this.calendarTable with buildup of days
    for(day = 1; day <= daysInMonth; day++) {
      tempDate.setDate(day);
      if(tempDate.getMonth() == this.d.getMonth()) {
        dayOfWeek = tempDate.getDay();
        // beginning of week
        if(dayOfWeek == 0 && day != 1)
          weekRow = calTable.appendChild(document.createElement("tr"));

        // if first day of month, might need empty spaces
        if(tempDate.getDate() == 1) {
          for(i = 0; i < dayOfWeek; i++) {
            elem = weekRow.appendChild(document.createElement("td"));
            replaceText(elem, " ");
          }
        }

        elem = weekRow.appendChild(document.createElement("td"));
        elem = elem.appendChild(document.createElement("a"));
        elem.href ="#";
        replaceText(elem, tempDate.getDate());
        elem.style.display = "block";
        elem.style.color = "#096EA2";
        elem.style.textIndent = "6px";

        if(day == this.d.getDate()) {
          this.setSelectedDay(elem);
        }
        else
          elem.style.backgroundColor = this.calendarDayBGColor;
      }
    }
    
    this.massageDate();
    // update time picker
    this.hoursBox.value = this.d.getHours();
    this.minutesBox.value = this.d.getMinutes();
  },
  monthName: function() {
    var names = ["January",
                  "February",
                  "March",
                  "April",
                  "May",
                  "June",
                  "July",
                  "August",
                  "September",
                  "October",
                  "November",
                  "December"
                ];
    return names[this.month];
  },
  // show and hide calendar
  showCalendar: function(evt) {
    this.calendar.style.display = "block";
    this.calendarShowing = true;
    preventEventDefault(evt);
  },
  handleClick: function(evt) {
    if(this.calendarShowing) {
      if(evt) {
        var target = getTarget(evt);
        if(target == this.icon)
          return;
        
        else if(clickIsWithin(target, this.calendarTable)) {
          if(target.tagName.toLowerCase() == "a")
            return this.handleDayClick(evt);
        }
        
        else if(!clickIsWithin(target, this.calendar)) {
          this.hideCalendar();
        }
      }
    }
  },
  hideCalendar: function(evt) {
    if(this.calendarShowing && this.calendar.style.display == "block") {
      this.calendar.style.display = "none";
      this.calendarShowing = false;
    }
  },
  // handle click of day
  handleDayClick: function(evt) {
    var elem = getTarget(evt);
    if(this.d.getMonth() > this.now.getMonth() || elem.innerHTML >= this.now.getDate() || this.d.getYear() > this.now.getYear()) {
      this.setDay(elem.innerHTML);
      this.setSelectedDay(elem);
    }
    preventEventDefault(evt);
  },
  setSelectedDay: function(elem) {
    if(this.oldDayElement)
      this.oldDayElement.style.backgroundColor = this.calendarDayBGColor;
    this.oldDayElement = elem;
    elem.style.backgroundColor = this.calendarSelectedDayBGColor;
  }
};


var thisScript = selfLocate();
  
if(thisScript) {
  var markup = "<div style=\"padding:0;margin:0;width:auto;font-family:sans-serif;font-size:11px;color:black;text-align:left;border:1px solid #ccc;-moz-border-radius:10px;-webkit-border-radius:10px;-khtml-border-radius:10px;border-radius:10px;background:url(http://www.ridecharge.com/images/design/widgets/widget_tile.png) no-repeat;width:260px;background-color:#E0E0E0;background-repeat:repeat-x;text-align:center;position:relative;\">\n  <div style=\"\">\n    <div style=\"\">\n      <div style=\"padding;\">\n        <p style=\"padding:0;margin:0;width:auto;display:block;float:left;text-indent: -50000px;background:url(http://www.ridecharge.com/images/design/widgets/tmlogo_medium.png) no-repeat;display:inline;width:100px;height:34px;margin:10px;\">Curb<\/p>\n  <p style=\"padding:0;margin:0;width:auto;display:block;float:left;text-indent: -50000px;background:url(http://www.ridecharge.com/images/design/widgets/2freetext.png) no-repeat;width:120px;height:45px;margin:10px 0 10px 5px;\">2 FREE AND EASY ways to book a taxi.<\/p>\n\n<p style=\"padding:0;margin:0;width:auto;font-family:sans-serif;font-size:11px;color:black;text-align:left;font-weight:bold;display:block;clear:both;margin:15px 0 0 10px;font-size:12px\">1: Book online right here<\/p>\n\n<div style=\"border:1px solid #ccc;-moz-border-radius:7px;-webkit-border-radius:7px;-khtml-border-radius:7px;border-radius:7px;width:240px;margin:5px auto;background-color:#EFEFEF;text-align:left;position:relative;z-index:2000;\">\n  <div style=\"\">\n    <div style=\"\">\n      <div style=\"\">\n        <form style=\"margin:0;padding:0;\" action=\"https://www.ridecharge.com/s/mn-minneapolis/taxi/branded/suburban_taxi\" method=\"post\">\n          <div style=\"margin:5px 0;\">\n            <span style=\"padding:0;margin:0;width:auto;font-family:sans-serif;font-size:11px;color:black;text-align:left;font-weight:bold;margin-left:5px;\">When:<\/span>\n            <input type=\"radio\" id=\"taxiMagicNow\" value=\"now\" checked=\"checked\" name=\"when\"/> <label for=\"taxiMagicNow\">Now<\/label>\n            <input type=\"radio\" id=\"taxiMagicLater\" value=\"later\" name=\"when\"/> <label for=\"taxiMagicLater\">Later<\/label>\n          <\/div>\n          <div style=\"position:relative;z-index:2000;\">\n            <input style=\"padding:0;margin:0;width:auto;border:1px solid #ccc;width:185px;text-indent:4px;height:2em;line-height:2em;font-size:10px;margin-left:45px;\" type=\"text\" value=\"\" id=\"taxiMagicDate\" name=\"pickup_time\"/>\n          <\/div>\n          <div style=\"margin:5px 0;\">\n            <label for=\"taxiMagicAddress\" style=\"padding:0;margin:0;width:auto;font-family:sans-serif;font-size:11px;color:black;text-align:left;font-weight:bold;margin-left:5px;\">Where:<\/label> <input style=\"padding:0;margin:0;width:auto;border:1px solid #ccc;width:185px;text-indent:4px;height:2em;line-height:2em;font-size:10px;color:#999;width:140px;\" type=\"text\" id=\"taxiMagicAddress\" name=\"pickup_location\" value=\"Address or Business\"/>\n            <div style=\"\">\n              <p style=\"padding:0;margin:0;width:auto;font-family:sans-serif;font-size:11px;color:black;text-align:left;margin:5px 0 0 45px;font-style:italic;\">Examples:<\/p>\n              <ul style=\"padding:0;margin:0;width:auto;list-style:disc outside;text-align:left;margin:5px 5px 0 60px;\">\n                  <li style=\"padding:0;margin:0;width:auto;padding:0;background:none;display:list-item;font-size:10px;margin-top:3px;\">1060 W Addison #250 Chicago IL<\/li>\n                  <li style=\"padding:0;margin:0;width:auto;padding:0;background:none;display:list-item;font-size:10px;margin-top:3px;\">Marriott 60611<\/li>\n              <\/ul>\n            <\/div>\n          <\/div>\n          <div style=\"padding:0;margin:0;width:auto;position:absolute;margin-top:-84px;right:0;\"><input style=\"margin:5px 3px 5px;float:right;\" type=\"image\" src=\"http://www.ridecharge.com/images/design/widgets/gobutt_small.png\" value=\"Go\"/><\/div>\n          <br style=\"clear:both;font-size:1px;line-height:1px;\"/>\n        <\/form>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<div style=\"z-index:1000;\">\n  <p style=\"padding:0;margin:0;width:auto;font-family:sans-serif;font-size:11px;color:black;text-align:left;font-weight:bold;display:block;clear:both;margin:15px 0 0 10px;font-size:12px\">2: Book, track &amp; pay with Curb<\/p>\n  <div style=\"display:block;margin:0 auto;width:260px\">\n    <div style=\"padding:0;margin:0;width:auto;text-indent: -50000px;background:url(http://www.ridecharge.com/images/design/widgets/phonesandbutts_medium.png) no-repeat;display:block;margin-left:5px;width:255px;height:80px;\">\n\n      <a style=\"position:relative; display:block; left:125px; top:8px; width:32px; height:33px;\" href=\"https://itunes.apple.com/us/app/taxi-magic/id299226386\">iPhone<\/a>\n      <a style=\"position:relative; display:block; left:168px; top:-18px; width:32px; height:33px;\" href=\"https://play.google.com/store/apps/details?id=com.ridecharge.android.taximagic&amp;hl=en\">Android<\/a>\n\n    <\/div>\n  <\/div>\n  <br clear=\"all\"/>\n<\/div>\n\n\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>",
      wrapper = injectBefore(thisScript, markup),
      inputs = wrapper.getElementsByTagName("input"),
      // look for date field within wrapper
      dateField = inputs[2],
      whereField = inputs[3],
      nowRadio = inputs[0],
      laterRadio = inputs[1],
      whenSpan = wrapper.getElementsByTagName("span")[0],
      hideDate = function() {
        dateField.parentNode.style.display = "none";
        dateField.value = "";
        if(whenSpan.shouldHide)
          whenSpan.style.display = "none";
      };

  var dm = new DateMgr(dateField);

  addEvent(nowRadio, "click", hideDate);
  addEvent(laterRadio, "click", function() {
    dateField.parentNode.style.display = "block";
    dm.updateField();
    if(whenSpan.style.display == "none") {
      whenSpan.shouldHide = true;
      whenSpan.style.display = "block";
    }
  });
  addEvent(whereField, "focus", function() {
    if(this.value == this.defaultValue) {
      this.style.color = "black";
      this.value = "";
    }
  }, whereField);
  addEvent(whereField, "blur", function() {
    if(!this.value) {
      this.style.color = "#999";
      this.value = this.defaultValue;
    }
  }, whereField);
  hideDate();
}