/*
 *         developed by Matteo Bicocchi on JQuery
 *         © 2002-2009 Open Lab srl, Matteo Bicocchi
 *			    www.open-lab.com - info@open-lab.com
 *       	version 1.0
 *       	tested on: 	Explorer and FireFox for PC
 *                  		FireFox and Safari for Mac Os X
 *                  		FireFox for Linux
 *         GPL (GPL-LICENSE.txt) licenses.
 */

(function($) {

    jQuery.fn.mbGallery = function(NewOptions) {
        return this.each(function() {
            $(this).hide();
            var galleryId = !this.id ? Math.floor(Math.random() * 100) : this.id;
            var origGallery = this;
            if (origGallery.initialized) return;
            origGallery.initialized = true;
            var gallery = $(this).clone();
            gallery.attr("id", "gall_" + galleryId);
            galleryId = gallery.attr("id");

            var closeThumbStrip, actualImg, actualThumb, thumbUnsel, thumbOver, thumbs, full, imgDesc;
            var opt = $.extend({}, $.fn.mbGallery.defaults, NewOptions);

            opt.thumbsBorder = opt.thumbsBorder + "px solid";
            var thumbSel = {
                thumbSel:
        {
            border: opt.thumbsBorder, borderColor: opt.thumbSelectColor
        },
                thumbUnsel:
        {
            border: opt.thumbsBorder, borderColor: opt.thumbStripColor
        },
                thumbOver:
        {
            border: opt.thumbsBorder, borderColor: opt.thumbOverColor
        }
            };
            $.extend(opt, thumbSel);
            if (opt.slideTimer < 2000)
                opt.slideTimer = 2000;

            thumbUnsel = opt.thumbUnsel;
            thumbOver = opt.thumbOver;

            // GETTING THE ELEMENTS FOR THE GALLERY FROM THE PAGE
            thumbs = gallery.find(opt.thumbnailSelector);
            full = gallery.find(opt.imageSelector);
            imgDesc = gallery.find(opt.descSelector);
            gallery.empty();

            if (opt.startFrom == "random")
                opt.startFrom = Math.floor(Math.random() * full.length);

            function preloadImg(i) {
                $(thumbloading).find("img").attr("src", "" + opt.iconFolder + "/loader.gif");
                var IMG_URL = $(full[i]).attr("src");
                var IMGOBJ = new Image();
                IMGOBJ.onload = function() {
                    $(thumbloading).find("img").attr("src", "" + opt.iconFolder + "/loaded.gif");
                    changePhoto(i);
                };
                IMGOBJ.onerror = function() {
                    alert("can't load " + IMG_URL);
                };
                IMGOBJ.src = IMG_URL;
            }

            var thumbPos = "";
            function setThumbPos(w) {
                var pos = 0;
                switch (opt.thumbStripPos) {
                    case "left":
                        pos = 0;
                        break;
                    case "center":
                        pos = ((w / 2) - (opt.thumbStripWidth / 2));
                        break;
                    case "right":
                        pos = (w - opt.thumbStripWidth);
                        break;
                    default:
                        pos = 0;
                        break;
                }
                return pos;
            };

            thumbPos = setThumbPos(opt.galleryWidth);

            $("body").append("<div id='mbg_" + galleryId + "' ><div class='mbMask' id='mbMask_" + galleryId + "'></div><table id='tbl_" + galleryId + "'  cellpadding='0' cellspacing='0' height='" + opt.galleryHeight + "'><tr><td id ='gallery_" + galleryId + "' class='mbGallery'></td></tr></table></div>");
            var galleryContainer = $("#tbl_" + galleryId).find('#gallery_' + galleryId);
            $(galleryContainer).css(
      {
          border: opt.galleryFrameBorder + "px solid " + opt.galleryFrameColor,
          background: opt.galleryColor
      });
            $(galleryContainer).append(gallery);

            // CREATE THE GALLERY STRUCTURE FOR FULLSIZE IMAGES
            $(gallery).append("<div class='FullImg'></div>");
            var fullImageArea = $(gallery).find(".FullImg");

            var headerH = opt.labelHeight > 0 ? opt.labelHeight : opt.galleryFrameBorder;

            // thumbnail container
           $(galleryContainer).prepend("<div class='thumbBox'></div>");
            var thumbBox = $(galleryContainer).find(" .thumbBox");
         

            //thumbnail navigator
            $(thumbBox).prepend("<div class='header'>" +
                          "<table cellpadding='0' cellspacing='0'><tr>" +
                          "<td class='thumbWinBtn pointer' > </td>" +
                          "<td class='spacer' > </td>" +
                          "<td class='slideShow pointer' > </td>" +
                          "<td class='spacer' > </td>" +
                          "<td class='prev pointer' > </td>" +
                          "<td class='next pointer' > </td>" +
                          "<td class='spacer' > </td>" +
                          "<td class='loader'> </td>" +
                          "<td class='indexLabel' nowrap> </td>" +
                          "<td class='spacer' > </td>" +
                          "<td class='close' nowrap> </td>" +
                          "</tr></table>" +
                          "</div>");
            var header = $(thumbBox).find(".header");

            var thumbWinBtn = $(header).find(".thumbWinBtn");
            $(thumbWinBtn).append("<img src='" + opt.iconFolder + "/thumb.gif' class='thumbIco'>");

            var slideShow = $(header).find(".slideShow");
            $(slideShow).append("<img src='" + opt.iconFolder + "/play.gif' class='slideIco'>");

            var thumbloading = $(header).find(".loader");
            $(thumbloading).append("<img src='" + opt.iconFolder + "/loaded.gif'>");

            var spacer = $(header).find(".spacer");
            $(spacer).append("<img src='" + opt.iconFolder + "/separator.gif'>");

            var next = $(header).find(".next");
            $(next).append("<img src='" + opt.iconFolder + "/next.gif'>");

            var prev = $(header).find(".prev");
            $(prev).append("<img src='" + opt.iconFolder + "/prev.gif'>");

            var close = $(header).find(".close");
            $(close).append("<img src='" + opt.iconFolder + "/close.gif' alt='close'>");

            var indexLabel = $(thumbBox).find(" .indexLabel").html((opt.startFrom + 1) + ".<b>" + full.length + "</b>");

            //Thumbnails
            $(thumbBox).append("<div class='ThumbImg'></div>");
            var thumbImages = $(thumbBox).find(" .ThumbImg");
            $(thumbImages).prepend($(thumbs));


            $(thumbBox).append("<div class='descriptionBox'></div>");
            var descriptionBox = $(galleryContainer).find(".descriptionBox");

            $("#mbg_" + galleryId).css({
                position: "fixed",
                bottom: 0,
                left: 0,
                width: "100%",
                height: "100%",
                display: "none"

                
            });

            $("#mbMask_" + galleryId).css({
                opacity: opt.maskOpacity,
                background: opt.maskBgnd,
                display: "none"
            });


            $("#tbl_" + galleryId).css({
                margin: "auto",
                paddingTop: "30px",
                position: "relative"
            });


            $(descriptionBox).css(
      {
          position: "absolute",
          padding: 10,
          zIndex: 0,
          width: opt.thumbStripWidth - 20
      });


            gallery.css(
      {
          width: opt.galleryWidth,
          height: opt.galleryHeight,
          overflow: "hidden"
      });

            $(thumbs).css(
      {
          width: opt.thumbHeight,
          padding: "0px",
          border: "1px solid " + opt.labelColor,
          cursor: "pointer"
        
          
      });

            $(thumbBox).css(
      {
          textAlign: "left",
          zindex: 1000,
          marginTop: "-" + headerH + "px",
          position: "absolute",
          width: opt.thumbStripWidth + "px",
          marginLeft: thumbPos + "px",
          zIndex: 10000
      });

            $(thumbImages).css(
      {
          opacity: opt.headerOpacity,
          backgroundColor: opt.thumbStripColor,
          border: "5px solid " + opt.labelColor,
          height: opt.galleryHeight + "px",
          overflow: "auto"

      });

            $(header).css(
      {
          opacity: opt.headerOpacity,
          textAlign: "left",
          color: opt.labelTextColor,
          padding: "0px",
          border: "0px",
          height: headerH,
          marginLeft: "-10px"
      });

            $(header).find("td").css(
      {
          background: opt.labelColorDisactive,
          padding: "2px",
          paddingRight: "10px",
          height: headerH,
          color: opt.labelTextColor,
          fontFamily: "Verdana, Arial",
          fontSize: opt.labelTextSize
      });

            $(".pointer").css(
      {
          cursor: "pointer"
      });

            jQuery.fn.extend(
      {
          getW: function() {
              var ow = $(this).width();
              if (opt.galleryMaxWidth > 0 && ow > opt.galleryMaxWidth) {
                  $(this).attr("width", opt.galleryMaxWidth);
                  ow = opt.galleryMaxWidth;
              }
              return ow;
          }
      });
            function changePhoto(i) {
                $(descriptionBox).fadeTo(opt.fadeTime, 0);
                $(fullImageArea).fadeTo(opt.fadeTime, 0, function() {
                    //replacing the image
                    $(fullImageArea).html(full[i]);
                    $(descriptionBox).html(imgDesc[i]);
                    //showing the new image
                    setTimeout(function() {
                        $(fullImageArea).fadeTo(opt.fadeTime, 1);
                        $(descriptionBox).fadeTo(opt.fadeTime, .8);
                    }, opt.fadeTime);
                    // if autosize option resize the image frame
                    if (opt.autoSize) {
                        //if a maxWith is set resize the image width
                        var w = $(full[i]).getW();
                        //resize frame
                        gallery.animate(
            {
                height: full[i].offsetHeight,
                width: w
            }, opt.fadeTime);
                        //if the thumbstrip has no width set the width according ti the frame width
                        if (opt.thumbStripWidth == opt.galleryWidth) {
                            $(thumbBox).animate(
              {
                  width: full[i].offsetWidth
              }, opt.fadeTime);
                        } else {
                            // if the thumbstrip has a width reposition it according to the image width
                            var l = setThumbPos($(full[i]).width());
                            $(thumbBox).animate(
              {
                  marginLeft: l
              }, opt.fadeTime);
                        }
                    }
                });
                //redefine the indexLabeles
                $(actualThumb).css(thumbUnsel);
                actualImg = full[i];
                actualThumb = thumbs[i];
                $(actualThumb).css(opt.thumbSel);
                $(indexLabel).html((i + 1) + ".<b>" + full.length + "</b>");
            }
            thumbs.each(function(i) {
                $(this).click(function() {
                    x = i;
                    stopShow();
                    preloadImg(i);
                    //setTimeout(function(){$(thumbImages).slideUp(500);},500);
                    x++;
                });
            });
            gallery.show();

            // EVENTS
            var hideTumb, thumbOpen, headerMO;
            $(thumbWinBtn).click(function() {
                if (!thumbOpen) {
                    $(thumbImages).slideDown(500);
                    thumbOpen = true;
                } else {
                    $(thumbImages).slideUp(500);
                    thumbOpen = false;
                }
                stopShow();
            });
            $(fullImageArea).click(function() {
                stopShow();
            });
            $(fullImageArea).bind("dblclick", function() {
                startShow();
            });
            $(thumbBox).mouseover(function() {
                clearTimeout(hideTumb);
                clearTimeout(headerMO);
                $(header).find("td").css({ opacity: opt.headerOpacity, background: opt.labelColor });
                clearTimeout(closeThumbStrip);
            });

            $(thumbBox).mouseout(function() {
                headerMO = setTimeout(function() {
                    $(header).find("td").css({ opacity: opt.headerOpacity, background: opt.labelColor });
                }, 100);
                hideTumb = setTimeout(function() {
                    $(thumbImages).slideUp(500);
                    thumbOpen = false;
                }, 1000);
            });
            $(thumbs).mouseover(function() {
                if (this != actualThumb) {
                    $(this).css(thumbOver);
                }
            });
            $(thumbs).mouseout(function() {
                if (this != actualThumb) {
                    $(this).css(thumbUnsel);
                }
            });
            $(slideShow).click(function() {
                startSlide = !startSlide;
                if (startSlide) {
                    startShow();
                } else
                    stopShow();
            });
            var goOn;
            $(next).click(function() {
                stopShow();
                clearTimeout(goOn);
                x += 1;
                goOn = setTimeout(function() {
                    if (x >= full.length) x = 0;
                    preloadImg(x);
                }, 200);
            });
            $(prev).click(function() {
                stopShow();
                clearTimeout(goOn);
                x -= 1;
                goOn = setTimeout(function() {
                    if (x < 0) x = full.length - 1;
                    preloadImg(x);
                }, 200);
            });
            $(close).click(function() {
                stopShow();
                origGallery.initialized = false;
                $("#mbMask_" + galleryId).fadeOut("slow", function() {
                    $("#mbg_" + galleryId).slideUp("slow", function() { $("#mbg_" + galleryId).remove(); });
                });
            });

            $("#mbMask_" + galleryId).click(function() {
                stopShow();
                origGallery.initialized = false;
                $(this).fadeOut("slow", function() {
                    $("#mbg_" + galleryId).slideUp("slow", function() { $("#mbg_" + galleryId).remove(); });
                });
            });

            actualImg = full[opt.startFrom];
            $(thumbs).css(thumbUnsel);
            actualThumb = thumbs[opt.startFrom];
            $(actualThumb).css(thumbSel);
            closeThumbStrip = setTimeout(function() {
                $(thumbImages).hide(500);
            }, 2000);
            var slideShowTimer,
              x = opt.startFrom,
              startSlide = opt.autoSlide;

            function startShow() {
                $(slideShow).find("img").attr("src", opt.iconFolder + "/stop.gif");
                if (x == full.length)
                    x = 0;
                preloadImg(x);
                slideShowTimer = setTimeout(startShow, opt.slideTimer);
                x++;
            };
            function stopShow() {
                clearTimeout(slideShowTimer);
                $(slideShow).find("img").attr("src", opt.iconFolder + "/play.gif");
                startSlide = false;
            }
            if (startSlide) {
                setTimeout(startShow, opt.startTimer);
            } else {
                setTimeout(function() {
                    preloadImg(opt.startFrom);
                }, opt.startTimer);
            }
            $("#mbg_" + galleryId).mb_BringToFront().slideDown("slow", function() {
                $("#mbMask_" + galleryId).fadeIn("slow");
            });
            // $("#mbMask_"+galleryId).slideDown();
        });
    };


    $.fn.mbGallery.defaults = {
        galleryWidth: 640,
        galleryHeight: 480,
        galleryMaxWidth:0,
        galleryColor: "#333",
        galleryFrameBorder: 2,
        galleryFrameColor: "#000",
        maskOpacity: .5,
        maskBgnd: "transparent",

        startFrom: "0",
        headerOpacity: 0.8,
        thumbsBorder: 4,
        thumbHeight: 50,
        thumbStripWidth: 250,
        thumbStripColor: "#333333",
        thumbStripPos: "right",
        thumbSelectColor: "black",
        thumbOverColor: "#cccccc",
        imageSelector: ".imgFull",
        thumbnailSelector: ".imgThumb",
        descSelector: ".imgDesc",
        descriptionWidth: 300,

        labelColor: "#333",
        labelColorDisactive: "#333",
        labelTextColor: "#fff",
        labelTextSize: "11px",
        labelHeight: 20,

        iconFolder: "elements/white",
        fadeTime: 500,
        autoSlide: true,
        slideTimer: 6000,
        autoSize: true,
        startTimer: 0
    };


    jQuery.fn.mb_BringToFront = function() {
        var zi = 10;
        $('*').each(function() {
            if ($(this).css("position") == "absolute") {
                var cur = parseInt($(this).css('zIndex'));
                zi = cur > zi ? parseInt($(this).css('zIndex')) : zi;
            }
        });
        $(this).css('zIndex', zi += 1);
        return $(this);
    };

})(jQuery);