jQuery(document).ready(function($) {
	
	//// gallery
	
	var fInitGallery = function() {
				
		var delay = 20;		// seconds
		var max_id = parseInt( $('.gly_item').length ) - 1;
		var cur_id = max_id;
		var cur_timeout = null;
	
		var fAdvanceSlide = function() {
			
			if ( cur_id >= max_id ) {
				cur_id = 0;
			} else {
				cur_id = parseInt( cur_id ) + 1;
			}
			
			fSlideEffect();
			fAutoPlay();
		};
		
		var fAutoPlay = function() {
			cur_timeout = setTimeout(
				function() {
					fAdvanceSlide();
				},
				( delay * 1000 )
			);
		};
		
		var fSlideEffect = function() {
	
			var gallery = $('#gly_btn_' + cur_id).parent();
	
			gallery.find('.gly_btn').removeClass('sel');
			$('#gly_btn_' + cur_id).addClass('sel');
			$('.gly_item').fadeOut();
			$('#gly_item_' + cur_id).fadeIn();
			
		};
		
		$('.gly_item').each(function() {
			
			var gallery = $(this).parent();
			var id = $(this).attr('id').replace('gly_item_', '');
			
			gallery.find('.gly_controls .inner').append(
				'<div class="gly_btn" id="gly_btn_' + id + '"><\/div>'
			);
			
			gallery.find('#gly_btn_' + id).click(function() {
				
				cur_id = id;
				fSlideEffect();
				
				if ( cur_timeout ) {
					clearTimeout( cur_timeout );
					fAutoPlay();
				}
				
			});
			
		});
						
		// initialize slideshow
		fAdvanceSlide();
		
	}
	
	var fSort = function( a, b ) {
		
		/* /
		// Sort Ascending
		var x = $(a).find('date').text();
		var y = $(b).find('date').text();
		/* */

		/* */
		// Sort Descending
		var x = $(b).find('date').text();
		var y = $(a).find('date').text();
		/* */
		
		return ( ( x < y ) ? -1 : ( ( x > y ) ? 1 : 0 ) );
	}
	
	$.get(
		'xml/gallery.xml',
		function( xml ) {
			
			var j = 0;
			
			// sort xml items by date
			var items = $(xml).find('item').sort( fSort );
			
			//// populate column
			
			/* var col_items = ( items.length < 5 ) ? items.length : 5;	// show 5 items max
			
			for ( j = 0; j < col_items; j++ ) {
				$('#col_apple').append('<p>' + $( items[j] ).find('title').text() + '<\/p>');
			} */
			
			//// populate slideshow
			
			var ss_items = ( items.length < 5 ) ? items.length : 5;		// show 3 items max
			
			var tmpl = null;
			var ss_item = null;
			
			for ( j = 0; j < ss_items; j++ ) {
				
				ss_item = $( items[j] );
				
				tmpl = $('#gly_template').clone();
				tmpl.removeAttr('id');
				tmpl.addClass('gly_item');
				tmpl.attr('id', 'gly_item_' + j);
				tmpl.find('p.title').html( ss_item.find('title').text() );
				tmpl.find('p.ss_content').html( ss_item.find('content').text() );
				
				var imgsrc = ss_item.find('image').text();
				if ( imgsrc ) {
					tmpl.find('img.gly_bg').attr( 'src', imgsrc );
				}
				
				tmpl.hide();
				
				$('#main_gallery').append( tmpl );
				
			}
			
			$('#main_gallery').append( $('#main_gallery').find('.gly_controls') );
			fInitGallery();
		}
	);
	
});