var numThumbs;
var fbox;
var urlRoot = "http://piper.sandpiperrental.com";
var ie = jQuery.browser.msie;
var ie6 = ie && (parseInt(jQuery.browser.version) == 6);

function loadFP(idx) {  
  var el = $('#thumb_' + idx);
  var src = el.find('img')[0].src;
  var desc = el.find('.description');

  var rc = parseInt((desc[0].id.match(/\d+/))[0]);

  img = fbox.find('img');
  img.fadeOut(750, function() {
    img[0].src = src;
    img.load(function() { $(this).fadeIn(); });
  });

  fbox.find('.caption .body').html(desc.html() + "<a href='" + urlRoot + "/houses/" + rc + "'>View this property</a>");
  
}

function scrollTo(idx) {  
  var act = $('#scroller .thumbs a.active');
  var pi;

  if(act.length)
    pi = parseInt(act[0].id.match(/\d+/));
  else
    pi = 0;
  
  act.removeClass('active');
  var $img = act.find('img');
  var img = $img[0];
  var now = $('#thumb_' + idx);

  now.addClass('active');

  img = now.find('img')[0];

  // switch active dot in jump nav element
  var $qj = $('#scroller .nav a.active');

  if($qj.length) {
     var qj = $qj.find('img')[0];

     $qj.removeClass('active');
     qj.src = qj.src.replace(/blue/, 'gray');
     $qj = $('#qj' + idx);
     $qj.addClass('active');
     qj = $qj.find('img')[0];
     qj.src = qj.src.replace(/gray/, 'blue');
  }

  var hl = $('#scroller .highlighter');
  var slider = $('#scroller .slider');

  //  loadFP(idx);
  if(!ie6) {
    if(idx == 0) {
      hl.animate({ left: "15px" });
    } else if(idx == (numThumbs - 1)) {
      hl.animate({ left: "305px" });
    } else {
      hl.animate({ left: "160px" });
    }
  }

  adj = 1;
  if(idx == 0) adj = 0;
  else if(idx == numThumbs -1) adj = 2;

  var to = { left: -(145 * idx) + (145 * adj) + "px" };
  if(!ie6) {
    slider.animate(to, 250, "linear", function() {loadFP(idx)});
  } else {
	loadFP(idx);
  }

}

function scrollLeft() {
  var act = $('#scroller .nav a.active');  
  var idx;
  
  if(act.length)
    idx = parseInt(act[0].id.match(/\d+/));
  else
    idx = 0;
  
  if(idx == 0 || numThumbs < 2) return;   

  scrollTo(idx - 1);
}
function scrollRight() {
  var act = $('#scroller .nav a.active');  
  var idx;
  
  if(act.length)
    idx = parseInt(act[0].id.match(/\d+/));
  else
    idx = 0;
  
  if(idx == numThumbs - 1 || numThumbs < 2) return;

  scrollTo(idx + 1); 
}
function showPopup() {
}
function popupDetail() {
  var box = $(this).closest('.box');
  box.addClass('popup-active');
  setTimeout(showPopup, 100);
}
function hideDetail() {
  var box = $(this).closest('.box');
  box.removeClass('popup-active');
}

$(document).ready(function() {
  fbox = $('#featured');
  rbox = $('#results');

  numThumbs = $('#scroller .slider .thumb').length;
});

var lastTrigger;
$(function () {
  $('#results.thumbs .box').each(function () {
    // options
    var distance = 10;
    var time = 250;
    var hideDelay = 200;
    var zIndex = 100;

    var hideDelayTimer = null;

    // tracker
    var beingShown = false;
    var shown = false;
    
    var trigger = $(this);
    var popup = $('.popup', this);

    // a tradeoff with IE: either transparent PNG shadows or opacity here. Can't have both
    if(!ie) popup.css('opacity', 0);
    else distance = 0;

    var delayClosePopup = function() {
      // reset the timer if we get fired again - avoids double animations
      if (hideDelayTimer) clearTimeout(hideDelayTimer);
      
      // store the timer so that it can be cleared in the mouseover if required
      hideDelayTimer = setTimeout(function () {
        hideDelayTimer = null;
	var ap = {
          bottom: '+=' + distance + 'px'
	};
	if(!ie) { ap.opacity = 0; }
        popup.animate(ap, time, 'swing', function() {
          // once the animate is complete, set the tracker variables
          shown = false;
          // hide the popup entirely after the effect (opacity alone doesn't do the job)
          popup.css('display', 'none');
        });
      }, hideDelay);
    }

    // Hovering over another popup-enabled element will always clear the other's popup immediately
    trigger.eq(0).mouseover(function() {
      if(shown && lastTrigger[0] != trigger[0]) {
	popup.css('display', 'none'); shown = false;
       }
    });	

    // set the mouseover and mouseout on both element
    $([trigger.get(0), popup.get(0)]).mouseover(function () {
      // stops the hide event if we move from the trigger to the popup element
      if (hideDelayTimer) clearTimeout(hideDelayTimer);
      lastTrigger = trigger;

      var ap = { bottom: '+=' + distance + 'px' };
      if(!ie) { ap.opacity = 1; }
      // don't trigger the animation again if we're being shown, or already visible
      if (beingShown || shown) {
        return;
      } else {
        beingShown = true;

        // reset position of popup box
        popup.css({
          bottom: 170,
	  zIndex: zIndex ++,
          display: 'block' // brings the popup back in to view
        })

        // (we're using chaining on the popup) now animate it's opacity and position
        .animate(ap, time, 'swing', function() {
          // once the animation is complete, set the tracker variables
          beingShown = false;
          shown = true;
        });
      }
    }).mouseout(delayClosePopup);
  });
});