$(function(){
		$("#g1").mbGallery( {
			galleryMaxWidth:0,
			galleryWidth: 480,
			galleryHeight:300,
			galleryColor:"#333333",
			galleryFrameBorder: 0,
			galleryFrameColor:"#fff",
 
			thumbStripPos: "left",
			thumbStripWidth:5000,
			thumbSelectColor: "#fff",
			thumbOverColor : "#cccccc",
			thumbStripColor: "#333333",
			thumbsBorder: 3,
			//thumbHeight:70,
			headerOpacity: 1.0,
 
			labelColor: "#333333",
			labelColorDisactive:"#333333",
			labelTextColor: "#ffffff",
			labelTextSize:"12px",
			labelHeight:20,
 
			startFrom:0,
			fadeTime: 400,
			autoSlide: false,
			autoSize : true,
			slideTimer: 4000,
			iconFolder: "http://www.rozhlas.cz/img/fotogalerie",
			startTimer:3000
		}
	)}
	);

	$("#g1").css(
	{
	    padding: "0 0 12px 0"
	});

	function pozice(noImg)
	{
		var sirka = 0;
		var celkovaSirka = 0;
		var iterace = 0;
		
		if (noImg <= 0) noImg = -1; else sirka -= 476;
		
		$("#ThumbImg .imgThumb").each(function (i) {
			if (iterace <= noImg){
				sirka += this.width +6;
				iterace++;
			}
			celkovaSirka += this.width +6;
		});
	
		if (sirka < 0) sirka = 0;
	
		return sirka;
	}

	$(function() {
		$("#sliderGallery").slider({
			value:0,
			min: 0,
			max: $("#ThumbImg .imgThumb").length -1,
			step: 1,
			change: function(event, ui) { 
				$("#ThumbImg").css("left", "-"+ pozice(ui.value) +"px");
			}, 
			slide: function(event, ui) {
				$("#ThumbImg").css("left", "-"+ pozice(ui.value) +"px");
			}
		});
	});
	
