jQuery(document).ready(function($) {

	if (jQuery.browser.msie) { 
	  if(parseInt(jQuery.browser.version) == 6) { 
	  } 
	}


	
	
	$("ul.tabs").tabs("div.panes > div");



	$('ul.social').tabs('div#social_panes > div', {
		initialIndex: -1,
		effect: 'slide'
	});
	$('#social_panes a.close').click(function(){
		$(this).parent().slideUp('fast');
		$('ul.social li.current').removeClass('current');
	});
	

	$(function() { 

		// select #flowplanes and make it scrollable. use circular and navigator plugins 
	    $("#flowpanes").scrollable({size: 1, loop: true}).circular().navigator({ 

	        // select #flowtabs to be used as navigator 
	        navi: "#flowtabs", 

	        // select A tags inside the navigator to work as items (not direct children) 
	        naviItem: 'a', 

	        // assign "current" class name for the active A tag inside navigator 
	        activeClass: 'current' 

	    }).autoscroll({autoplay: true, interval: 3000});
		

	});
	
	/*
	$("div.image_tabs").tabs(".images > img", { 

	        // enable "cross-fading" effect 
	        effect: 'fade', 
	        fadeOutSpeed: "slow", 

	        // start from the beginning after the last tab 
	        rotate: true 

	    // use the slideshow plugin. It accepts its own configuration 
	    }).slideshow({autoplay: false});
*/	

	/*************************
	dynamic background image
	*************************/

	/*******************************************
	IMAGE LOADING FUNCTIONS
	*******************************************/
		$.fn.imageSize = function(width, height) {
			var img = $(this);
			stageRatio = $(window).width()/$(window).height();
			imageRatio = width/height;

			if (stageRatio > imageRatio) {
				// match image width and adjust height to fit
				img.width($(window).width());
				img.height($(window).width()/imageRatio);
			} else {
				// match image height and adjust width to fit
				img.height($(window).height());
				img.width($(window).height()*imageRatio);
			}

		}

		//http://stackoverflow.com/questions/51352/how-to-show-a-spinner-while-loading-an-image-via-javascript
		$.PreloadImage = function(imgSrc, callback){
			var img = new Image();
			img.src = imgSrc;
			img.onload = function() {
				var width = img.width;
				var height = img.height;
				callback(img, width, height);
				img.onload=function(){}; // clear onLoad, IE behaves irratically with animated gifs otherwise
			}
		}

		$.fn.loadSlideImg = function(callback) {
			var container = $(this);
			var imgsrc = $(this).attr('data-img-src');
			$.PreloadImage(imgsrc, function(img, width, height){
				$(container).hide();
				$(container).empty().removeClass('loading').append(img);

				//cache the image on load
				//and it's initial with/height ratio
				var image = $(img);

				//resize against initial values
				$(image).imageSize(width, height);

				//resize image on window resize
				$(window).bind('resize', function(){
					$(image).imageSize(width, height);
				});

				$(container).fadeIn(100,function(){	// do we need a fade in?
					if (callback) {
						callback();
					}
				});
			});
		}


	/*************************
	the main background image
	*************************/
	
$(window).load(function(){
	$('#backgroundimg').loadSlideImg();
	
});

		
});