$( document ).ready( function() { Lokeren.initialize() })

var Lokeren     = window.Lokeren     = { initializers: {} }
var UitDatabank = window.UitDatabank = { requests: [] }

Lokeren.initialize = function() {
  $.each( this.initializers, function() {
    this.call( document )
  })

  Lokeren.welcome()
}

Lokeren.welcome = function() {
  if ( $( '#mainform input:first-child' ).val() !== '' ) {
    $( '#mainform' ).submit()
  } else {
    $( '#center > #ajax' ).after( "<h2>In de kijker</h2><div id='highlight_1'></div><h2>Activiteiten van vandaag</h2><div id='highlight_2'></div>" )

    var today = new Date(),
        month = today.getMonth() + 1,
          day = today.getDate(),
         year = today.getFullYear()

    UitDatabank.addRequest({
      args: {
        date: '' + year + '-' + month + '-' + day
      },
      cbk: function( data, status, xhr ) {
        var template = "<ul id='niet-te-missen'>"

        $.each( data, function( i, val ) {
          template += "<li rel='detail:" + val.cdbid + "'>"
          template += "<div class='left' style='width:162px;margin-top:20px;'><div align='center'><img src='" + (val.thumbnail || 'images/no-image.jpg') + "' alt='" + val.title + "' /></div></div>"
          template += "<div class='right' style='padding-left: 15px;width:370px;'><h3 style='margin-bottom: 5px;'>" + val.title + '</h3>'
          template += '<p>' + val.shortdescription.substr( 0, 100 ) + "... <span class='red'>(meer)</span>"
          template += '<dl><dt>Waar</dt><dd>' + val.address + '</dd></dl><dl>'
          template += '<dt>Wanneer</dt><dd>' + val.calendarsummary + '</dd></dl></p><br />'
          template += '</div></li>'
        })

        $( '#highlight_2' ).append( template + '</ul>' )
      }
    })
    UitDatabank.addRequest({
      cbk: function( data, status, xhr ) {
        var template = "<ul id='slider' class='inline'>"

        $.each( data, function( i, val ) {
          template += "<li rel='detail:" + val.cdbid + "'>"
          template += "<div class='left' style='width:162px;'><img src='" + (val.thumbnail || 'images/no-image.jpg') + "' alt='" + val.title + "' /></div>"
          template += "<div class='right' style='padding-left: 20px;width:280px;'><h3 style='margin-bottom: 10px;'>" + val.title + '</h3>'
          template += '<p>' + val.shortdescription.substr( 0, 100 ) + "... <span class='red'>(meer)</span></p>"
          template += '</div></li>'
        })

        $( '#highlight_1' ).append( template + '</ul>' )
        $( '#slider' ).bxSlider({
          prev_image: 'images/btn_arrow_left.jpg',
          next_image: 'images/btn_arrow_right.jpg',
          pause: 7500,
          pager: false,
          auto: true
        })
      }
    })
    UitDatabank.executeRequests()
    /*
    $( '#center > #ajax' ).after( "<h2>Niet te missen</h2><div id='highlight_1'></div><h2>UiTgelicht</h2><div id='highlight_2'></div><h2>Ook leuk</h2><div id='highlight_3'></div>" )

    var highlight = [].get( 'highlight' ).first(),
   niet_te_missen = highlight.niet_te_missen,
       uitgelicht = highlight.uitgelicht,
             used = []

    UitDatabank.request({
      cbk: function( data, status, xhr ) {
        var template_1 = '<ul id="niet-te-missen">',
            template_2 = '<ul id="niet-te-missen">',
            template_3 = "<ul id='slider' class='inline'>"

        $.each( data, function( i, val ) {
          if ( $.inArray( val.cdbid, niet_te_missen ) > -1 ) {
            template_1 += "<li rel='detail:" + val.cdbid + "'>"
            template_1 += "<div class='left' style='width:162px;margin-top:20px;'><div align='center'><img src='" + (val.thumbnail || 'images/no-image.jpg') + "' alt='" + val.title + "' /></div></div>"
            template_1 += "<div class='right' style='padding-left: 15px;width:370px;'><h3 style='margin-bottom: 5px;'>" + val.title + '</h3>'
            template_1 += '<p>' + val.shortdescription.substr( 0, 100 ) + "... <span class='red'>(meer)</span>"
            template_1 += '<dl><dt>Waar</dt><dd>' + val.address + '</dd></dl><dl>'
            template_1 += '<dt>Wanneer</dt><dd>' + val.calendarsummary + '</dd></dl></p><br />'
            template_1 += '</div></li>'
            used.push( val )
          }

          if ( $.inArray( val.cdbid, uitgelicht ) > -1 ) {
            template_2 += "<li rel='detail:" + val.cdbid + "'>"
            template_2 += "<div class='right' style='width:162px;margin-top:20px;'><div align='center'><img src='" + (val.thumbnail || 'images/no-image.jpg') + "' alt='" + val.title + "' /></div></div>"
            template_2 += "<div class='right' style='padding-left: 15px;width:370px;'><h3 style='margin-bottom: 5px;'>" + val.title + '</h3>'
            template_2 += '<p>' + val.shortdescription.substr( 0, 100 ) + "... <span class='red'>(meer)</span>"
            template_2 += '<dl><dt>Waar</dt><dd>' + val.address + '</dd></dl><dl>'
            template_2 += '<dt>Wanneer</dt><dd>' + val.calendarsummary + '</dd></dl></p><br />'
            template_2 += '</div></li>'
            used.push( val )
          }

          if ( $.inArray( val, used ) < 0 ) {
            template_3 += "<li rel='detail:" + val.cdbid + "'>"
            template_3 += "<div class='left' style='width:162px;'><img src='" + (val.thumbnail || 'images/no-image.jpg') + "' alt='" + val.title + "' /></div>"
            template_3 += "<div class='right' style='padding-left: 20px;width:280px;'><h3 style='margin-bottom: 10px;'>" + val.title + '</h3>'
            template_3 += '<p>' + val.shortdescription.substr( 0, 100 ) + "... <span class='red'>(meer)</span></p>"
            template_3 += '</div></li>'
          }
        })

        $( '#highlight_1' ).append( template_1 + '</ul>' )
        $( '#highlight_2' ).append( template_2 )
        $( '#highlight_3' ).append( template_3 + '</ul>' )

        $( '#slider' ).bxSlider({
          prev_image: 'images/btn_arrow_left.jpg',
          next_image: 'images/btn_arrow_right.jpg',
          pause: 7500,
          pager: false,
          auto: true
        })
      }
    })
    */
  }
}

