function Service() {
    this.id;
    this.vendor_id;
    this.name;
    this.description;
    this.price;
    this.status;
    this.duration;
    this.selected=0;
}

function Staff() {
    this.id;
    this.vendor_id;
    this.name;
    this.surname;
    this.selected=0;
}

var args;
var action;
var user;
var staff_members = Array();
var summary;
var services = Array();
var selected_date;
var selected_time;

function showServiceDesc(id) {
    var price = parseFloat(services[id].price).toFixed(2);
    if(isNaN(price))
        document.getElementById("dc_service").innerHTML = '<p class="content_1">'+services[id].name.replace("\\'","'") +'</p><p class="content_2">'+services[id].description.replace("\\'","'")+'</p>';
    else document.getElementById("dc_service").innerHTML = '<p class="content_1">'+services[id].name.replace("\\'","'") +'</p><p class="content_2">'+services[id].description.replace("\\'","'")+'</p><p class="content_2">&gt;&gt;Price: $'+price+'</p>';
    checkChange(id);
}

function showServiceList(){
    // create scroll bar divs
    var container = document.createElement('div');
    var scroller_1 = document.createElement('div');
    var scroll_container = document.createElement('div');
	
    //set scroll bar div attributes
    scroll_container.setAttribute("id", "Scroller-Container");
    scroll_container.className="Scroller-Container";
    scroller_1.setAttribute("id", "Scroller-1");
    container.className="Container";
	
    container.appendChild(scroller_1);
	
    var scrollbar = '<div id="Scrollbar-Container">\n<img src="images/scrollbar/scrollbar-top.gif" class="Scrollbar-Up" />\n<div class="Scrollbar-Track">\n<img src="images/scrollbar/scrollbar-slider.gif" class="Scrollbar-Handle" />\n</div><img src="images/scrollbar/scrollbar-bottom.gif" class="Scrollbar-Down" />\n\n</div>\n';
	
    if (services.length > 0){
	var html = '';
        for (var i=0; i<services.length; i++) {
            html +='<div class="service" >';
            html += '<input type="checkbox" name="services" style="margin-right:5px;cursor:pointer; display:none;" />';
            html += '&nbsp;'
            html += '<a class="service_content" href="#" onclick="javascript:showServiceDesc(\''+i+'\');">';
            html += services[i].name.replace("\\'","'");
            html += '</a></div>';
        }
        scroll_container.innerHTML = html;
        scroller_1.appendChild(scroll_container);
        document.getElementById("service_content").appendChild(scroller_1);
        document.getElementById("service_list").innerHTML+=scrollbar;
        document.getElementById("service_list").innerHTML+='<div><a class="next" onclick="AjaxObject.selectService();" href="javascript:void(0);" ></a></div>';
    }
    initCheckboxes();
    var scroller  = null;
    scrollbar = null;
    scroller  = new jsScroller(document.getElementById("Scroller-1"), 230, 250);
    scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, false);
}

function showStaffDetails(id) {
//alert(staff_members[id]);	
}

