//Cufon!
Cufon.replace('ul#menu a', {
  hover: true
});
Cufon.replace('p', {
  hover: true
});
Cufon.replace('h2');
Cufon.replace('h3');

//Do I need object prototypes for the sets? Probably not.
var pxml = new Object();
var setShown = new Boolean();
var width = 0;

$(document).ready(function () {

  //Initiate good lookin' horizontal scroll bar.
  var element = $('#images').jScrollPane({
    horizontalDragMinWidth: 80,
    horizontalDragMaxWidth: 80
  });
  var api = element.data('jsp');

  //Load portfolio XML
  $.ajax({
    type: "GET",
    url: "config/portfolio.xml",
    dataType: "xml",
    success: function (xml) {
      //Might as well render the menu while we're here.
      $(xml).find('set').each(function () {
        $("li#contact-button-list-item").before("<li><a class=\"portfolio-link menu-item\" href=\"#\">" + $(this).attr("name") + "</a></li>");
      });
      //Save for later
      pxml = xml;

      Cufon.refresh();
    }
  });

  //Check if portfolio link/load set
  $('a.portfolio-link').live('click', function () {
    title = $(this).text(); //Get link text for set selection
    if ($('div#contact').is(":visible")) $('div#contact').fadeOut();
    //if ($('div#images').is(":hidden")) $('div#images').fadeIn();
    $('div#images').fadeOut(function () {
      width = 40;
      $('ul#images-list').html(""); //Clear ul element
      $(pxml).find("set[name=" + title + "] > img").each(function () {
        //$('ul#images-list').append("<li><a class=\"single-image\" href=\"img/portfolio/" + title.toLowerCase() + "/big/" + $(this).attr("filename") + "\"><img src=\"img/portfolio/" + title.toLowerCase() + "/thumbs/" + $(this).attr("filename") + "\" /></a></li>");
        $('<img>').attr({
          'class': 'thumbnail',
          'src': 'img/portfolio/' + title.toLowerCase() + '/thumbs/' + $(this).attr('filename'),
          'filename': $(this).attr('filename')
        }).load(function () {
          $(this).fadeIn(500);
          $(this).wrap('<li>');
          $(this).wrap('<a class="single-image" href="img/portfolio/' + title.toLowerCase() + '/big/' + $(this).attr('filename') + '">');
          width += this.width + 40;
          api.reinitialise({
            horizontalDragMinWidth: 80,
            horizontalDragMaxWidth: 80,
            contentWidth: width
          });
          console.log(api.getContentWidth());
          $('a.single-image').fancybox({
            'hideOnContentClick': true,
            'showCloseButton': false,
          });
        }).hide().appendTo($('ul#images-list'));
      });

      //Fancy Box
      $('a.single-image').fancybox({
        'hideOnContentClick': true,
        'showCloseButton': false,
        //'overlayOpacity': 0.5,
        //'overlayColor': '#000'
      });
      api.scrollTo(0, 0);
      $('div#images').fadeIn();
    });
  });

  //Menu highlight
  $('a.menu-item').live('click', function () {
    $('a.highlighted').removeClass('highlighted');
    $(this).addClass('highlighted'); //Change colour!
    Cufon.refresh();
  });

  //Contact!
  $('a#contact-button').live('click', function () {
    $('div#images').fadeOut(function () {
      $('div#contact').fadeIn();
    });
  });

  //Intro
  $('img#intro-image').live('click', function () {
    $('div#intro').fadeOut(function () {
      title = "Studio";

      width = 40;
      $(pxml).find("set[name=" + title + "] > img").each(function () {
        //$('ul#images-list').append("<li><a class=\"single-image\" href=\"img/portfolio/" + title.toLowerCase() + "/big/" + $(this).attr("filename") + "\"><img src=\"img/portfolio/" + title.toLowerCase() + "/thumbs/" + $(this).attr("filename") + "\" /></a></li>");
        $('<img>').attr({
          'class': 'thumbnail',
          'src': 'img/portfolio/' + title.toLowerCase() + '/thumbs/' + $(this).attr('filename'),
          'filename': $(this).attr('filename')
        }).load(function () {
          $(this).fadeIn(500);
          $(this).wrap('<li>');
          $(this).wrap('<a class="single-image" href="img/portfolio/' + title.toLowerCase() + '/big/' + $(this).attr('filename') + '">');
          width += $(this).width() + 40;
          api.reinitialise({
            horizontalDragMinWidth: 80,
            horizontalDragMaxWidth: 80,
            contentWidth: width
          });
          $('a.single-image').fancybox({
            'hideOnContentClick': true,
            'showCloseButton': false,
          });
        }).hide().appendTo($('ul#images-list'));
      });

      $('div#main').fadeIn();
    });



  });

  //Home
  $('a#home-button').live('click', function () {
    $('a.highlighted').removeClass('highlighted');
    $('#images-list').html(""); //Clear ul element
    $('div#contact').hide();
    $('div#intro').toggle();
    $('div#main').toggle();
  });
});