Lokeren.search = function( e ) {
  e.preventDefault()

  var path = []

  $( this ).find( 'input[type!=submit], select' ).each( function() {
    var checked = $( this ).is( 'input[type=checkbox]' )
                  ? $( this ).is( ':checked' )
                  : true,
            key = $( this ).attr( 'name' ),
            val = checked ? $( this ).val() : null

    var path_keys = $.map( path, function( v ) {
      return v.split( ':' ).first()
    })

    if ( $.inArray( key, path_keys ) > -1 ) {
      $.each( path_keys, function( i, e_key ) {
        if ( val && key == e_key ) path[ i ] += ';' + val
      })
    } else {
      if ( val && key !== 'q' ) val = [ key, val ].join( ':' )
      if ( val && val !== '' ) path.push( val )
    }
  })

  $( document ).trigger( 'close.facebox' )
  if ( path.length > 0 ) $.history.load( path.join( '|' ) )
}

Lokeren.initializers.history = function( context ) {
  $.history.init( function( path ) {
    $( '#mainform input:first-child', context ).val( path )
    $( '#center > #ajax', context ).trigger( 'update', [ path ] )
  })
}

Lokeren.initializers.calendar = function( context ) {
  $( '#calendar', context ).datepicker({
    closeText: 'Sluiten',
    prevText: '?',
    nextText: '?',
    currentText: 'Vandaag',
    monthNames: [ 'januari', 'februari', 'maart', 'april', 'mei', 'juni',
      'juli', 'augustus', 'september', 'oktober', 'november', 'december' ],
    monthNamesShort: [ 'jan', 'feb', 'maa', 'apr', 'mei', 'jun',
      'jul', 'aug', 'sep', 'okt', 'nov', 'dec' ],
    dayNames: [ 'zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag' ],
    dayNamesShort: [ 'zon', 'maa', 'din', 'woe', 'don', 'vri', 'zat' ],
    dayNamesMin: [ 'zo', 'ma', 'di', 'wo', 'do', 'vr', 'za' ],
    weekHeader: 'Wk',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: '',
    dateFormat: 'yy-mm-dd',
    onSelect: function( date ) {
      $.history.load( 'date:' + date )
    }
  })
}