function showStaffList(){
    var i = 0;
    // clear any existing data
    var staff_list = document.getElementById('staff_list');
    for(i=0; i< staff_list.childNodes.length;i++){
        if(staff_list.childNodes[i].id ==  "Scrollbar-Container-staff"){
            staff_list.removeChild(staff_list.childNodes[i]);
        }
    }
    var staff_content = document.getElementById('staff_content');
    for(i=0; i< staff_content.childNodes.length;i++){
		
        staff_content.removeChild(staff_content.childNodes[i]);
    }
	
    // create scroll bar divs
    var container = document.createElement('div');
    var scroller_1 = document.createElement('div');
    var scroll_container = document.createElement('div');
	
    //set scroll bar div attributes
    scroll_container.setAttribute("id", "Scroller-Container-staff");
    scroll_container.className="Scroller-Container";
    scroller_1.setAttribute("id", "Scroller-1-staff");
    container.className="Container";
	
    container.appendChild(scroller_1);
	
    var scrollbar = '<div id="Scrollbar-Container-staff">\n<img src="images/scrollbar/scrollbar-top.gif" class="Scrollbar-Up" />\n<div class="Scrollbar-Track">\n<img src="images/scrollbar/scrollbar-slider.gif" class="Scrollbar-Handle" />\n</div><img src="images/scrollbar/scrollbar-bottom.gif" class="Scrollbar-Down" />\n\n</div>\n';
	
    var staff_members_len = staff_members.length;
    if (staff_members_len > 0) {
        for (var i=0; i<staff_members_len; i++) {
            // pre-select the staff if there is only one.
            if(staff_members_len == 1)
                scroll_container.innerHTML+='<div class="staff"><input type="radio" name="staff" value="'+i+'" checked="checked" />&nbsp;<a class="service_content" href="#" onclick="javascript:radioChange(\''+i+'\');">'+staff_members[i].name+' '+staff_members[i].surname+'</a></div>';
            else
                scroll_container.innerHTML+='<div class="staff"><input type="radio" name="staff" value="'+i+'" />&nbsp;<a class="service_content" href="#" onclick="javascript:radioChange(\''+i+'\');">'+staff_members[i].name+' '+staff_members[i].surname+'</a></div>';
        }
    }

    scroller_1.appendChild(scroll_container);
    document.getElementById("staff_content").appendChild(scroller_1);
	
    document.getElementById("staff_list").innerHTML+=scrollbar;
    document.getElementById("staff_list").innerHTML+='<div><a class="back" href="javascript:void(0);" onclick="backTo(\'services\');"></a></div><div><a class="next" onclick="determineStaff();" href="javascript:void(0);" ></a></div>';
    //document.getElementById('dynamic_content').innerHTML='';
    hide("dynamic_content");
    hide("dc_services");
    show("staff_list");
    initRadios();
	
    var scroller  = null;
    var scrollbar = null;

    scroller  = new jsScroller(document.getElementById("Scroller-1-staff"), 230, 250);
    scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container-staff"), scroller, false);
}

function showStaffListBACKUP(){
	
    if (staff_members.length > 0){
        for (var i=0; i<staff_members.length; i++) {
            document.getElementById("staff_list").innerHTML+='<div class="staff"><input type="radio" name="staff" value="'+i+'" /><a class="service_content" href="javascript:void(0);" onclick="javascript:showStaffDetails(\''+i+'\');">'+staff_members[i].name+' '+staff_members[i].surname+'</a></div>';
        }
    }
    document.getElementById("staff_list").innerHTML+='<div><a class="next" onclick="determineStaff();" href="javascript:void(0);" ></a></div>';
    document.getElementById("staff_list").style.display="block";
	
    document.getElementById('dynamic_content').innerHTML='';
    initRadios();
}

function showCalendar(cal){
    document.getElementById("cal").innerHTML=cal+'<div><a class="back_lower" href="javascript:void(0);" onclick="backTo(\'staff\');"></a></div>';
    document.getElementById("select_calendar").style.display="block";
}

function showTimes(times) {
	
    // create scroll bar divs
    var container;
    var scroller_1;
    var scroller  = null;
    var scrollbar = null;
    var scroll_container;
    if(!document.getElementById('Scroller-Container-2'))
    {
        container = document.createElement('div');
        scroller_1 = document.createElement('div');
        scroll_container = document.createElement('div');
        scroll_container.setAttribute("id", "Scroller-Container-2");
        scroll_container.className="Scroller-Container";
        scroller_1.setAttribute("id", "Scroller-2");
        container.className="Container-2";
        container.id="Container-2";


        container.appendChild(scroller_1);

        scrollbar = '<div id="Scrollbar-Container-right">\n<img src="images/scrollbar/times-scrollbar-top.gif" class="Scrollbar-Up" />\n<div class="Scrollbar-Track">\n<img src="images/scrollbar/scrollbar-slider.gif" class="Scrollbar-Handle" />\n</div><img src="images/scrollbar/times-scrollbar-bottom.gif" class="Scrollbar-Down" />\n\n</div>\n';

        scroller_1.appendChild(scroll_container);
    }
    else
    {
        scroll_container = document.getElementById('Scroller-Container-2')
        scroller_1 = document.getElementById('Scroller-2')
        container = document.getElementById('Container-2')
    }
    var dynamic = document.getElementById("dynamic_content");
	

    scroll_container.innerHTML=times;
	
    if (!document.getElementById("dc_time")){
        dynamic.innerHTML +="<div id=\"dc_time\" style=\"margin:0px 10px 0px 10px;\"><h2>Select a Time</h2><p class=\"content_2\">Please select a time from the list below.</p></div>";
        dynamic.appendChild(container);
        dynamic.innerHTML+=scrollbar;
    }
    else
    {
        document.getElementById('dc_time').innerHTML = "<h2>Select a Time</h2><p class=\"content_2\">Please select a time from the list below.</p>";
    }

    show("dc_time");
    show("Container-2");	
    show("dynamic_content");

    scroller  = new jsScroller(document.getElementById("Scroller-2"), 4000, 250);
    scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container-right"), scroller, false);
  
}

