var slide_interval = false
var slide_step     = 4

// Slide functionality of the 2 sections.
function install_sectionslides()
{
  $('#products_button').click( function () {
    C.section = 'products'
    C.menu    = $('#products .content .menu li.active').attr('id')
    
    $('#services .content').hide()

    var c = 1
    slide_interval = setInterval( function () { 
      var i = parseInt($('#products').css('height'))
      var max = parseInt($('html').css('height')) - 170
     
      if(i < max)
      {
        i = i + (slide_step + c)
        c++
        if(i > max)
          i = max

        $('#products').css({ 'height' : i + 'px' })
      } else {
        $('#products .content').show()
        clearInterval(slide_interval)
      }
    }, 10)
    
    $(this).fadeOut()
    $('#services_button').fadeIn()

    return false
  })

  $('#services_button').click( function () {
    C.section = 'services'
    C.menu    = $('#services .content .menu li.active').attr('id')

    $('#products .content').hide()

    var c = 1  
    slide_interval = setInterval( function () { 
      var i = parseInt($('#products').css('height'))
      var max = 150
     
      if(i > max)
      {
        i = i - (slide_step + c)
        c++
        if(i < max)
          i = max

        $('#products').css({ 'height' : i + 'px' })
      } else {
        $('#services .content').show()
        clearInterval(slide_interval)
      }
    }, 10)

    $(this).fadeOut()
    $('#products_button').fadeIn()

    return false
  })


}

function install_menu()
{
  $('.menu li').click( function () {
    $(this).addClass('active').siblings().removeClass('active')

    var id = this.id
    C.menu = id
    $(this).parent().parent().find('.view').each( function () {
      if($(this).hasClass(id) && !$(this).hasClass('active')) {
        $(this).addClass('active')
      } else {
        $(this).removeClass('active')
      }
    })
  })
}

function install_serviceselect()
{
  $('#pricelist .item .select').mouseover( function () {
    $(this).addClass('over')
  })

  $('#pricelist .item .select').mouseout( function () {
    $(this).removeClass('over')
  })

  $('#pricelist .item .select').click( function () {
    var id    = this.parentNode.id.replace('service_', '')

    add_service(id)
  })
}

function add_service(id)
{
  if(!$.cookie('services'))
  {
    var services = [id]
  } else {
    var services = $.cookie('services').split(',')
    services.push(id)
  }

  $.cookie('services', services)

  $('#afspraak').trigger('click')
  build_order()
}

function build_order()
{
  var services = $.cookie('services').split(',')

  $('#orders ul').empty()

  var total = 0;

  for(var i=0; i<services.length; i++)
  {
    if(!services[i])
      continue

    var service = get_service(services[i])
    if(!service)
      return

    var li   = document.createElement('li')
    li.id    = 'order_list_' + i
    li.innerHTML = "<input type='hidden' name='services[]' value='"+services[i]+"'><span>" + service.price + "</span>" + service.name

    var price = service.price.substr(1).split(',')
    if(price[1] == '-')
      price[1] = '0'

    price = price[0] + "." + price[1]
    price = parseFloat(price.replace(",","."))
    total = total + price
    
    $('#orders ul').append(li)

    $(li).click( function () {
      remove_service(this.id.replace('order_list_', ''))
    })
  }
 
  
  $('#total').html("&euro;" + total.toFixed(2))
  $('#orders_title').show()
  $('#orders').show()
}

function get_service(id) {
  var service = false
  $('#pricelist .item').each( function () {
    if(this.id == "service_" + id)
    {
      service = {
        'name'  : $(this).children('h2').html(),
        'price' : $(this).children('.price').html()
      }
    }
  })

  return service
}

function remove_service(id)
{
  var services = $.cookie('services').split(',')
  var service = get_service(services[id])
  if(!service)
    return false

  if(!confirm('Behandeling ' + service.name + ' verwijderen?'))
    return false

  delete services[id]
  $.cookie('services', services)

  build_order()
}