Lokeren.initializers.advanced = function( context ) {
  $( '#left a.advanced', context ).live( 'click', function( e ) {
    $.facebox( "<div id='advanced'><form><h2>Geavanceerd Zoeken</h2><div><h3>Zoekterm</h3><input type='search' name='q' placeholder='Zoekterm' /></div><div id='categories'><h3>Categorie?n</h3></div><div><h3>Wanneer</h3><select name='datetype'><option value=''>Kies een datum uit deze lijst</option><option value='today'>Vandaag</option><option value='tomorrow'>Morgen</option><option value='thisweek'>Deze week</option><option value='thisweekend'>Dit weekend</option><option value='nextweekend'>Volgend weekend</option><option value='thismonth'>Deze maand</option><option value='next30days'>Volgende 30 dagen</option><option value='next3months'>Volgende 3 maanden</option></select></div><div><h3>Extra</h3><input type='checkbox' id='extra_2' name='age' value='18' /><label for='extra_2'>Enkel volwassenen</label><br /><input type='checkbox' id='extra_3' name='facility' value='3.12.0.0.0' /><label for='extra_3'>Toegangsfaciliteiten voor rolstoelgebruikers</label><br /><input type='checkbox' id='extra_4' name='facility' value='3.13.0.0.0' /><label for='extra_4'>Blindenvoorzieningen</label><br /><input type='checkbox' id='extra_5' name='facility' value='3.21.0.0.0' /><label for='extra_5'>Faciliteiten voor doven en gehoorgestoorden</label><br /><input type='checkbox' id='extra_6' name='permanent' value='false' /><label for='extra_6'>Geen doorlopend aanbod</label></div><input type='submit' value='Geavanceerd Zoeken' /></form></div>" )

    if ( ![].get( 'categories' ).first() ) {
      UitDatabank.request({
        cbk: function( data, status, xhr ) {
          var headings = $.map( data, function( a ) {
            if ( a.heading ) return a.heading.split( '; ' )
          })

          $.each( headings.unique(), function( i, val ) {
            $( '#categories' ).append( "<input type='checkbox' id='heading_" + (i + 1).toString() + "' name='heading' value='" + val.toLowerCase() + "' /><label for='heading_" + (i + 1).toString() + "'>" + val.capitalize() + " <span class='count'>(" + headings.u_count( val ) + ')</span></label>' + '<br />' )
          })

          ;[ $( '#categories' ).html() ].store( 'categories' )
        }
      })
    } else {
      $( '#categories' ).html( [].get( 'categories' ).first() )
    }

    $( '#advanced > form', context ).submit( Lokeren.search )
  })
}

Lokeren.initializers.semiAdvanced = function( context ) {
  $( '#semiadvanced > form', context ).submit( Lokeren.search )
}

Lokeren.initializers.eventListeners = function( context ) {
  $( 'body', context ).ajaxStart( function() {
    $( this ).prepend( "<div id='loading'>Laden...</div>" )

    $( '#loading', context ).live( 'click', function( e ) {
      $( this ).hide()
    })
  })

  $( 'body', context ).ajaxStop( function() {
    $( '#loading', context ).remove()
  })

  $( '#mainform', context ).live( 'submit', function( e ) {
    $.history.load( $( this ).find( 'input:first-child' ).val() )
    e.preventDefault()
  })

  $( '#center > #ajax', context ).bind( 'update', function( e, path ) {
    $( this ).siblings().remove()

    var page = $( this ),
         req = { args: {} }

    if ( !( typeof path === 'array' ) ) path = path.split( '|' )

    if ( path.first() === '' ) {
      Lokeren.welcome()
      return
    } else if ( path.first().match( /^detail:.+$/i ) ) {
      req.url = 'http://build.uitdatabank.be/api/event/' + path.first().match( /^detail:(.+)$/ ).last()
    } else {
      $.each( path, function( i, val ) {
        if ( val.match( /^[a-z]+:.+$/i ) ) {
          req.args[ val.match( /^([a-z]+):.+$/i ).last() ] = val.match( /^[a-z]+:(.+)$/i ).last()
        } else {
          req.args.q = val
        }
      })
    }

    req.cbk = function( data, status, xhr ) {
      if ( !data || data.length === 0 ) {
        page.after( "<div><span class='red'>Geen resultaten gevonden</span></div>" )
        return
      }

      var template

      if ( path.first().match( /^detail:.+$/i ) ) {
        template = UitDatabank.parseDetails( data.event )
      } else {
        template = UitDatabank.parseResults( data )
      }

      page.siblings().remove()
      page.after( template )
    }

    UitDatabank.request( req )
  })
}

