function FunAndLearning() {
  this.category = '';
  this.age = 0;
  this.duration = 0;
  this.age_slider = new Control.Slider('age_slider_handle','age_slider_track', 
    { range: $R(1,4), values:[1,2,3,4] });
  this.duration_slider = new Control.Slider('duration_slider_handle','duration_slider_track', 
    { range: $R(1,3), values:[1,2,3] });

  this.results = [];
  this.update_results = fnl_update_results.bind(this);

  this.search = fnl_search.bind(this);
  this.set_age = fnl_set_age.bind(this);
  this.set_duration = fnl_set_duration.bind(this);
  this.set_category = fnl_set_category.bind(this);

  this.age_slider.options.onSlide = function(value){ this.set_age(value); }.bind(this);
  this.duration_slider.options.onSlide = function(value){ this.set_duration(value); }.bind(this);

  this.get_results = fnl_get_results.bind(this);

  this.any_age_clicked = fnl_any_age_clicked.bindAsEventListener(this);
  this.any_duration_clicked = fnl_any_duration_clicked.bindAsEventListener(this);
  this.category_changed = fnl_category_changed.bindAsEventListener(this);
  $('fnl_age_toggle').observe('click', this.any_age_clicked);
  $('fnl_duration_toggle').observe('click', this.any_duration_clicked);
  $('fnl_category').observe('change',this.category_changed);

  $('find_an_activity_button').observe('click', function (e){Event.stop(e);this.search();Event.element(e).blur();}.bindAsEventListener(this));
}

function fnl_category_changed(e) {
  this.category = Event.element(e).value;
}

function fnl_search() {
  var url = '_ajax/search.asp';
  
  var options = $H({
    method: 'post',
    parameters: { category: this.category, age: this.age, duration: this.duration },
    onComplete: this.get_results
  });
  
  new Ajax.Request(url, options);  
}

function fnl_get_results(transport) {
  this.results = transport.responseText.evalJSON();
  this.update_results();
}

function fnl_set_age(value) {
  var labels = ['bất kỳ','bé yêu','bé chập chững đi','trẻ','cha mẹ'];

  $('age_slider').removeClassName('value'+this.age).addClassName('value'+value);
  $$('#age_container h2')[0].update('Tuổi: ' + labels[value]);
  this.age = value;

  if (this.age != 0) {
    $('fnl_age_toggle').checked = false;
    $('age_slider').removeClassName('disabled');
  } else {
    $('fnl_age_toggle').checked = true;
    $('age_slider').addClassName('disabled');
  }
}

function fnl_any_age_clicked(e) {
  if (!Event.element(e).checked)
    this.set_age(this.age_slider.value);
  else
    this.set_age(0);
}

function fnl_update_results() {
  var first = true;
  $('results').innerHTML = "";
  this.results.each(function(result){
    $('results').innerHTML += fnl_result_html(result, first);
    if (first) first=false;
  });
}

function fnl_thumbnail_path(result) {
  return WorkbenchPath + "images/content/FunAndLearning/activity_playhouse/" + result.category + "/thumbs/" + /\/([a-z_]+).asp$/i.exec(result.path)[1] + ".jpg";
}

function fnl_age_array(result) {
  var age = ['bé yêu','bé chập chững đi','trẻ','cha mẹ'];
  var ages = [];
  for (var i=0;i<4;i++) {
    if (result.age[i]==1) ages.push(age[i]);
  }
  return ages.join(", ");
}

function fnl_result_html(result, first) {
  var html = "";
  var duration = ['ngắn','trung bình','dài'];

  if (first) {
    html += "<div class=\"result first_result\">";
  } else {
    html += "<div class=\"result\">";
  }
  html += "<div class=\"thumb\"><a href=\"" + result.path + "\"><img src=\"" + fnl_thumbnail_path(result) + "\" alt=\"\" /></a></div>";

  html += "<div class=\"summary\">";
  html += "<h3><a href=\"" + result.path + "\">" + result.title + "</a></h3>";
  html += result.summary;
  html += "<p class=\"age\"><strong>Tuổi:</strong> " + fnl_age_array(result) + "</p>";
  html += "<p class=\"duration\"><strong>Duration:</strong> " + duration[result.duration-1] + "</p>";
  html += "</div>";

  html += "<div class=\"skills\"><p>" + result.skills + "</p></div>";
  html += "<div style=\"clear: both;\"></div>";
  html += "</div><!-- .result -->";

  return html;
}

function fnl_set_duration(value) {
  if (this.duration == value) return;
  var labels = ['bất kỳ','ngắn','trung bình','dài'];

  $('duration_slider').removeClassName('value'+this.duration);
  $('duration_slider').addClassName('value'+value);
  $$('#duration_container h2')[0].update('Thời lượng: ' + labels[value]);
  this.duration = value;

  if (this.duration != 0) {
    $('fnl_duration_toggle').checked = false;
    $('duration_slider').removeClassName('disabled');
  } else {
    $('fnl_duration_toggle').checked = true;
    $('duration_slider').addClassName('disabled');
  }
}

function fnl_set_category(value) {
  $('fnl_category').value = value;
  this.category = value;
}

function fnl_any_duration_clicked(e) {
  if (!Event.element(e).checked)
    this.set_duration(this.duration_slider.value);
  else
    this.set_duration(0);
}

function RecentActivities() {
  this.activities = [];
  this.load = load_recent_activities.bind(this);
  this.add = add_recent_activity.bind(this);
  this.update = update_recent_choices_nav.bind(this);
  this.load();
  this.update();
}

function load_recent_activities() {
  if (Cookie.get("recent_activities")!=null) this.activities = Cookie.get("recent_activities").evalJSON();
}

function add_recent_activity(activity) {
  if (this.activities.find(function(x){return x.title==activity.title;})==null) {
    this.activities.push(activity);
    if (this.activities.length>5) this.activities = this.activities.slice(this.activities.length-5);
    Cookie.set("recent_activities",this.activities.toJSON(),365);
  }
}

function update_recent_choices_nav() {
  var output='';
  this.activities.each(function(activity){
    output += "<p><a href=\"" + activity.path + "\"><img src=\"" + activity.thumbnail + "\" width=\"95\" height=\"69\" alt=\"" + activity.title + "\" /><br /><span>" + activity.title + "</span></a></p>"
  });

  $('recent_choices').innerHTML = output;
}