// Highlight then fade out and remove the error message
function highlight_error()
{
  $('#error').each( function () {
    $(this).effect('highlight', {}, 3000).fadeOut('4000', function () {
      $(this).remove()  
    })
  })
}

function install_close()
{
  $('.close').click( function () {
    $(this).parent().fadeOut('slow', function () { $(this).remove() })
  })
}

function dp_beforeShowDay(date)
{
  var month = date.getMonth() + 1
  var day   = date.getDate()

  var open  = true
  try {
    if(C.closed_dates[month] == undefined)
    {
      open = false
    } else {
      if(C.closed_dates[month][day] == undefined)
      {
        open = false
      } else {
        if(C.closed_dates[month][day])
        {
          open = false
        }
      }
    }
  } catch(e) {
  }

  return [open, '']
}

function dp_select(date)
{
  $('#form_date').val(date)
}

function install_appointment()
{
  var made = false
  $('#made').each( function () {
    made = true

    $('#appointment').find('input').attr('disabled', 'disabled')
    $('#form_ok').removeAttr('disabled').click( function () {
      $.cookie('services', null)
      $('#orders').hide()
      $('#orders_title').hide()
    })

  })

  if(made)
    return false

  if(!C.closed_dates)
  {
    console.log('missing dates')
    return
  }

  $('#datepicker').datepicker({
    'dateFormat'      : 'dd-mm-yy',
    'constrainInput'  : true,
    'closeText'       : 'Klaar',
    'currentText'     : 'Vandaag',
    'defaultDate'     : +1,
    'firstDay'        : 1,
    'minDate'         : '+1d',
    'maxDate'         : '+2m',
    'beforeShowDay'   : dp_beforeShowDay,
    'onSelect'        : dp_select,
    'dayNames'        : [
      'Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag'
    ],
    'dayNamesMin'     : [ 'Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za' ],
    'monthNames'      : [
      'Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus',
      'September', 'Oktober', 'November', 'December'
    ],
    'monthNamesMin'   : [
      'Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'
    ]
  })

  $('#form_make').click( function () {
    var elements = $('#customer_data').find('input[type=text]')
    for(var i=0; i<elements.length; i++)
    {
      if(!elements[i].value || elements[i].value == elements[i]._value)
      {
        appointment_error('Vul je ' + elements[i]._value.toLowerCase() + ' in.')
        return false
      }
    }
  })
}

function appointment_error(msg)
{
  $('#appointment_error').each( function () {
    this.innerHTML = msg
  
    $(this).show().click( function () {
        $(this).fadeOut('slow', function () { $(this).remove() })
      })
  })
}

function install_input_originals()
{
  var values = {
    'name'    : 'Naam',
    'address' : 'Adres',
    'city'    : 'Postcode en plaats',
    'phone'   : 'Telefoonnummer',
    'email'   : 'E-mailadres'
  }

  $('#customer input').each( function () {
    this._value = values[this.name]

    $(this).bind('focus', function () {
      if(this.value == this._value)
        this.value = ''
    })


    $(this).bind('blur', function () {
      if(!this.value)
        this.value = this._value
    })
  })
}
// ----------- INSTALL ----------- //
$(document).ready( function () {
  var preload = [
    '/img/button_products_mo.png',
    '/img/button_services.png',
    '/img/button_services_mo.png',
  ]

  for(var i=0; i<preload.length; i++)
    $.get(preload[i])

  // install_sectionslides()
  install_menu()
  install_serviceselect()
  install_appointment()
  install_close()
  install_input_originals()
  if($.cookie('services'))
    build_order()

  highlight_error()
  
  // init section?
  if(C.section)
    $('#' + C.section + '_button').trigger('click')

  if(C.section && C.menu)
    $('#' + C.section + ' .content div.view.' + C.menu).show()

})