jQuery(document).ready(function($) {
	// We only want these styles applied when javascript is enabled
	//$('div.navigation').css({'width' : '300px', 'float' : 'left'});
	//$('div.image-content').css('display', 'block');
	$('div.image-content').show();
	
	var flickrGroupID = "1249218@N24"; // set flickr pool group id
	var numImages = 500; // number of images to download
	var poolUri = "http://api.flickr.com/services/rest/?method=flickr.groups.pools.getPhotos&api_key=778202969d3e868e915fa0947d45a966&group_id=" + flickrGroupID + "&extras=url_m%2C+url_sq%2C+date_taken%2C+description&per_page=" + numImages + "&format=json&jsoncallback=?"
	// get flickr pool images from flickr api, add to JQuery Cycle gallery
	$.jsonp({
		url: poolUri,
		type: "GET",
		dataType: "json",
		timeout: 8000,
		success: function(data) {
			$('#gallery-error').remove();
			//$('#gallery-error').remove();
			var items = data.photos.photo;
			var IE = /*@cc_on!@*/false;
			if(!IE){
				items.sort(sortByDateAscending); // TO FIX: for some reason, IE is throwing an error if array.sort is called
			};
			for (var i=0; i<items.length; i++){
				var html = "";
				var photoURI = "http://www.flickr.com/photos/" + items[i].owner + "/" + items[i].id + "/sizes/in/pool-" + flickrGroupID;
				var sourceMedium = items[i].url_m;		
				var sourceSquare = items[i].url_sq;
	    		// set html of image
	    		html += '<li><a class="thumb" name="' + i + '" href="' + sourceMedium + '">';
	    		html += '<img src="' + sourceSquare + /*'"title="' + items[i].description._content +*/ '" alt="' + items[i].title + '"/></a>';
	    		html += '<div class="caption"><div class="image-desc">' + items[i].description._content + '</div>';
	    		html += '<div class="download"><a href="' + photoURI + '" target="_blank">Download Image</a></div></div></li>';
	    		$("ul.thumbs").append(html); // add slide to gallery
			}
			
			gallerySetup();
		
		},
		error: function(xhr, textStatus, errorThrown){
            $('#gallery-error').show();
            $('#loading').css('background','none');
		}
	});
});

function gallerySetup(){
	// Initially set opacity on thumbs and add
	// additional styling for hover effect on thumbs
	var onMouseOutOpacity = 0.75;
	$('#thumbs ul.thumbs li').opacityrollover({
		mouseOutOpacity:   onMouseOutOpacity,
		mouseOverOpacity:  1.0,
		fadeSpeed:         '100',
		exemptionSelector: '.selected'
	});
	
	// Initialize Advanced Galleriffic Gallery
	var gallery = $('#thumbs').galleriffic({
		delay:                     2500,
		numThumbs:                 25,
		preloadAhead:              20,
		//enableTopPager:            true,
		//enableBottomPager:         false,
		maxPagesToShow:            6,
		imageContainerSel:         '#slideshow',
		controlsContainerSel:      '#controls',
		captionContainerSel:       '#caption',
		loadingContainerSel:       '#loading',
		renderSSControls:          true,
		renderNavControls:         true,
		playLinkText:              'Play Slideshow',
		pauseLinkText:             'Pause Slideshow',
		prevLinkText:              'Previous',
		nextLinkText:              'Next',
		nextPageLinkText:          'Next &rsaquo;',
		prevPageLinkText:          '&lsaquo; Prev',
		enableHistory:             false,
		autoStart:                 false,
		syncTransitions:           true,
		defaultTransitionDuration: 500,
		onSlideChange:             function(prevIndex, nextIndex) {
			// 'this' refers to the gallery, which is an extension of $('#thumbs')
			this.find('ul.thumbs').children()
				.eq(prevIndex).fadeTo(150, onMouseOutOpacity).end()
				.eq(nextIndex).fadeTo(150, 1.0);
			/*var width = "" + $('.slideshow img').width();
			alert(width);
			$('#controls').width(width);*/
		},
		onPageTransitionOut:       function(callback) {
			this.fadeTo(100, 0.0, callback);
		},
		onPageTransitionIn:        function() {
			this.fadeTo(100, 1.0);
		}
	});
	$('#thumbs').css('border','none');
	$('#thumbs').css('background','none');
	$('ul.thumbs').show(1000);
};

function sortByDateAscending(object1,object2) {	
	if (object1.datetaken > object2.datetaken) {
		return -1;
	}
	else if (object1.datetaken < object2.datetaken) {
		return 1;
	}
	return 0;
  }