jQuery.fn.mbGallery = function (NewOptions)
{
    return this.each (function () {
        var galleryId = !this.id ? Math.floor (Math.random () * 100): this.id;
        var gallery = this;

        this.options = {
            galleryWidth : 300,
            galleryHeight : 300,
            galleryMaxWidth : 0,
            galleryColor : "white",
            galleryFrameBorder : 30,
            galleryFrameColor : "white",

	    startFrom : 0,
            headerOpacity : 0.5,
            thumbsBorder : 5,
            //thumbHeight : 30,
            thumbStripColor : "black",
            thumbStripPos : "right",
	    thumbStripWidth:250,
            thumbSelectColor : "black",
            thumbOverColor : "#cccccc",
            imageSelector : ".imgFull",
            thumbnailSelector : ".imgThumb",
            descSelector : ".imgDesc",
	    descriptionWidth:300,

            labelColor : "yellow",
            labelColorDisactive:"white",
            labelTextColor : "black",
            labelTextSize : "9px",
            labelHeight : 25,
            iconFolder: "elements/black",
            fadeTime : 300,
            autoSlide : true,
            slideTimer : 100,
            autoSize : true,
            startTimer:0
        };


       $.extend (this.options, NewOptions);
				var opt= this.options;

				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;
        var actualImg;
        var actualThumb;
        var thumbUnsel = opt.thumbUnsel;
        var thumbOver = opt.thumbOver;
        $ (this).hide ();

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

        $ (this).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 = "";
	var pos;
	function setThumbPos(w) {
		return pos = 0;
		/*
		    switch (opt.thumbStripPos)
			{
			case "left" : return pos = 0;
			    break;
			case "center" : return pos = ((w / 2) - (opt.thumbStripWidth / 2));
			    break;
			case "right" : return pos = (w - opt.thumbStripWidth);
			    break;
			default: return pos = 0;
			    break;
			}
		*/
	};
	

        thumbPos = setThumbPos (opt.galleryWidth);

        $ (this).parent().append ("<table cellpadding='0' cellspacing='0' height='"+opt.galleryHeight+"'><tr><td id ='gallery_"+galleryId+"'></td></tr></table>");
        var galleryContainer= $ (this).parent().find('#gallery_'+galleryId);
        $ (galleryContainer).css(
        {
            border : opt.galleryFrameBorder + "px solid " + opt.galleryFrameColor,
						background: opt.galleryColor
				})
        $ (galleryContainer).append(this);

        // CREATE THE GALLERY STRUCTURE FOR FULLSIZE IMAGES
        $ (this).append ("<div class='FullImg' style='padding: 10px 6px 0 5px; text-align:center'></div>");
        var fullImageArea = $ (this).find (" .FullImg");
			
	// CREATE THE GALLERY STRUCTURE FOR THUMBS IMAGES
        var headerH = opt.labelHeight > 0?opt.labelHeight : opt.galleryFrameBorder;

        $ (this).removeAttr ("title");

        // 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><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 style='width: 50px'></td></div>");
	$ (thumbBox).prepend ("<div class='header'><table cellpadding='0' cellspacing='0' style='width:10px' class='tablequery'><td class='slideShow pointer'></td><td class='prev pointer'></td><td class='next pointer'></td><td><div id='sliderGallery' style='width:325px; margin-left:10px; margin-right:10px;'''></div></td><td nowrap><div class='indexLabel' style='text-align:center;width:59px;'></div</td></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 id='slideShowImg' src='"+opt.iconFolder+"/fotogalerie_button_play-off.gif' style='padding-left: 5px'>");

	$("#slideShowImg").hover(
		function () {
			if ($(this).attr ("src") == opt.iconFolder+"/fotogalerie_button_play-on.gif" || $(this).attr ("src") == opt.iconFolder+"/fotogalerie_button_play-off.gif") 
				$(this).attr ("src", opt.iconFolder+"/fotogalerie_button_play-on.gif");
			else 
				$(this).attr ("src", opt.iconFolder+"/fotogalerie_button_pause-on.gif");
		}
		, 
		function () {
			if ($(this).attr ("src") == opt.iconFolder+"/fotogalerie_button_play-on.gif" || $(this).attr ("src") == opt.iconFolder+"/fotogalerie_button_play-off.gif") 
				$(this).attr ("src", opt.iconFolder+"/fotogalerie_button_play-off.gif");
			else 
				$(this).attr ("src", opt.iconFolder+"/fotogalerie_button_pause-off.gif");
		}
	)

        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 id='nextImg' src='"+opt.iconFolder+"/fotogalerie_button_posun-vpred-off.gif' style='padding-right:5px;'>");

	$("#nextImg").hover(
		function () {
			$(this).attr ("src", opt.iconFolder+"/fotogalerie_button_posun-vpred-on.gif");
		}
		, 
		function () {
			$(this).attr ("src", opt.iconFolder+"/fotogalerie_button_posun-vpred-off.gif");
		}
	)


        var prev = $ (header).find (".prev");
        $ (prev).append ("<img id='prevImg' src='"+opt.iconFolder+"/fotogalerie_button_posun-zpet-off.gif' style='padding-left:5px; padding-right:5px;'>");

	$("#prevImg").hover(
		function () {
			$(this).attr ("src", opt.iconFolder+"/fotogalerie_button_posun-zpet-on.gif");
		}
		, 
		function () {
			$(this).attr ("src", opt.iconFolder+"/fotogalerie_button_posun-zpet-off.gif");
		}
	)

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

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

        $ (thumbBox).prepend("<div class='descriptionBox'></div>");
        var descriptionBox= $ (galleryContainer).find(".descriptionBox");
        $ (descriptionBox).css(
        {
        	position:"static",
        	//padding: 10,
		//top: "-1000px",
        	zIndex:100,
        	opacity: 1,
		//opt.headerOpacity,
		width : "480px"
        })
	
        $ (this).css (
        {
	    padding: "0 0 12px 0",
            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 : 10000,
            marginTop : "-" + headerH + "px",
            position : "absolute",
            //width : opt.thumbStripWidth + "px",
            width : "480px",
            marginLeft : thumbPos + "px",
	    borderBottom: "5px"
        });

        $ (thumbImages).css (
        {
            opacity :opt.headerOpacity,
            backgroundColor : opt.thumbStripColor,
            border: "2px solid "+ opt.labelColor, 
	    borderWidth: "2px 2px 5px", 
	    position : "relative",
	    left: "0px",
	    width: "100000px"
        });
	
        $ (header).css (
        {
            opacity : opt.headerOpacity,
            textAlign : "left",
            color : opt.labelTextColor,
            padding : "0px",
            border : "0px",
            height : headerH
        });



        $ ("td", header).css (
        {
            background : opt.labelColorDisactive,
            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
                $ (this).html (full [i]);
                $(descriptionBox).html(imgDesc[i]);
                //showing the new image
                setTimeout (function () {
                    $ (fullImageArea).fadeTo (opt.fadeTime, 1)
        			$ (descriptionBox).fadeTo (opt.fadeTime, 1);
                }, 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 : 480
                    }, 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).hide (500);},500);
		$("#sliderGallery").slider("option", "value", i);
            })
        })
        $ (this).show ();

        // EVENTS
        var hideTumb, thumbOpen, headerMO;
        $ (thumbWinBtn).click (function () {
            if ( !thumbOpen) {
                $ (thumbImages).show (500);
                thumbOpen = true;
            } else {
                //$ (thumbImages).hide (500);
                //thumbOpen = false;
            }
            stopShow ();
        })
        $ (fullImageArea).click (function () {
            stopShow ();
        });
        $ (fullImageArea).dblclick (function () {
            startShow ();
        });
        $ (thumbBox).mouseover (function () {
            clearTimeout (hideTumb);
            clearTimeout (headerMO);
            $ ("td", header).css ({opacity :opt.headerOpacity, background: opt.labelColor})
            clearTimeout (closeThumbStrip);
        })
