$(document).ready(function (){
	/* Initiallizing */
	background_img=new Image();displayed=false;loading=false;
	/* Adding Function for Commenting */
	$('#commentform textarea#data').before("<a href='#comment_this' id='comment_selected'>Click to comment current photo.</a>");
	$('.the_comment p').each(function(){
		var pre_comment=$(this).html();
		pre_comment=pre_comment.replace(/\[photo: (.+)\]/g,"<a id='$1_go' class='gotoPhoto' href='#photo_$1'>@photo $1:</a>");
		$(this).html(pre_comment);
	});
	/* Process the HTML */
	$('#image_frame').html('<div class="photo"><a class="photo_border"></a></div>')
	$('ul.gallery_demo li:first-child').addClass("first");
	$('ul.gallery_demo li:last-child').addClass("last");
	$('ul.gallery_demo').css('width',$('ul.gallery_demo').children().size()*90);
	$('ul.gallery_demo li img').fadeIn();

	/* Displaying to PhotoFrame */
	function displaypic(tmp){
		var load_img=new Image();
			load_img.src=tmp;
		var img_height=load_img.height;
		var img_width=load_img.width;
		var maxheight=400;
		var maxwidth=680;
			loading=true; //Global
		
		/* Resizing */
		if (img_height>maxheight){
			if (img_width/img_height>maxwidth/(maxheight)){
				$('#main_image img').css('width',maxwidth);
				$('#main_image img').css('height',maxwidth*img_height/img_width);
			} else {
				$('#main_image img').css('height',maxheight);							
				$('#main_image img').css('width',maxheight*img_width/img_height);
				if ( (img_width/img_height) < 0.9 ) {
					if (img_height>maxheight+100) {
						$('#main_image img').css('height',maxheight+100);
						$('#main_image img').css('width',(maxheight+100)*img_width/img_height);
					} else
					{
						$('#main_image img').css('height',img_height)
						$('#main_image img').css('width',img_width)
					};
				}
			}
		} else {
			if (img_width>maxwidth){
					$('#main_image img').css('width',maxwidth);					
					$('#main_image img').css('height',maxwidth*img_height/img_width);					
				} else {
					$('#main_image img').css('width',img_width);
					$('#main_image img').css('height',img_height);
				}
		}
		/* Loaded, Display */
		$('#image_frame .photo').fadeIn();
		frameheight=$('#main_image img').height(); if (frameheight<350) {frameheight=350;};
		$('#image_frame').animate({height:frameheight+35},400);
		$('#image_frame .photo').css("width",$("#main_image img").width()+14);
		loading=false;

	}/*DisplayPic*/

	/* Hover to Preload Images */
	$('ul.gallery_demo li a').hover(function(){preloading($(this).attr('href').slice(1,-3)+"jpg");});
	
	/*Click on Thumbnails*/
	$('ul.gallery_demo li a').click(function(){
		displayed=false; background_img.src=$(this).attr('href').slice(1,-3)+"jpg"; //Background Image: If Loaded, Display.

		/* Hide Photo and Change Active to Current */
		$('#image_frame .photo').css('display','none');
		$('#image_frame .photo a.photo_border img').remove();
		$('ul.gallery_demo li.active').removeClass("active");
		$(this).parent().addClass("active");
		$('#image_frame .photo a.photo_border').attr({'href':$(this).attr('rel'),'target':'_blank'})
			.html("<img src='" + $(this).attr('href').slice(1,-3)+"jpg"+ "' />")
		
		/* Display Title */
		var alt_title=$('ul.gallery_demo li.active img').attr('alt');
		$('#image_title').html("<p>"+alt_title.replace(/( \| )/g,"<br/>")+"</p>");
		/* Display Pic */
		displaypic($(this).attr('href').slice(1,-3)+"jpg");
		
		/* Scroll the List */
		var photo_li = $('ul.gallery_demo li');
		var scroll_width=photo_li.width()+parseInt(photo_li.css('margin-left'))+parseInt(photo_li.css('margin-right'));
		var list_left = $('div.list').offset().left;
		var list_right= $('div.list').offset().left+$('div.list').width();

		if ($('ul.gallery_demo li.active').offset().left< list_left+scroll_width){
			$('div.list').animate(
				{scrollLeft: $('ul.gallery_demo li.active').offset().left-scroll_width-$('ul.gallery_demo li.first').offset().left},"slow")
			} 
		else if ($('ul.gallery_demo li.active').offset().left> list_right-scroll_width){
			$('div.list').animate(
				{scrollLeft: 
				 $('ul.gallery_demo li.active').offset().left+scroll_width*2-$('ul.gallery_demo li.first').offset().left-$('div.list').width()}
				,"slow")
		};
		/* Preload Previous&Next */
		if (!($(this).parent().hasClass('last'))){preloading($(this).parent().next().children('a').attr('href').slice(1,-3)+"jpg")};
		if (!($(this).parent().hasClass('first'))){preloading($(this).parent().prev().children('a').attr('href').slice(1,-3)+"jpg")}; 
	});

	/*Previous Image*/
	$('a#nav_prev').click(function(){
		var activepic = $('ul.gallery_demo li.active');
		var prevpic   = activepic ;
		
		if ( activepic.hasClass('first') && activepic.hasClass('last') ){
			/*Do nothing*/} 
		else if (activepic.hasClass('first')) {
			prevpic = $('ul.gallery_demo li:last-child');
		} else {
			prevpic = activepic.prev();
		}
		
		activepic.removeClass('active');
		prevpic.addClass('active');
		$('ul.gallery_demo li.active a').click();
	});

	/*Next Image*/		
	$('a#nav_next').click(function(){
		var activepic = $('ul.gallery_demo li.active');
		var nextpic   = activepic;
		
		if ( activepic.hasClass('first') && activepic.hasClass('last') ){
			/*Do nothing*/}
		else if (activepic.hasClass('last')) {
			nextpic = $('ul.gallery_demo li:first-child');
		} else {
			nextpic = activepic.next();
		}
		
		activepic.removeClass('active');
		nextpic.addClass('active');
		$('ul.gallery_demo li.active a').click();
	});

	/*Comment Selected*/
	$('#comment_selected').click(function(){
		var selected_tag='['+$('ul.gallery_demo li.active').attr('id')+']\n'
		selected_tag=selected_tag.replace(/_/g,': ')
		$('#commentform textarea#data').attr('value',$('#commentform textarea#data').attr('value')+selected_tag)
	});

	/*Go to Photo*/
	$('a.gotoPhoto').click(function(){
		var linkid=$(this).attr('id').slice(0,-3);
		$('ul.gallery_demo li#photo_'+linkid+' a').click();
	}).hover(function(){
		var linkid=$(this).attr('id').slice(0,-3);
		var tmpimg = "<img src='"+$('ul.gallery_demo li#photo_'+linkid+' img').attr('src')+"' class='comment_preview' style='display:none'/>";
		preloading($('ul.gallery_demo li#photo_'+linkid+' a').attr('href').slice(1,-3)+"jpg");
		var tmpparent=$(this).parents('li:first');
		$(tmpparent).prepend(tmpimg);
		$('ol img.comment_preview').fadeIn('normal');
	},function(){
		$('ol img.comment_preview').fadeOut('normal',function(){$(this).remove()});
	})
/*Big Pic onLoad*/
$(background_img).load(function(){
		if (displayed==false&&loading==false) displaypic(background_img.src);
        $('#image_frame img').css('border','5px solid white');
		displayed=true;
	});
		
		setTimeout(function(){$('div.list').fadeIn();$('.nav').fadeIn()},500);
		setTimeout(function(){$('ul.gallery_demo li:first-child a').click()},500);
	});