function updateSummary() {
    var i = 0;
    var hasItem = false;
    /****** Update Services section ******/
    var services_summary = document.getElementById("summary_services");
    var index_of_h1 = services_summary.innerHTML.indexOf("</h1>");
    if (index_of_h1 == -1)
        index_of_h1 = services_summary.innerHTML.indexOf("</H1>");
    services_summary.innerHTML = services_summary.innerHTML.substr(0, index_of_h1+5);
	
    if (services != null){
        for(i=0; i<services.length;i++){
            if (services[i].selected == 1) {
                services_summary.innerHTML+='<p><strong>'+services[i].name.replace("\\'","'")+'</strong></p>';
                hasItem = true;
            }
        }
        if (hasItem)
            show("summary_services");
    }

    hasItem = false;
    var staff_member_summary = document.getElementById("summary_staff");
	
    index_of_h1 = staff_member_summary.innerHTML.indexOf("</h1>");
    if (index_of_h1 == -1)
        index_of_h1 = staff_member_summary.innerHTML.indexOf("</H1>");
    staff_member_summary.innerHTML = staff_member_summary.innerHTML.substr(0, index_of_h1+5);
	
    if (staff_members != null) {
        for(i=0; i<staff_members.length;i++){
            if (staff_members[i].selected == 1) {
                staff_member_summary.innerHTML+='<p><strong>'+staff_members[i].name+' '+staff_members[i].surname+'</strong></p>';
                hasItem = true;
            }
        }
        if (hasItem)
            show("summary_staff");
    }

    hasItem = false;
    var date_summary = document.getElementById("summary_date");
    index_of_h1 = date_summary.innerHTML.indexOf("</h1>");
    if (index_of_h1 == -1)
        index_of_h1 = date_summary.innerHTML.indexOf("</H1>");
    date_summary.innerHTML=date_summary.innerHTML.substr(0, index_of_h1+5);
	
    if (selected_date != null){
	var stringDateParts = selected_date.split("-");
        var d = new Date(parseInt(stringDateParts[0], 10), (parseInt(stringDateParts[1], 10) - 1), parseInt(stringDateParts[2], 10));
        date_summary.innerHTML+= '<strong>' + d.formatDate("l, M j, Y") + '</strong>';
        hasItem = true;
    }
    if (hasItem)
        show("summary_date");
    /**********************************/
	
    /****** Update Time section ******/
    var time_summary = document.getElementById("summary_time");
    if (navigator.appVersion.match("MSIE") == null && navigator.appVersion.match("Safari") != "Safari")
        time_summary.innerHTML="";
    if (selected_time != null){
        date_summary.innerHTML += '<br /><strong>' + selected_time.substr(11) + ' --> ' + selected_time + '</strong>';
    }
    /**********************************/
	
    /****** Update Sumary section ******/
    hasItem = false;
    var notes_summary = document.getElementById("summary_notes");
    index_of_h1 = notes_summary.innerHTML.indexOf("</h1>");
    if (index_of_h1 == -1)
        index_of_h1 = notes_summary.innerHTML.indexOf("</H1>");
    notes_summary.innerHTML=notes_summary.innerHTML.substr(0, index_of_h1+5);
	
    if (notes_summary != "") {
		
        if (document.getElementById("notes")){
            notes_summary.innerHTML+='<p><strong>'+document.getElementById("notes").value.replace(/\n/g, "<br />")+'</strong></p>';
            document.getElementById('appointment_notes').value = document.getElementById("notes").value;
			
            if (document.getElementById("notes").value != "")
                hasItem = true;
			
        }
        else if (document.getElementById('appointment_notes').value != "") {
            notes_summary.innerHTML+='<p><strong>'+document.getElementById("appointment_notes").value.replace(/\n/g, "<br />")+'</strong></p>';
			
        }
        if (hasItem)
            show("summary_notes");
    }
/**********************************/
}
function displayRegistration(){
    var summary = document.getElementById('summary');
    summary.className="summary_large";
    var main_content = document.getElementById('main_content');
    main_content.className="main_content_finish";
    hide("dynamic_content");
    hide("select_calendar");
    document.getElementById("content_top").className="content_top_finish";
    document.getElementById("content_bottom").className="content_bottom_finish";
    var login = document.getElementById('login');
    var display = true;
    for (var i=0; i<login.childNodes.length; i++){
        if(login.childNodes[i].id == "submit")
            display = false;
    }
    if(display)
    {
        login.innerHTML+='<div class="content_1">appointment notes</div><textarea id="notes" onkeyup="updateSummary();" name="notes" style="width:262px; height:95px;"></textarea><div class="label content_1">email</div><input type="text" name="email"  id="email" value="" style="width:140px; height:17px;" /><div class="label content_1">password<br /><a onclick="displayRetrievePassword();" href="javascript:void(0);" >forgot it?</a></div><input type="password" name="password" id="password" style="width:140px; height:17px;" /><div style="clear:both"></div>	<a href="javascript:void(0);" id="submit" onClick="AjaxObject.login();" >Submit Request</a><div class="content_1 clear">Don\'t have an account?<br /><a href="javascript:void(0);" onclick="signup();">Create an account now.</a> </div><div id="retrieve_password"><div class="label content_1">email</div><input type="text" name="retrieve_email"  id="retrieve_email" value="" style="width:140px; height:17px;" /><a href="javascript:void(0);" id="submit" onClick="AjaxObject.retrievePassword();" >Get Password</a></div><div><a class="back_lower" href="javascript:void(0);" onclick="backTo(\'date_time\');"></a></div>';
    }
    convertForm();
}

