/*
	jQuery myqallery with slider and loading pictures on click
	
*/
(function($){
	$.fn.mygallery = function(options) {

		var _this = this
		
		var id = '#gallery ';
		
		var image_width = 132;
		var image_height = 90;
		

		
		_bind = function( ){
			$( id + '.previousPic' ).click( previousOnClick );
			$( id + '.nextPic' ).click( nextOnClick );
			
		}
		
		function showAndSelect( elem )
		{
			
			
			
			$( id + '.loadImage' ).removeClass( 'active' );
			
			$( elem ).addClass( 'active' );	
			
			linkImage = $( elem ).children( ).attr( 'src').replace( 'small', 'big' );
			
			$( '.main-picture', id ).children().remove( );
			
			
			$( '.main-picture', id ).append( "<div id='loadingGallery'><img src='/images/ajax-loader.gif' border='0' /><br/> Loading image! </div>" );
			

			img = new Image();
			
			$(img).load(function () {
      
				// set the image hidden by default    
      			$(this).hide();
    
				  $( '#loadingGallery' ).remove();	      			
			      // with the holding div of main picture, apply:
			      $( '.main-picture', id  )
			        // insert our image
			        .append(this);
			    
			      $(this).addClass( 'bigPicture' )  
			      // fade our image in to create a nice effect
			      $(this).fadeIn();
			      
			      $( id + '.bigPicture' ).mouseover( mouserOverImage );
			
					$( id + '.main-picture' ).hover(
						 
						function( )
						{},
						
						function( )
						{
							$('.hover-left').remove();
							$('.hover-right').remove();	
						}
			
					)
			      
			      
			    })
    
    			// if there was an error loading the image, react accordingly
    			.error(function () {
      				// notify the user that the image could not be loaded
      				$( '.main-picture', id ).append( "<div id='loadingGallery'><img src='/images/ajax-loader.gif' border='0' /><br/> Loading image error! </div>" );

    	  		})
    
    		// *finally*, set the src attribute of the new image to our image
    		.attr('src', linkImage )

    		
		}
		
		/* function for previous button */
		
		previousOnClick = function( ){
			
			correntMargin = $( '.slide ul', _this ).css( 'marginLeft' );
			
			correntMargin = parseInt( correntMargin.replace( 'px', '' ) );
			
			// if no margin was set before no animation
			if( correntMargin < 0 )
			{
				$( id + '.previousPic' ).unbind('click');
				$( id + '.nextPic' ).unbind('click');
				
				newMargin = correntMargin + image_width ;
				$( id + '.slide ul' ).animate( {"marginLeft" : newMargin + "px"}, 300, "linear", _bind );
			}
			
				
		}
		
		/* function for next button */
		
		nextOnClick = function( ){
			
			pictures = $( id + '.slide ul' ).children( )
			maxMargin  = ( pictures.length - 1 ) *  image_width * -1 ;
			
			correntMargin = $( id + '.slide ul' ).css( 'marginLeft' );
			
			correntMargin = parseInt( correntMargin.replace( 'px', '' ) );
			
			// if maxMaring is reached no animation
			if( correntMargin > maxMargin )
			{
				$( id + '.previousPic' ).unbind('click');
				$( id + '.nextPic' ).unbind('click');
				
				newMargin = correntMargin - image_width ;
				$( id + '.slide ul' ).animate( {"marginLeft" : newMargin + "px"}, 300, "linear", _bind  );
			}
		
		}
		
		
		/* function for next button form picture */
		nextShownOnClick = function( ){
			
			imgSelect = $(  id + '.active' ).parent().next( );
			showAndSelect( imgSelect.children( ) )
			
			
				
		}
		
		/* function for previous button form picture */
		previousShownOnClick = function( ){
			
			imgSelect = $(  id + '.active' ).parent().prev( );
			showAndSelect( imgSelect.children( ) )

		}
		
		/* function for picture click */
		
		pictureOnClick = function ( ){

			showAndSelect( this )
			
		} 
		
		
		/* function for main image mouserover */
		
		mouserOverImage = function ( )
		{
			//get image size
			imgwidth = $(this).width( );
			imgheight = $(this).height( );
			//padLink = imgheight / 2 - 10;
			
			leftmargin = $( '.main-picture', id ).children().position( ).left ;
			topmargin = $( '.main-picture', id ).children().position( ).top ;

			if( $( '.hover-right' ).length )
			{  }
			else
			{
				pictures = $(  id + '.active' ).parent( );
				
				picAll = $( id + '.slide ul' ).children( ).length
				picNext = pictures.nextAll( ).length		
				
				if( picAll > ( picNext + 1 ) )
				{
					$( '.main-picture', id ).append( "<div class='transp hover-left previousPicShown' style='display:none; position:absolute; left: " + leftmargin +"px; top: " + topmargin +"px; height: " + imgheight +"px; width: 80px; '>"+ 
													"<a href='javascript:void(0)'  ><img src='/images/prevArrow.png' border='0' /></a>"+
												"</div>" );
												
					$( '.previousPicShown' ).click( previousShownOnClick )
					
					$( '.hover-left' ).fadeIn();
				}
												
			
			
				// if maxMaring is reached no animation
				if( picNext > 0 )
				{			
					$( '.main-picture', id ).append( "<div class='transp hover-right nextPicShown' style='display:none; position:absolute; right: " + leftmargin +"px; top: " + topmargin +"px; height: " + imgheight +"px; width: 80px; '>"+ 														
													"<a href='javascript:void(0)' ><img src='/images/nextArrow.png' border='0' /></a>"+
												  "</div>" );
												  
					 $( '.nextPicShown' ).click( nextShownOnClick )
					 
					 $( '.hover-right' ).fadeIn();
				}
				
				
			}
		}
	
		
		$( id ).parent().append( "<div id='loadingGallery'><img src='/images/ajax-loader.gif' border='0' /><br/> Loading gallery! </div>" );
		
		$( id + '.previousPic' ).click( previousOnClick );
		$( id + '.nextPic' ).click( nextOnClick );
		$( id + '.loadImage' ).click( pictureOnClick );
		
		
		
		$( id + '.bigPicture' ).mouseover( mouserOverImage );
			
		$( id + '.main-picture' ).hover(
			 
			function( )
			{},
			
			function( )
			{
				$('.hover-left').remove();
				$('.hover-right').remove();	
			}

		)
		
		$(window).load(function () {
			$( '#loadingGallery' ).remove();
			$( id ).css( 'visibility', 'visible' );
	
			
		});
		

		
		
	};
	
})(jQuery);