/**
 * jQuery Plugin
 * 
 * wdgPorfolio
 * 
 * Plugin para mostrar porfolio que soporta carga de imágenes en forma dinámica.
 * 
 * Espera una lista con la siguiente estructura:
 * 
 * <ul>
 *    <li class="work">
 *       <h2 class="ttl">Título</h2>
 *       
 *       <div class="details">
 *          <div ...></div>
 *          <div class="pics">
 *          </div>
 *       </div>
 *    </li>
 * </ul> 
 */


jQuery.fn.wdgGal = function()
{
	var oWdg = $(this);
	
	/*- Velocidad del efecto -*/
	var iSpeedShow = 0;
	var  iSpeedClose = 400;
	
   var oLightBox = {
      overlayBgColor: '#000',
      overlayOpacity: 0.7,
      imageLoading: '/share/img/lightbox-ico-loading.gif',
      imageBtnClose: '/share/img/lightbox-btn-close.gif',
      imageBtnPrev: '/share/img/lightbox-btn-prev.gif',
      imageBtnNext: '/share/img/lightbox-btn-next.gif',
      imageBlank : '/share/img/lightbox-blank.gif',
      containerResizeSpeed: 350,
      txtImage: 'Captura',
      txtOf: 'de'
   };


   /*- Muestro el preload -*/
   oWdg.addClass('loading');
   oWdg.html('<p>Cargando las fotografías... aguarda por favor.</p>');
	
	/*- Obtengo el ID del implemento y la cantidad de fotos -*/
   var sAttr = oWdg.attr('title');
	var aAttr = sAttr.split('|');
	var sId = aAttr[0];
	var iPics = aAttr[1];
	
	var sImageFolder = "/is-cnt/implementos-agricolas/" + sId + "/pics/";



   /*- -*/


   /*- Precargo las imágenes -*/
	
	var aPreload = Array();

   iA = 0;
	for (i = 1; i <= iPics; i++) 
	{
      aPreload[iA++] = '00' + i + '.thumbs.jpg';
		aPreload[iA++] = '00' + i + '.jpg';
	}
	

	$.preload(aPreload,
   {
      base: sImageFolder,
      onFinish: function()
      {
         /*- Genero el xhtml para mostrar la galería -*/
			htmlPicHolder =  '<div id="wdgGal-iw" style="display: none">';
			htmlPicHolder += '<div id="wdgGal-Main-w"><img id="wdgGal-Main" src="' + sImageFolder + '001.jpg" alt="" /></div>';
			htmlPicHolder += '<ul id="wdgGal-Thumbs">';
			
         iC = 1;
			for (i = 1; i <= iPics; i++)
			{
            htmlPicHolder += '<li class="c' + iC + '"><a href="' + sImageFolder + '00' + i + '.jpg" title=""><img src="' + sImageFolder + '00' + i + '.thumbs.jpg" alt="" /></a></li>';
            iC++;
				if (iC == 5) iC = 1;
			}

         htmlPicHolder += '</ul>';
			
			htmlPicHolder += '<p class="info">Haciendo un click sobre las fotografías pequeñas podés ampliarlas.</p>';
			htmlPicHolder += '</div>';

         oWdg.html(htmlPicHolder);
			
			oHolder = $('#wdgGal-iw', oWdg);

			/*- Agrego los eventos para ampliar cada foto -*/
         $('ul li a', oHolder).click(function()
         {
            /*- Saco todos los on activos -*/
				$('li a', oHolder).removeClass('on');

            /*- Activo el actual -*/
            $(this).addClass('on');
                  
            $('#wdgGal-Main', oWdg).attr('src', $(this).attr('href'));
				return false;
         });

			oWdg.removeClass('loading');
			oHolder.show(500);
			
			$('ul li:first a', oHolder).click();

      }
   });

};