function displayRetrievePassword(){
    show("retrieve_password");
}

function bookingComplete(response){
    hide('login');
    hide('sign_up');
    show('complete');
}

function signup(){
    hide('login');
	
    var html = '';
	
    html += '<table>';
    html += '<tr><td class="label content_1">Name*</td>';
    html += '<td><input name="name" id="name" maxlength="64" style="width:140px; height:17px;" type="text"></td></tr>';
    html += '<tr><td class="label content_1">Last Name*</td>';
    html += '<td><input name="surname" id="surname" maxlength="64" style="width:140px; height:17px;" type="text"></td></tr>';
    html += '<tr><td class="label content_1">Phone*</td>';
    html += '<td><input name="phone_number" id="phone" maxlength="64" style="width:140px; height:17px;" type="text"></td></tr>';
    html += '<tr><td class="label content_1">Email*</td>';
    html += '<td><input name="email_address" id="email_address" maxlength="64" style="width:140px; height:17px;" type="text"></td></tr>';
    html += '<tr><td class="label content_1">Password*</td>';
    html += '<td><input name="password1" id="password1" maxlength="64" style="width:140px; height:17px;" type="password"></td></tr>';
    html += '<tr><td class="label content_1">Confirm Password*</td>';
    html += '<td><input name="password2" id="password2" maxlength="64" style="width:140px; height:17px;" type="password"></td></tr>';
    html += '<tr><td colspan="2"><a href="javascript:void(0);" id="register" onclick="AjaxObject.signUp();">Register</a></td></table>';
    html += '<div class="content_1">Oh wait, I do have an account.<br /><a href="javascript:void(0);" onclick="login();">Click here</a> to login.</div>';
	
    document.getElementById('sign_up').innerHTML = html;
    show('sign_up');
}

