/**
 * 
 * @file	showbox.js
 * @ver		1.1
 * @date	05.06.2009
 * @author  .pm.
 * @purpose	Lightweight lightbox like interface to show an image gallery. Built for likemind.com website.
 * 
 */

 		var photoGallery = {
			
			  	galleryImages : [],
			  	galleryTitles : [],
				gallerySize : 0,
				currentPhoto : 0,
				
				init: function(){
					
					photoGallery.populateGallery();

							if (photoGallery.gallerySize > 0) {
								photoGallery.buildStructure();
								//populate the gallery
								
								
								//adjust the navigator buttons					
								photoGallery.hidePrevButton();
								photoGallery.hideNextButton();
								
								//activate the next-prev links
								$('#next-photo').click(function(){
									var showPhoto = photoGallery.currentPhoto + 1;
									
									if (showPhoto < photoGallery.gallerySize) {
										if (showPhoto > 0) {
											$('#prev-photo').show();
										}
										photoGallery.loadPhoto(showPhoto);
										photoGallery.currentPhoto++;
										photoGallery.hideNextButton();
									}
									return false;
								});
								
								$('#prev-photo').click(function(){
									var showPhoto = photoGallery.currentPhoto - 1;
									
									if (showPhoto > -1) {
										if (photoGallery.gallerySize > 1) {
											$('#next-photo').show();
										}
										photoGallery.loadPhoto(showPhoto);
										photoGallery.currentPhoto--;
										photoGallery.hidePrevButton();
									}
									return false;
								});
								
								$('.view-gallery a').click(function(){
									photoGallery.showGallery();
									return false;
								});
								
								$('#close-frame').click(function(){
									photoGallery.hideGallery();
									return false;
								});
								
								photoGallery.hideGallery();
								
								
							}//if	 
					
				},
				
				hidePrevButton : function(){
					// if on 1st photo, hide the prev button
					if(photoGallery.currentPhoto == 0 ) { 
						$('#prev-photo').hide();
					}
				},
				
				hideNextButton : function(){
					//if on the last photo, hide the next button
					if( photoGallery.currentPhoto == ( photoGallery.gallerySize - 1)){
						$('#next-photo').hide();
					}
				},
				
				loadPhoto: function(photoNumber){
					
					if(photoNumber > -1 && photoNumber < photoGallery.gallerySize){
					
							$('#photo').css('visibility','hidden');
							$('#prev-photo').css('left','-100px');
							$('#next-photo').css('right','-100px');
							$('#photo').empty(); 
							$("#photo-description").text('');
							
							var I = $("<img src='"+photoGallery.galleryImages[photoNumber]+"' />");
		
							I.appendTo('#photo');
								
							I.load(function(){
									var imgWidth  = $(this).width();
									var imgHeight = $(this).height();
									var n = imgWidth+'px';
									var m = imgHeight+40+'px';
									
									if ( $.browser.msie && $.browser.version == '7.0' ){ 
											//animations in IE7 are not smooth , so disabling them	
												$('#photo-frame').css({'width':n,'height':m});							
												$('#photo').css('visibility','visible')
												$('#prev-photo').css('left','10px');
												$('#next-photo').css('right','10px');
									}else{
											//show with animations
											$('#photo-frame').animate({'width':n},700).animate({'height':m},500, 'linear',function(){
												$('#photo').css('visibility','visible')
												$('#prev-photo').css('left','10px');
												$('#next-photo').css('right','10px');
		
											});

									}		
									
								//alert('here'+photoGallery.galleryTitles[photoNumber]+"ddd"+$("#photo-description").text());
								$("#photo-description").text(photoGallery.galleryTitles[photoNumber]);
									
									
							});	
		
					}else{
						//alert('invalid photo number supplied');
					}
					
				},
				
				showGallery : function(){
						$('#sb-wrapper').show();
						$('#sb-overlay').show();
						photoGallery.loadPhoto(0);
				},

				hideGallery : function(){
						$('#sb-wrapper').hide();
						$('#sb-overlay').hide();
				},
				
				populateGallery  : function(galleryId){
					photoGallery.gallerySize = $('#gallery li a').length;
						
					$('#gallery li a').each(function(i,val){
							photoGallery.galleryImages[i] = this.href;
							photoGallery.galleryTitles[i] = this.title;
					}); 

				},

				
				//buildStructure
				/* 
						<div id="sb-overlay" class="full-page"></div>
						<div id="sb-wrapper" class="full-page">
							<div id="sb-container" class="full-page" >
								<div id="sb">
									<div id="sb-inner">
										<div id="photo-frame">
											<p id="close-frame"><a href="#">Close</a></p>
											<a href="#" id="prev-photo">Prev image</a>
													<div id="photo"></div>	
											<a href="#" id="next-photo">Next image</a>
										</div>
									</div>
								</div>
							</div>
						</div>
				 */
				
				buildStructure : function(){
					//$('body').append('<div id="sb-overlay" class="full-page"></div><div id="sb-wrapper" class="full-page"><div id="sb-container" class="full-page" ><div id="sb"><div id="sb-inner"><div id="photo-frame"><p id="close-frame"><a href="#">Close</a></p><a href="#" id="prev-photo">Previous</a><div id="photo"></div><a href="#" id="next-photo">Next image</a></div> <div id="photo-description">Description</div></div></div></div>');
					$('body').append('<div id="sb-overlay" class="full-page"></div><div id="sb-wrapper" class="full-page"><div id="sb-container" class="full-page" ><div id="sb"><div id="sb-inner"><div id="photo-frame"><p id="close-frame"><a href="#">Close</a></p><a href="#" id="prev-photo">Previous</a><div id="photo"></div><div id="photo-description">Description</div><a href="#" id="next-photo">Next image</a></div> </div></div></div>');
				}
					

		}// photoGallery