Lokeren.initializers.linkRelations = function( context ) {
  $( 'li[rel]', context ).live( 'click', function( e ) {
    var path = $( this ).attr( 'rel' )

    if ( !( typeof path === 'array' ) ) path = path.split( '|' )
    if ( path.first() === '' ) delete path.first()

    $.history.load( path.join( '|' ) )
  })

  $( 'a[rel]', context ).live( 'click', function( e ) {
    switch( $( this ).attr( 'rel' ) ) {
    case 'external':
      e.preventDefault()
      window.open( $( this ).attr( 'href' ) )
      break
    case 'back':
      window.history.back()
      break
    default:
      break
    }
  })
}

UitDatabank.apikey = '9b902f8f-7aa6-4679-8f4c-3edf0c096023'

UitDatabank.request = function( req ) {
  var url = req.url || 'http://build.uitdatabank.be/api/events/search',
     args = req.args || {},
   method = req.method || 'GET',
     type = req.type || 'jsonp',
      cbk = req.cbk || function() {}

  args.key = this.apikey
  args.format = 'json'
  args.zip = '9160'
  //args.city = 'Lokeren'

  $.ajax({ url: url, data: args, dataType: type, type: method, success: cbk })
}

UitDatabank.addRequest = function( req ) {
  this.requests.push( req )
}

UitDatabank.executeRequests = function() {
  var self = this

  $.each( self.requests, function() {
    self.request( this )
  })
}

UitDatabank.parseResults = function( data ) {
  var template = '<ul>'

  $.each( data, function( i, val ) {
    template += "<li id='" + val.id +"' rel='detail:" + val.cdbid + "'>"
    template += '<h3>' + val.title + '</h3>'
    template += '<p>' + val.shortdescription + '</p><dl>'
    template += '<dt>Waar</dt><dd>' + val.address + '</dd></dl><dl>'
    template += '<dt>Wanneer</dt><dd>' + val.calendarsummary + '</dd></dl></li>'
  })

  template += '</ul>'

  return template
}

UitDatabank.parseDetails = function( event ) {
  var template = '',
        detail = event.eventdetails.eventdetail,
       contact = event.contactinfo,
      location = event.location.address.physical

  var price = detail.price
              ? detail.price.pricedescription
              : null,

  organiser = event.organiser
              ? (event.organiser.actor
                 ? event.organiser.actor.actordetails.actordetail.title
                 : event.organiser.label)
              : null,
    address = [location.street, location.housenr].join( ' ' ) + ', ' +
              [location.zipcode, location.city].join( ' ' )

  template += detail.title
              ? '<h2>' + detail.title + '</h2>'
              : ''
  template += '<div>'
  template += detail.media
              ? "<img src='" + detail.media.file.hlink + "' alt='Thumbnail' />"
              : ''
  template += detail.longdescription
              ? '<p>' + detail.longdescription + '</p>'
              : '<p>' + detail.shortdescription + '</p>'
  template += '</div>'
  template += organiser
              ? '<dl><dt>Organisator</dt><dd>' + (contact.url && contact.url.value
                                                  ? "<a rel='external' href='" + contact.url.value +"'>" + organiser + '</a>'
                                                  : organiser) + '</dd></dl>'
              : ''
  template += address
              ? '<dl><dt>Waar</dt><dd>' + address + '</dd></dl>'
              : ''
  template += detail.calendarsummary
              ? '<dl><dt>Wanneer</dt><dd>' + detail.calendarsummary + '</dd></dl>'
              : ''
  template += price
              ? '<dl><dt>Prijs</dt><dd>' + price + '</dd></dl>'
              : ''
  template += contact.mail
              ? "<dl><dt>Mail</dt><dd><a href='mailto:" + (contact.mail.value || contact.mail) + "'>" + (contact.mail.value || contact.mail) + '</a></dd></dl>'
              : ''
  template += contact.phone
              ? '<dl><dt>Tel</dt><dd>' + ($.isArray(contact.phone)
                                          ? contact.phone.join( ', ' )
                                          : (contact.phone.value || contact.phone)) + '</dd></dl>'
              : ''
  template += "<p style='text-align: center;'><a rel='back'>&larr; Terug</a></p>"

  return template
}