$(function () {
  $('.picinfo').each(function () {
    // options
    var distance = 5;
    var time = 250;
    var hideDelay = 100;

    var hideDelayTimer = null;

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

    // 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);

      // 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({
          top: -20,
          left: 125,
          display: 'block' // brings the popup back in to view
        })

        // (we're using chaining on the popup) now animate its opacity and position
        .animate({
          top: '-=' + distance + 'px',
          opacity: 1
        }, time, 'swing', function() {
          // once the animation is complete, set the tracker variables
          beingShown = false;
          shown = true;
        });
      }
    }).mouseout(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;
        popup.animate({
          top: '-=' + distance + 'px',
          opacity: 0
        }, 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);
    });
  });
});

jQuery.preloadCssImages = function(settings){
	var settings = jQuery.extend({
		statusTextEl: null,
		statusBarEl: null
	}, settings);
	
	var allImgs = [];//new array for all the image urls  
	var k = 0; //iterator for adding images
	var sheets = document.styleSheets;//array of stylesheets
	
	for(var i = 0; i<sheets.length; i++){//loop through each stylesheet
		var cssPile = '';//create large string of all css rules in sheet
		var csshref = (sheets[ i ].href) ? sheets[ i ].href : 'window.location.href';
		var baseURLarr = csshref.split('/');//split href at / to make array
		baseURLarr.pop();//remove file path from baseURL array
		var baseURL = baseURLarr.join('/');//create base url for the images in this sheet (css file's dir)
		if(baseURL!="") baseURL+='/'; //tack on a / if needed
		if(sheets[ i ].cssRules){//w3 
			var thisSheetRules = sheets[ i ].cssRules; //w3 
			for(var j = 0; j<thisSheetRules.length; j++){ 
				if ( sheets[ i ].cssRules[ j ].constructor == 'CSSImportRule' ) { //added support for @imported css - credit: http://marcarea.com/
					var importSheetRules = sheets[ i ].cssRules[ j ].styleSheet.cssRules; 
					for ( var x=0; x<importSheetRules.length; x++ ) { 
						cssPile+= importSheetRules[ x ].cssText; 
					} 
				} 
				else { 
					cssPile+= thisSheetRules[ j ].cssText; 
				} 
			} 
		} 
		else { 
			if ( sheets[ i ].imports.length > 0 ) { 
				for (var m=0; m<sheets[ i ].imports.length; m++) { 
					cssPile+= sheets[ i ].imports[ m ].cssText;
				} 
			} 
			else { 
				cssPile+= sheets[ i ].cssText; 
			} 
		}
		//parse cssPile for image urls and load them into the DOM
		var imgUrls = cssPile.match(/[^\(]+\.(gif|jpg|jpeg|png)/g);//reg ex to get a string of between a "(" and a ".filename"
		var loaded = 0; //number of images loaded

		if(imgUrls != null && imgUrls.length>0 && imgUrls != ''){//loop array\
			var arr = jQuery.makeArray(imgUrls);//create array from regex obj	 
			jQuery(arr).each(function(){
				allImgs[k] = new Image(); //new img obj
				allImgs[k].src = (this.charAt(0) == '/' || this.indexOf('http://')>-1) ? this : baseURL + this;	//set src either absolute or rel to css dir
				
				if(allImgs[k].src.lastIndexOf('http://')>0){allImgs[k].src = allImgs[k].src.split('%22')[1];} //fixed opera's source doubling
				
				$(allImgs[k]).load(function(){
					loaded++;
					//send updates to status elements if applicable
					if(settings.statusTextEl) {
						$(settings.statusTextEl).html('<span class="numLoaded">'+loaded+'</span> of <span class="numTotal">'+allImgs.length+'</span> loaded (<span class="percentLoaded">'+(loaded/allImgs.length*100).toFixed(0)+'%</span>) <span class="currentImg">Now Loading: <span>'+allImgs[loaded-1].src.split('/')[allImgs[loaded-1].src.split('/').length-1]+'</span></span>');
					}
					if(settings.statusBarEl) {
						var barWidth = $(settings.statusBarEl).width();
						$(settings.statusBarEl).css('background-position', -(barWidth-(barWidth*loaded/allImgs.length).toFixed(0))+'px 50%');
					}
				});
				k++;
			});
		}
	}//loop
	return allImgs;
}				

$.preloadCssImages();