function login(){
    hide('sign_up');
    show('login');
}

function show(id) {
	
    document.getElementById(id).style.display="block";
}
function hide(id) {
    if (document.getElementById(id))
        document.getElementById(id).style.display="none";
}
function durationToTime() {
	
    var leadingZero = Array('00', '01', '02', '03', '04', '05', '06', '07', '08', '09');
    date_container = Array();
    time_container = Array();
    newTime = Array();
    date_container = selected_time.split(" ");
    time_container = date_container[1].split(":");
    hours = duration/60;
    mins = duration%60;
	
    newTime[1] = parseInt(time_container[1])+ parseInt(mins);
    while (newTime[1] >= 60){
        newTime[1] = newTime[1] -60;
        time_container[0] = parseInt(time_container[0])+1;
    }
	
    newTime[0] = parseInt(time_container[0])+parseInt(hours);
	
    if (newTime[0] > 12){
        newTime[0] = parseInt(newTime[0]) -12;
        if ((date_container[2] == "AM" &&  newTime[0] < 12) || (date_container[2] == "PM" && newTime[0] < 12) ) {
            newTime[2] = "PM";
        }
        else{
            newTime[2] = "AM";
        }
        if (newTime[1] < 10)
            newTime[1] = leadingZero[newTime[1]];
			
        return newTime[0]+":"+newTime[1]+" "+newTime[2];
    }
    else {
        if ((date_container[2] == "AM" && newTime[0] == 12) || (date_container[2] == "PM" && newTime[0] < 12) ) {
            newTime[2] = "PM";
        }
        else{
            newTime[2] = "AM";
        }
		
        if (newTime[1] < 10)
            return newTime[0]+":"+leadingZero[newTime[1]]+" "+newTime[2];
        else
            return newTime[0]+":"+newTime[1]+" "+newTime[2];
    }
}

function determineStaff(){
    var list = document.getElementsByName("staff");
    for(var i=0; i<list.length; i++){
        if (list[i].checked){
            AjaxObject.selectStaff(list[i].value);
        }
    }
}

