jQuery.noConflict();
(function($){
window.create_gallery_link = function(i) {
	a_tag = $('<a />');
	a_tag
		//.html($('span.thumb_src',this).text())
		.html('')
		.attr({
			href: '#',
			div_index: i
		})
		.css({
			textIndent: '-1000em',
			display: 'block',
			overflow: 'hidden',
			width: 72,
			height: 72,
			float: 'left',
			padding: 3,
			margin:0,
			background: '#ffffff url("'+$('span.thumb_src',this).text()+'") center center no-repeat'
		})
		.click(function(){
			window.image_to_show = $(this).attr('div_index');
			window.div_length = $('div#gallery > div[id!=gallery_controls]').length-1;
			$('div#gallery > div[id!=gallery_controls]')
				.each(window.switch_gallery_image);
			return false;
		})
	;
	$('div#gallery_controls > span').append(a_tag,' ');
};
window.switch_gallery_image = function(i,b,c) {
	$(this).fadeOut('fast',function() {
		/* by using a setTimeout we can hold off on the fadeIn until all
		 * divs are faded out */
		window.fade_next = setTimeout(function() {
			$('div#gallery > div:eq('+window.image_to_show+')').fadeIn('fast');
			//delete window.fade_next;
			clearInterval(window.fade_next);
		}, 500);
	});
}; 
$(document).ready(function() {
	$('div#gallery')
		.find('> div')
			.hide()
			.end()
		.find('> br.clear')
			.remove()
			.end()
		.css({
			float: 'right',
			padding: 10,
			background: '#fff',
			width: 240,
			//height:	600 //280
		})
		.append('<div id="gallery_controls">'+
			'<span></span></div>')
		.find('> div#gallery_controls')
			.css({
				width: '240', //this helps with ie and hasDisplay
				float: 'none',
				paddingTop: 270,
				border: 0
			})
			.end()
		.find('> div[id!=gallery_controls]')
			.css({
				position: 'absolute',
				border: '4px solid #fff',
				margin: 0,
				width: 240,
				textAlign: 'center',
				background: '#ffffff'
			})
			.each(window.create_gallery_link)
			.find('img')
				.css({
					border: '1px solid #AEAEAE'
				})
				.end()
			.end()
		//there seems to be a px issue on the bottom of the image
		.find('img')
			.css('margin-bottom',-3)
			.end();
	;
	$('div#copy').prepend($('div#gallery'));
	$('div#gallery span a:eq(0)').click();
	$('div#gallery').append('<div style="clear:both; border:0"></div>');
	
	//handle internet explorer's rendering issues....
	/*if ( $.browser.msie ) {
		alert('IE');
		$('div#gallery div#gallery_controls a').css({
			display: 'inline',
			float: 'left'
		});
	}*/
});
})(jQuery);