$(document).ready(function() {

  // Names for random image shuffling link
  var names = [
    "shuffle",
    "random",
    "jumble",
    "untidy",
    "shift",
    "detour",
    "drift",
    "adjust",
    "switch",
    "change",
    "turn",
    "revolve",
    "modify",
    "variety",
    "conversion",
    "alter",
    "different",
    "regenerate",
    "alter",
    "next",
    "exchange",
    "revolution",
    "wax/wane",
    "veer",
    "transition"
  ];

  // Setup contact information qtips
  $.fn.qtip.styles.email_style = {
    background: "#CCC",
    color: "black",
    textAlign: "center",
    "font-size": "smaller",
    width: {
      max: 350,
      min: 0
    },
    border: {
      width: 5,
      radius: 0,
      color: "#CCC"
    },
    tip: "bottomLeft",
    name: "light"
  }
  var qt_show = {
    delay: 150,
    solo: true,
    when: {
      event: "mouseover"
    },
    effect: {
      type: "fade",
      length: 200 
    }
  };
  var qt_hide = {
    delay: 100,
    fixed: true,
    when: {
      event: "mouseout"
    },
    effect: {
      type: "fade", length: 100
    }
  };
  var qt_pos = {
    corner: {
      target: "topMiddle",
      tooltip: "bottomLeft"
    }
  };
  $(".db").qtip({
     content: 'You have your reasons:<br />dburton80 [at] gmail [dot] com<br /><a href="http://www.permanentcitrus.com">www.permanentcitrus.com</a>',
     style: "email_style",
     position: qt_pos,
     show: qt_show,
     hide: qt_hide
  })
  $(".sg").qtip({
     content: 'You have your reasons:<br />stefanigreenwood [at] yahoo [dot] com<br /><a href="http://www.stefanigreenwood.com">www.stefanigreenwood.com</a>',
     style: "email_style",
     position: qt_pos,
     show: qt_show,
     hide: qt_hide
  })
  // Functions for changing the left and right diptych image
  // based on the results of an AJAX request returning a
  // {
  //   'src':     'path to new image',
  //   'caption': 'image title/caption text'
  // }
  // JSON object.
  var changeLeft = function(data, textStatus) {
    $("#left").fadeOut(225, function() {
      $(this).attr("src", data.src);
    });
    $("#left-caption").fadeOut(225, function() {
      $(this).text(data.caption);
      $(this).fadeIn(225);
    });
  }
  var changeRight = function(data, textStatus) {
    $("#right").fadeOut(225, function() {
      $(this).attr("src", data.src);
    });
    $("#right-caption").fadeOut(225, function() {
      $(this).text(data.caption);
      $(this).fadeIn(225);
    });
  }
  $("#left, #right").load(function() {
    $(this).fadeIn(225);
  });

  // Setup randomized and sequential image display
  $("#left").click(function(ev) {
    var date = new Date();
    $.getJSON('random.php', {'from':'db', 'ms': '' + date.getTime()}, changeLeft);
    ev.preventDefault();
  });
  $("#right").click(function(ev) {
    var date = new Date();
    $.getJSON('random.php', {'from':'sg', 'ms': '' + date.getTime()}, changeRight);
    ev.preventDefault();
  });
  $("#diptych-shuffle").click(function(ev) {
    $("#left, #right").click();
    $(this).fadeOut(225, function() {
      i = Math.floor(Math.random() * names.length);
      $(this).text(names[i]);
      $(this).fadeIn(225);
    });
    ev.preventDefault();
  });
  $("#left-prev").click(function(ev) {
    $.getJSON('sequence.php', {'image':$("#left").attr("src"), 'direction':'prev'}, changeLeft);
    ev.preventDefault();
  });
  $("#left-next").click(function(ev) {
    $.getJSON('sequence.php', {'image':$("#left").attr("src"), 'direction':'next'}, changeLeft);
    ev.preventDefault();
  });
  $("#right-prev").click(function(ev) {
    $.getJSON('sequence.php', {'image':$("#right").attr("src"), 'direction':'prev'}, changeRight);
    ev.preventDefault();
  });
  $("#right-next").click(function(ev) {
    $.getJSON('sequence.php', {'image':$("#right").attr("src"), 'direction':'next'}, changeRight);
    ev.preventDefault();
  });

  // Setup image-only viewing
  $("#show").click(function(ev) {
    $(this).fadeOut(100, function() {
      $("#hide").fadeIn(125);
    });
    $(".nonessential").fadeIn(225);
    ev.preventDefault();
  });
  $("#hide").click(function(ev) {
    $(this).fadeOut(100, function() {
      $("#show").fadeIn(125);
    });
    $(".nonessential").fadeOut(225);
    ev.preventDefault();
  });

  // Display initial diptych
  $("#diptych-shuffle").click();
});