//When the DOM tree is loaded
$(document).ready(function() {
  $('.login').watermark();
  $('.info').focus(function() {
    $(this).siblings('span.hint:first').show();
  });
  $('.info').blur(function() {
    $(this).siblings('span.hint:first').hide();
  });
  $('span.hint').hide();
  $('.trailertype input:radio').click( function() {
    if ($(this).val() == "Other")
      $('div.other').show();
    else
      $('div.other').hide();
  });
  if ($('.trailertype input:radio:checked').val() == "Other")
    $('div.other').show();
  else
    $('div.other').hide();
  $( ".calendar" ).datepicker({
    dateFormat: 'dd/mm/yy'
    ,showOtherMonths: true
    ,selectOtherMonths: true
    ,minDate: new Date()
  });
  $( ".dob, .calendar_year" ).datepicker({
    dateFormat: 'dd/mm/yy',
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    yearRange: 'c-70:c'
  });
  $( ".expirypicker" ).datepicker({
    dateFormat: 'dd/mm/yy',
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,
    yearRange: 'c-40:c+40'
  });
  $('.timepicker').timepicker({ampm: true});
  
  $('.employment_list li').click(function() {
    $( "body > div.ui-dialog" ).remove();
    $( "body > div.popup").remove();
    $(this).find('.popup').clone().dialog({
      height: 500,
      width:500,
      modal: true
    });
  });
  $('input:submit, button').button();
  
  var company_name = $( "#company_name" ),
      company_from = $( "#company_from" ),
      company_to = $( "#company_to" ),
      company_duties = $( "#company_duties" ),
      company_reason = $( "#company_reason" ),
      company_contact = $( "#company_contact" ),
      history_hidden = $( "#history_hidden input:hidden"),
      allFields = $( [] ).add( company_name )
                          .add( company_from )
                          .add( company_to )
                          .add( company_duties )
                          .add( company_reason )
                          .add( company_contact ),
      tips = $( ".validateTips" ),
      carton_item= $( "#carton_item" ),
      carton_length= $( "#carton_length" ),
      carton_width= $( "#carton_width" ),
      carton_height= $( "#carton_height" ),
      carton_weight= $( "#carton_weight" ),
      carton_hidden = $( "#carton_hidden input:hidden"),
      carton_name = $( "#carton_name" ),
      allFieldsCarton = $( [] ).add( carton_item)
                          .add( carton_length)
                          .add( carton_width)
                          .add( carton_height)
                          .add( carton_weight)
                          .add( carton_name);
  
  function updateTips( t ) {
    tips
      .text( t )
      .addClass( "ui-state-highlight" );
    setTimeout(function() {
      tips.removeClass( "ui-state-highlight", 1500 );
    }, 500 );
  }
  
  function checkLength( o, n, min, max ) {
    if ( o.val().length > max || o.val().length < min ) {
      o.addClass( "ui-state-error" );
      updateTips( "Length of " + n + " must be between " +
        min + " and " + max + "." );
      return false;
    } else {
      return true;
    }
  } 
  
  $( ".history_modal" ).dialog({
    autoOpen: false,
    height: 380,
    width: 400,
    modal: true,
    buttons: {
      "Add Employment History": function() {
          var bValid = true;
          allFields.removeClass( "ui-state-error" );

          bValid = bValid && checkLength( company_name , "Company Name", 1, 50 );
          bValid = bValid && checkLength( company_from , "From", 1, 20 );
          bValid = bValid && checkLength( company_to , "To", 1, 20 );
          bValid = bValid && checkLength( company_duties , "Job Duties", 1, 250 );
          bValid = bValid && checkLength( company_reason , "Reason for leaving", 1, 250 );
          bValid = bValid && checkLength( company_contact , "Contact", 1, 50 );


          if ( bValid ) {
            /*$('.history_listbox').append(
              "<option>Company: " + company_name.val() + "<br/>" +
              "Date: " + company_from.val() + " - " + company_to.val() + "<br/>" +
              "Duties: " + company_duties.val() + "<br/>" +
              "Reason: " + company_reason.val() + "<br/>" + 
              "Contact: " + company_contact.val() + "</option>"
            );*/
            $( "#history_table tbody" ).append( "<tr class='insert'>" +
              "<td>" + company_name.val() + "</td>" + 
              "<td>" + company_from.val() + "</td>" + 
              "<td>" + company_to.val() + "</td>" +
              "<td>" + company_duties.val() + "</td>" +
              "<td>" + company_reason.val() + "</td>" +
              "<td>" + company_contact.val() + "</td>" +
            "</tr>" );
            history_hidden.val(history_hidden.val() + 
                               company_name.val() + "ﻯ" +
                               company_from.val() + "ﻯ" +
                               company_to.val() + "ﻯ" +
                               company_duties.val() + "ﻯ" +
                               company_reason.val() + "ﻯ" +
                               company_contact.val() + "ﻳ"
                               );
            $( this ).dialog( "close" );
          }
      },
      Cancel: function() {
        $( this ).dialog( "close" );
      }
    },
    close: function() {
      allFields.val( "" ).removeClass( "ui-state-error" );
    } 
  });
  $('#AddHistory').click(function() {
    $(".history_modal").dialog("open");
    return false;
  });
  $('#ClearHistory').click(function() {
    $("#history_table tbody .insert").remove();
    history_hidden.val("");
    return false;
  });
  
  if (history_hidden.length > 0) {
    var list_history = history_hidden.val().split('ﻳ');
    for (var i = 0; i < list_history.length; i++)
    {
      if (list_history[i].length > 0) {
        var col_history = list_history[i].split('ﻯ');
        if (col_history.length == 6)
        {
          $( "#history_table tbody" ).append( "<tr class='insert'>" +
            "<td>" + col_history[0] + "</td>" + 
            "<td>" + col_history[1] + "</td>" + 
            "<td>" + col_history[2] + "</td>" +
            "<td>" + col_history[3] + "</td>" +
            "<td>" + col_history[4] + "</td>" +
            "<td>" + col_history[5] + "</td>" +
          "</tr>" );
        }
      }
    }
  }
  
  if ($('#uthumbs').length > 0)
  {
    var id = $('#uthumbs').text();
    var url = $.jYoutube(id, 'small')
    $('#uthumbs').empty().append('<img src="'+url+'" />');    
    $('.play_button').click( function() {
        $( "#dialog:ui-dialog" ).dialog( "destroy" );
        $( "#dialog-modal" ).dialog({
            height: 470,
            width: 550,
            modal: true
        });
    });
//<iframe title="YouTube video player" class="youtube-player" style="float:right;padding:5px;" type="text/html" width="216" height="192" src="http://www.youtube.com/embed/YF3-GkCfebc" frameborder="0"></iframe>
  }
  
   $( ".carton_modal" ).dialog({
    autoOpen: false,
    height: 380,
    width: 400,
    modal: true,
    buttons: {
      "Add Item": function() {
          var bValid = true;
          allFieldsCarton.removeClass( "ui-state-error" );

          bValid = bValid && checkLength( carton_item, "Quantity", 1, 50 );
          bValid = bValid && checkLength( carton_length, "Length", 1, 20 );
          bValid = bValid && checkLength( carton_width, "Width", 1, 20 );
          bValid = bValid && checkLength( carton_height, "Height", 1, 20 );
          bValid = bValid && checkLength( carton_weight, "Weight", 1, 20 );
          bValid = bValid && checkLength( carton_name, "words in Description", 1, 50 );

          if ( bValid ) {
            $( "#carton_table tbody" ).append( "<tr class='insert'>" +
              "<td>" + carton_name.val() + "</td>" +
              "<td>" + carton_item.val() + "</td>" + 
              "<td>" + carton_length.val() + "</td>" + 
              "<td>" + carton_width.val() + "</td>" +
              "<td>" + carton_height.val() + "</td>" +
              "<td>" + carton_weight.val() + "</td>" + 
            "</tr>" );
            carton_hidden.val(carton_hidden.val() + 
                               carton_item.val() + "ﻯ" +
                               carton_length.val() + "ﻯ" +
                               carton_width.val() + "ﻯ" +
                               carton_height.val() + "ﻯ" +
                               carton_weight.val() + "ﻯ" +
                               carton_name.val() + "ﻳ"
                               );
            $( this ).dialog( "close" );
          }
      },
      Cancel: function() {
        $( this ).dialog( "close" );
      }
    },
    close: function() {
      allFieldsCarton.val( "" ).removeClass( "ui-state-error" );
    } 
  });
  $('#AddCarton').click(function() {
    $(".carton_modal").dialog("open");
    return false;
  });
  $('#ClearCarton').click(function() {
    $("#carton_table tbody .insert").remove();
    carton_hidden.val("");
    return false;
  });
  
  if (carton_hidden.length > 0) {
    var list_carton = carton_hidden.val().split('ﻳ');
    for (var i = 0; i < list_carton.length; i++)
    {
      if (list_carton[i].length > 0) {
        var col_carton = list_carton[i].split('ﻯ');
        if (col_carton.length == 6)
        {
          $( "#carton_table tbody" ).append( "<tr class='insert'>" +
            "<td>" + col_carton[5] + "</td>" + 
            "<td>" + col_carton[1] + "</td>" + 
            "<td>" + col_carton[2] + "</td>" +
            "<td>" + col_carton[3] + "</td>" +
            "<td>" + col_carton[4] + "</td>" +
            "<td>" + col_carton[0] + "</td>" +
          "</tr>" );
        }
      }
    }
  }
 
});