/**
 * The bitExpert Playground
 * 
 * @version	$Revision: 125 $
 * @date	$Date: 2008-02-22 12:31:03 +0100 (Fr, 22 Feb 2008) $
 * @author bitExpert AG <info@bitExpert.de>
 */ 


(function() {
	/**
	 * Init function for the plugin
	 *
	 * @param jQuery object the Playground element to initialize
	 * @param object an object with configurations options for the plugin
	 */
	function init(poParent, poPluginOptions) 
	{
		// define default value for background refresh if value was not supplied
		var iBackgrdRefreshInt = ((undefined != poPluginOptions) &&
			(undefined != poPluginOptions.refreshint)) ?
			parseInt(poPluginOptions.refreshint) : 27500;

		if((undefined != poPluginOptions) && (undefined != poPluginOptions.swfsrc))
		{
			setupFlashComponent(poParent, poPluginOptions);
		}

		// set-up clickable area to slide in / out the submenu bar
		$('#clickarea').click(function() {
			if('closed' == $(this).parent().attr('class'))
			{
				// open the sub menu
          		submenuSlideOut(poParent, pbSlideGalleryOut);
          	}
          	else
          	{
          		// close the sub menu
          		submenuSlideIn(poParent);
          	}
        });
	}


	/**
	 * Load submenu entries into submenu bar
	 *
	 * @param jQuery Object the parent object
	 * @param string the submenu content to load
	 * @param function a callback function to ge triggerd after the loading has 
	 * 					finished
	 */
	function loadSubmenu(poParent, psSubContent, poCallbackFunction)
	{
		var oDummyDiv  = document.createElement('div');
		var $oDummyDiv = $(oDummyDiv);
		$oDummyDiv.css('visibility', 'hidden');
		$oDummyDiv.attr('id', 'dummy');
		$oDummyDiv.appendTo('body');
	
		// copy SubmenuContent into dummy div
		$oDummyDiv.html(psSubContent);
	
		// submenu contains elements?
		var sDummyWidth = '';
		if((0 != $('#submenu ul', poParent).children().length) || (0 == $oDummyDiv.width()))
		{
			sDummyWidth = (-1 * $oDummyDiv.width()) + 'px';
		}
		else
		{
			sDummyWidth = (-1 * $oDummyDiv.width()) + 5 + 'px';
		}
	
		$('#menucontainer', poParent).css('left', sDummyWidth);							
		$('#submenu', poParent).css('width', $oDummyDiv.width() + 'px');
		$('#submenu ul', poParent).empty();
	
		// copy HTML content from DummyDiv to submenu
		$('#submenu', poParent).html($oDummyDiv.html());					
		$oDummyDiv.remove();
		initAjaxContent('#submenu', poParent);
		
		if(null != poCallbackFunction)
		{
			poCallbackFunction();
		}
	}


	/**
	 * Slides the submenu out (makes it appear)
	 * 
	 * @param jQuery object the container to slide out (open)
	 * @param function a Callback function to be triggerd after the execution
	 */
	function submenuSlideOut(poContainer, pbSlideGalleryOut, poCallbackFunction)
	{
		// closing animation#
		if(false != pbSlideGalleryOut)
		{
			gallerySlideOut(poContainer, function() {
				$('#menucontainer', poContainer).animate({ left: '0px'}, 600,
				function() {
					$('#menucontainer', poContainer).attr('class', 'open');
					
					if(null != poCallbackFunction) {
						poCallbackFunction();
					}
				});
			});
		}
		else
		{
			$('#menucontainer', poContainer).animate({ left: '0px'}, 600,
				function() {
					$('#menucontainer', poContainer).attr('class', 'open');
					// alert(poCallbackFunction);
					if(null != poCallbackFunction) {
						poCallbackFunction();
					}
				});
		}
	}


	/**
	 * Slides the submenu back in (makes it disappear)
	 * 
	 * @param jQuery object the container to slide in (close)
	 * @param function a Callback function to be triggerd after the execution
	 */
	function submenuSlideIn(poContainer, poCallbackFunction)
	{
		var initialSubMenuWidth = $('#submenu', poContainer).width();
		// opening animation
		$('#menucontainer', poContainer).animate(
			{ left: ((-1 * initialSubMenuWidth) + 5) + 'px'},
			600,
			function() {
				$('#menucontainer', poContainer).attr('class', 'closed');
				
				if(null != poCallbackFunction) {
					poCallbackFunction();
				}
			});
	}


	/**
	 * Toggles the visibiliy of the gallery
	 * 
	 * @param jQuery object the container to slide out (close)
	 * @param function a Callback function to be triggerd after the execution
	 */
	function galleryToggle(poContainer, poCallbackFunction)
	{
		if(0 == $('#galleryContainer', poContainer).length)
		{
			// gallery does not exist: slide it in
			gallerySlideIn(poContainer, poCallbackFunction)
		}
		else
		{
			// gallery does exist: slide it out
			gallerySlideOut(poContainer, poCallbackFunction);
		}
	}
	
	/*
	 * minimizes or maximizes the gallery due to the current state
	 *
	 * @param jQuery object the container to move (minimize or maximize)
	 * @param function a Callback function to be triggerd after the execution
	 */
	function minmaxGallery(poContainer, poCallbackFunction)
	{
		if(141 == parseInt($('#galleryContainer').css("top")))
		{
			// gallery is minimized
			maximizeGallery(poContainer, poCallbackFunction);
		}
		else
		{
			// gallery is maximized
			minimizeGallery(poContainer, poCallbackFunction);
		}
	}

	/**
	 * Slides the gallery out
	 * 
	 * @param jQuery object the container to slide out (close)
	 * @param function a Callback function to be triggerd after the execution
	 */
	function gallerySlideOut(poContainer, poCallbackFunction)
	{
		// check if gallery exists. in case it does not exit the function
		if(0 == $('#galleryContainer', poContainer).length)
		{
			if(null != poCallbackFunction) {
					poCallbackFunction();
			}

			return;
		}

		// dynamically fetch the size of the galleryContainer
		var sHeight = $('#galleryContainer', poContainer).css('height');
		$('#galleryContainer', poContainer).animate(
			{top: sHeight},
			1500,
			function() {
				// remove the galleryContainer from DOM tree
				$(this).remove();
	
				if(null != poCallbackFunction) {
					poCallbackFunction();
				}
			});
	}
	
	
	/**
	 * minimizes the gallery, so that only 20 pixels are left to show
	 *
	 * @param jQuery object the container to minimize
	 * @param function a Callback function to be triggerd after the execution
	 */
	function minimizeGallery(poContainer, poCallbackFunction)
	{
		if(0 == $('#galleryContainer').length)
		{
			return;
		}
		
		$('#galleryContainer').animate({top: "141px"}, 1200,
			function(){
				$('.toggleGallery').css('background-image', 'url("images/pfeil_up.png")');
			});
	}
	
	
	/**
	 * maximizes the gallery, so that it is shown with full height
	 *
	 * @param jQuery object the container to minimize
	 * @param function a Callback function to be triggerd after the execution
	 */
	function maximizeGallery(poContainer, poCallbackFunction)
	{
		if(0 == $('#galleryContainer').length)
		{
			return;
		}
		
		$('#galleryContainer').animate({top: "0px"}, 1200,
			function(){
				$('.toggleGallery').css('background-image', 'url("images/pfeil_down.png")');
			});
	}


	/**
	 * Slides the gallery back in
	 * 
	 * @param jQuery object the container to slide in (open)
	 * @param function a Callback function to be triggerd after the execution
	 */
	function gallerySlideIn(poContainer, poCallbackFunction)
	{
		// check if gallery was already set-up
		if(0 == $('#galleryContainer', poContainer).length)
		{
			gallerySetup(poContainer);
		}
		else
		{
			$('#galleryContainer', poContainer).animate({top: '0px'}, 1500,
				function(){
				if(null != poCallbackFunction) {
					poCallbackFunction();
				}
			});
		}	
	}


	/**
	 * sets up the gallery for it`s usage
	 *
	 * @param jQuery object the container to slide in (open)
	 */
	function gallerySetup(poContainer)
	{
		var oGalleryDiv  = document.createElement('div');
		var $oGalleryDiv = $(oGalleryDiv);
		$oGalleryDiv.attr('id', 'galleryContainer');
		$oGalleryDiv.attr('class',
			'jcarousel-skin-gallery jcarousel-container jcarousel-container-horizontal');
		$oGalleryDiv.appendTo('div#playground');

		var oGalleryList = document.createElement('ul');
		var $oGalleryList = $(oGalleryList);
		$oGalleryList.attr('id', 'gallery');
		$oGalleryList.appendTo('div#galleryContainer');
		
		var oToggleDiv1 = document.createElement('div');
		var $oToggleDiv1 = $(oToggleDiv1);
		$oToggleDiv1.attr('id', 'toggleDiv1');
		$oToggleDiv1.attr('class', 'toggleGallery');
		$oToggleDiv1.appendTo('div#galleryContainer');
		
		var oToggleDiv2 = document.createElement('div');
		var $oToggleDiv2 = $(oToggleDiv2);
		$oToggleDiv2.attr('id', 'toggleDiv2');
		$oToggleDiv2.attr('class', 'toggleGallery');
		$oToggleDiv2.appendTo('div#galleryContainer');
		
		var oToggleDiv3 = document.createElement('div');
		var $oToggleDiv3 = $(oToggleDiv3);
		$oToggleDiv3.attr('id', 'toggleDiv3');
		$oToggleDiv3.attr('class', 'toggleGallery');
		$oToggleDiv3.appendTo('div#galleryContainer');
		
		$('.toggleGallery').click(function(){
			$('#galleryContainer').minmaxGallery(poContainer);
		});

		jQuery('#gallery').jcarousel(
		{
			vertical: false,
			scroll: 1,
			size: 0,
			visible: 4,
			buttonNextHTML: '<img src="images/next.png" alt="next" />',
			buttonPrevHTML: '<img src="images/prev.png" alt="prev" />',
			itemLoadCallback: galleryLoadItems
		});
	}


	/**
	 * Transfer the JSON Response from the gallery.php script into the html
	 * representation for the jCarousel gallery
	 *
	 * @param piCatId the ID of the category for which the gallery.php script
	 *                should be called
	 */
	function galleryLoadItems(carousel, state)
	{
		if (carousel.has(carousel.first, carousel.last))
		{
        	return;
    	}

		$.getJSON(
			'gallery.php',
			{iCatId: global_iCatId},
			function(paData) {
				carousel.size(paData.length);
				$.each(paData, function(i){
					carousel.add(carousel.first + i, decorateGalleryItem(this));
				});
				
				$('.gallery-item img').click(function() {
					var iArtId = $(this).attr('id');
					$.getJSON('front_content.php?idart=' + iArtId + '&ajax=1', function(paData){
						processJSONResponse(paData, false);
					});
				});
					
				$('#galleryContainer').animate({top: '0px'}, 1500);
			}
		);
	}


	/**
	 * Generates the html code needed for the image gallery items
	 *
	 * @param JSON object one of the objects returned by the gallery.php script
	 * @return string the resulting
	 */
	function decorateGalleryItem(poObject)
	{
		var sItemString = '<img src="' + poObject['path'] 
			+ '" alt="' + poObject['title'] 
			+ '" title="' + poObject['title']
			+ '" id="' + poObject['idart']
			+ '" width="166" height="116" />';
		
		// add div around images
		sItemString = '<div class="gallery-item">' + sItemString;

		// add image title
		sItemString += '<div class="img-descr"><p>' + poObject['title'] + 
			'</p></div></div>';

		return sItemString;
	}


	/**
	 * Sets up the flash movie component to display
	 *
	 * @param jQuery object the Playground element to initialize
	 * @param object an object with configurations options for the plugin
	 */
	function setupFlashComponent(poParent, poPluginOptions)
	{
		// create DOM element and set-up flash Div for usage
		var oFlashDiv  = document.createElement('div');
		var $oFlashDiv = $(oFlashDiv);
		$oFlashDiv.attr('id', 'flashreplace');
		$oFlashDiv.flash({
			src: ''+poPluginOptions.swfsrc,
			width: '884',
			height: '161',
			quality: 'high',
			scale: 'noscale',
			menu: 'true',
			wmode: 'transparent'
		}, {version: 9});
		$oFlashDiv.appendTo(poParent);
	}


	/**
	 * Method to initialize the Playground plugin
	 */
	jQuery.fn.setupPlayground = function(poPluginOptions) 
	{
		// init each element
		return this.each(function() {
			init($(this), poPluginOptions);
		});
	};


	/**
	 * Function to load the submenu contents into the playground
	 */
	jQuery.fn.loadSubmenu = function(psSubContent, poCallbackFunction) 
	{
		// init each element
		return this.each(function() {
			loadSubmenu($(this), psSubContent, poCallbackFunction)
		});
	};

	
	/**
	 * Function to slide in the submenu
	 */
	jQuery.fn.slideIn = function(poCallbackFunction) 
	{
		// init each element
		return this.each(function() {
			submenuSlideIn($(this), poCallbackFunction);
		});
	};

	
	/**
	 * Function to slide out the submenu
	 */
	jQuery.fn.slideOut = function(pbSlideGalleryOut, poCallbackFunction )
	{
		// init each element
		return this.each(function() {
			// slide in the submenu again
			submenuSlideOut($(this), pbSlideGalleryOut, poCallbackFunction);
		});
	};


	/**
	 * Function to slide in the gallery
	 */
	jQuery.fn.gallerySlideIn = function(poCallbackFunction) 
	{
		// init each element
		return this.each(function() {
			// slide out the submenu in case it is currently active
			var oPlayground = $(this);
			submenuSlideOut($(this), pbSlideGalleryOut, function(){
				// slide in the gallery layer
				gallerySlideIn(oPlayground, poCallbackFunction);
			});
		});
	};

	
	/**
	 * Function to slide out the gallery (identical to the slideOut function)
	 */
	jQuery.fn.gallerySlideOut = jQuery.fn.slideOut;


	/**
	 * Function to toggle the gallerys visbility
	 */
	jQuery.fn.galleryToggle = function(poCallbackFunction) 
	{
		// init each element
		return this.each(function() {
			// toggle the gallery
			galleryToggle($(this), poCallbackFunction);
		});
	};
	
	/**
	 * Function to minimize the gallery
	 */
	jQuery.fn.minimizeGallery = function(poCallbackFunction) 
	{
		// init each element
		return this.each(function() {
			// minimize the gallery
			minimizeGallery($(this), poCallbackFunction);
		});
	};
	
	/**
	 * Function to minimize or maximize the gallery
	 */
	jQuery.fn.minmaxGallery = function(poCallbackFunction) 
	{
		// init each element
		return this.each(function() {
			// minimize the gallery
			minmaxGallery($(this), poCallbackFunction);
		});
	};
})(); // execute the wrapper function