/*
        $ (thumbBox).mouseout (function () {
            headerMO=setTimeout(function(){
                $ ("td", header).css ({opacity :opt.headerOpacity, background: opt.labelColor})
            },100)
            hideTumb = setTimeout (function () {
                $ (thumbImages).hide (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);
		$("#sliderGallery").slider("option", "value", x);
		$("#ThumbImg").css("left", "-"+ pozice(x) +"px");
            }, 200);
        })
        $ (prev).click ( function () {
            stopShow ();
            clearTimeout (goOn);
            x -= 1;
            goOn = setTimeout (function () {
                if (x < 0) x = full.length - 1;
                preloadImg (x);
		$("#sliderGallery").slider("option", "value", x);
		$("#ThumbImg").css("left", "-"+ pozice(x) +"px");
            }, 200);
        })

        actualImg = full [opt.startFrom];
        $ (thumbs).css (thumbUnsel);
        actualThumb = thumbs [opt.startFrom];
        $ (actualThumb).css (thumbSel);
        var closeThumbStrip = setTimeout (function () {
            //$ (thumbImages).hide (500)
        }, 2000);
        var slideShowTimer, x = opt.startFrom, startSlide = opt.autoSlide, startShow = function () {
            $ (slideShow).find ("img").attr ("src", opt.iconFolder+"/fotogalerie_button_pause-off.gif")
            if (x == full.length)
                x = 0;
            preloadImg (x);
	    $("#sliderGallery").slider("option", "value", x);
	    $("#ThumbImg").css("left", "-"+ pozice(x)+"px");
            slideShowTimer = setTimeout (startShow, opt.slideTimer)
            x ++
        };
        function stopShow() {
            clearTimeout (slideShowTimer);
            $ (slideShow).find ("img").attr ("src", opt.iconFolder+"/fotogalerie_button_play-off.gif");
            startSlide = false;
        }
        if (startSlide) {
            setTimeout (startShow, opt.startTimer);
        } else {
            setTimeout (function () {
                preloadImg (opt.startFrom)
		$("#sliderGallery").slider("option", "value", opt.startFrom);
            }, opt.startTimer);
        }
    })
}