function convertForm(){
    convertInputs();
    convertTextareas();
}
function convertInputs(){
    var wrapperOffset = 4;
    var spacerHeight = 2;
    var spacerWidth = 0;
    if (navigator.appVersion.match("MSIE") == "MSIE"){
        wrapperOffset = 6;
        spacerHeight = 2;
        spacerWidth = 2;
    }
	
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++){
		
        if((inputs[i].type == "password" || inputs[i].type == "text") && inputs[i].parentNode.className != "input_wrapper"){
			
            inputs[i].style.border="none";
			
            var wrapper = document.createElement('div');
            wrapper.className="input_wrapper";
            wrapper.style.height=parseInt(inputs[i].style.height)+wrapperOffset +"px"; //4
            wrapper.style.width=parseInt(inputs[i].style.width)+wrapperOffset+"px"; //4
            var top_left = document.createElement('div');
            top_left.className="top_left_wrapper";
            var top = document.createElement('div');
            top.className="top_wrapper";
            top.style.width=parseInt(inputs[i].style.width)+spacerWidth+"px"; //0
            var top_right = document.createElement('div');
            top_right.className="top_right_wrapper";
            var left = document.createElement('div');
            left.className="left_wrapper";
            left.style.height=parseInt(inputs[i].style.height)+spacerHeight +"px"; // 0
            var right = document.createElement('div');
            right.className="right_wrapper";
            right.style.height=parseInt(inputs[i].style.height)+spacerHeight +"px"; // 0
            var bottom_left = document.createElement('div');
            bottom_left.className="bottom_left_wrapper";
            var bottom = document.createElement('div');
            bottom.className="bottom_wrapper";
            bottom.style.width=parseInt(inputs[i].style.width)+spacerWidth+"px"; //0
            var bottom_right = document.createElement('div');
            bottom_right.className="bottom_right_wrapper";
            var newInput = inputs[i].cloneNode(true); // clone node
			
            //wrap input
            wrapper.appendChild(top_left);
            wrapper.appendChild(top);
            wrapper.appendChild(top_right);
            wrapper.appendChild(left);
            wrapper.appendChild(newInput);
            wrapper.appendChild(right);
            wrapper.appendChild(bottom_left);
            wrapper.appendChild(bottom);
            wrapper.appendChild(bottom_right);
			
            inputs[i].parentNode.replaceChild(wrapper, inputs[i]); // replace
			
        }
    }
		
}
function convertTextareas(){
    var wrapperOffset = 4;
    var spacerHeight = 2;
    var spacerWidth = 0;
    if (navigator.appVersion.match("MSIE") == "MSIE"){
        wrapperOffset = 6;
        spacerHeight = 2;
        spacerWidth = 2;
    }
    var inputs = document.getElementsByTagName("textarea");
    for (var i=0; i<inputs.length; i++){
        if( inputs[i].parentNode.className != "input_wrapper"){
			
            inputs[i].style.border="none";
			
            var wrapper = document.createElement('div');
            wrapper.className="input_wrapper";
            wrapper.style.height=parseInt(inputs[i].style.height)+wrapperOffset +"px";
            wrapper.style.width=parseInt(inputs[i].style.width)+wrapperOffset +"px";
            var top_left = document.createElement('div');
            top_left.className="top_left_wrapper";
            var top = document.createElement('div');
            top.className="top_wrapper";
            top.style.width=parseInt(inputs[i].style.width)+spacerWidth+"px"; //0
            var top_right = document.createElement('div');
            top_right.className="top_right_wrapper";
            var left = document.createElement('div');
            left.className="left_wrapper";
            left.style.height=parseInt(inputs[i].style.height)+2 +"px";
            var right = document.createElement('div');
            right.className="right_wrapper";
            right.style.height=parseInt(inputs[i].style.height)+2 +"px";
            var bottom_left = document.createElement('div');
            bottom_left.className="bottom_left_wrapper";
            var bottom = document.createElement('div');
            bottom.className="bottom_wrapper";
            bottom.style.width=parseInt(inputs[i].style.width)+spacerWidth+"px"; //0
            var bottom_right = document.createElement('div');
            bottom_right.className="bottom_right_wrapper";
            var newInput = inputs[i].cloneNode(true); // clone node
			
            //wrap input
            wrapper.appendChild(top_left);
            wrapper.appendChild(top);
            wrapper.appendChild(top_right);
            wrapper.appendChild(left);
            wrapper.appendChild(newInput);
            wrapper.appendChild(right);
            wrapper.appendChild(bottom_left);
            wrapper.appendChild(bottom);
            wrapper.appendChild(bottom_right);
			
            inputs[i].parentNode.replaceChild(wrapper, inputs[i]); // replace
        }
    }
}
function step(id, dir){
    if (dir == 'back'){
        if(id >= 2 && id != 4)
            document.getElementById('step'+(id)).className='step'+(id)+'b';
        else
            document.getElementById('step'+(id)).className='step'+(id);
        document.getElementById('step'+(id-1)).className+=' selected';
    }
    else{
        document.getElementById('step'+(id-1)).className='step'+(id-1);
        document.getElementById('step'+id).className+=' selected';
    }
}
function backTo(s){
	
    switch (s) {
        case "services":
            hide('staff_list');
            show('service_list');
            step(2, 'back');
            hide("dc_time");
            hide("Container-2");
            show("dynamic_content");
            show("dc_services");
            break;
        case "staff":
            hide("select_calendar");
            show("staff_list");
            hide("dynamic_content");
            step(3, 'back');
            break;
        case "date_time":
            var summary = document.getElementById('summary');
            summary.className="summary_small";
            var main_content = document.getElementById('main_content');
            main_content.className="main_content";
            hide("login");
            hide("sign_up");
            document.getElementById("content_top").className="content_top";
            document.getElementById("content_bottom").className="content_bottom";
            show("select_calendar");
            show("dynamic_content");
            step(4, 'back');
    }
}
function validateEmail(email) {
    var reg = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
    if(reg.test(email) == false) {
        return false;
    }
    return true;
}
// Start the transaction.