OverPageBrowser.OverPageBrowser = function(){
    this.imageId = "OverPageBrowserImage"
    this.closeImageId = "OverPageBrowserClose"
    this.over = null
    this.arrowsBg = [];
    this.showImage = function(url, title){
    	if(!title){
    		title='';
    	}
        // window.scrollTo(0, 0)
        this.over = new jslt.OverPage()
        var overLay = this.over.getLayer(OverPageBrowser.config.opacity, {
            backgroundColor: OverPageBrowser.config.backgroundColor
        })
        overLay.onclick = function(){
            OverPageBrowser.instance.hide()
        }
        // document.getElementById(this.over.outenerLayerId).style.backgroundColor=OverPageBrowser.config.backgroundColor
        this.over.setCenter()
        if (url.indexOf(".flv") > -1 || url.indexOf(".f4v") > -1) {
            this.createFlvPlayer(url, jslt.overPageInstance.layerId, "outerFLV", title)
            return
        }
        var imLoading = document.createElement("img")
        imLoading.id = "OverPageBrowserImLoading"
        imLoading.src = "/modules/layout/loading-100x100.gif";
        imLoading.onclick = function(){
            OverPageBrowser.instance.hide()
        }
        imLoading.style.cursor = "pointer"
        var bodyEl = new jslt.Element(document.body)
        var viewSize = bodyEl.getRequiredSize()
        imLoading.style.position = "absolute"
        imLoading.style.left = Math.round(viewSize[0] / 2) + "px"
        imLoading.style.top = Math.round(viewSize[1] / 2) + "px"
        overLay.appendChild(imLoading)
        var img = document.createElement("img")
        overLay.appendChild(img)
        if (OverPageBrowser.config.clickKill == true) {
            img.onclick = function(){
                OverPageBrowser.instance.hide()
            }
            img.style.cursor = "pointer"
        }
        OverPageBrowser.instance.createCloseBtn(overLay)
        img.style.position = "absolute"
        img.style.left = "-2000px"
        img.alt = title
        img.onload = function(){
			document.getElementById("OverPageBrowserImLoading").style.display = "none"
            var imgSize = [this.width, this.height];
            var bodyEl = new jslt.Element(document.body)
            var viewSize = bodyEl.getRequiredSize()
            var divEl = new jslt.Element(jslt.overPageInstance.outenerLayerId)
            viewSize[1] = divEl.getViewHeight()
            var thisPosition = [parseInt((viewSize[0] - imgSize[0]) / 2), Math.max(0, parseInt((viewSize[1] - imgSize[1]) / 2))]
            this.style.left = thisPosition[0] + "px"
            this.style.top = thisPosition[1] + "px"
            if (this.alt != undefined && this.alt != "") {
                var titleEl = document.createElement("div")
                titleEl.className = "OPBTitle elAbsolute"
                this.parentNode.appendChild(titleEl)
                titleEl.innerHTML = '<span class="OPBTitleText">' + this.alt + '</span>'
                titleEl.style.left = (thisPosition[0]) + "px"
                titleEl.style.top = (thisPosition[1] + this.height + 2 * OverPageBrowser.config.borderWidth) + "px"
                titleEl.style.display = "block"
                titleEl.style.width = (this.width + 2 * OverPageBrowser.config.borderWidth) + "px"
            }
			OverPageBrowser.instance.positionCloseBtn(thisPosition, imgSize)

            if (viewSize[1] < imgSize[1]) {
                window.onscroll = null
            }
        }
        img.src = url
        img.id = this.imageId
        img.style.border = "solid " + OverPageBrowser.config.borderColor + " " + OverPageBrowser.config.borderWidth + "px"

    }
    this.getLastIndex = function(){
        return this.lastIndex
    }
    this.showGaleryImage = function(index, substitute, records, wg3Instance){
        this.lastIndex = index;
        var recordsToPass
        if (typeof(records) == "object") {
            OverPageBrowser.instance.storedRecords = records
            recordsToPass = "'stored'"
        }
        else
            if (records == undefined) {
                this.wg3Instance = wg3Instance || "instance"
                records = webgalery3[this.wg3Instance].images
            }
            else
                if (records == "stored") {
                    recordsToPass = "'stored'"
                    records = OverPageBrowser.instance.storedRecords
                }
        record = records[index]
        var presentationType = typeof(webgalery3.config.presentationType) != "undefined" && webgalery3.config.presentationType.length > 1 ? webgalery3.config.presentationType : "image"
        if (!substitute) {
            // window.scrollTo(0, 0)
            this.over = new jslt.OverPage()
            var overLay = this.over.getLayer(OverPageBrowser.config.opacity, {
                backgroundColor: OverPageBrowser.config.backgroundColor
            })
            // document.getElementById(this.over.outenerLayerId).style.backgroundColor=OverPageBrowser.config.backgroundColor
            this.over.setCenter()
            var tbody = document.createElement("tbody")
            var tr = document.createElement("tr");
            var td1 = document.createElement("td");
            td1.id = "WebGaleryBigScrollLeft"
            td1.rowSpan = 3
            tr.appendChild(td1)
            var tdHeader = document.createElement("td");
            tdHeader.id = "WebGaleryBigHeader"
            tr.appendChild(tdHeader)
            var td3 = document.createElement("td");
            td3.id = "WebGaleryBigScrollRight"
            td3.rowSpan = 3
            tr.appendChild(td3)
            tbody.appendChild(tr)
            tr = document.createElement("tr");
            var tdImage = document.createElement("td");
            tdImage.id = "Webgalery3BigImageTd"
            tr.appendChild(tdImage)
            tbody.appendChild(tr)
            tr = document.createElement("tr");
            var tdTitle = document.createElement("td");
            tdTitle.id = "tdTitleWebGaleryBigTitle"
            tr.appendChild(tdTitle)
            tbody.appendChild(tr)
            var table = document.createElement("table")
            table.id = "Webgalery3BigTable"
            table.appendChild(tbody)
            overLay.appendChild(table)
            var imLoading = document.createElement("img")
            imLoading.id = "loadingProgressImg"
            imLoading.src = "/modules/layout/loading-100x100.gif";
            tdImage.appendChild(imLoading)
            var bodyEl = new jslt.Element(document.body)
            var viewSize = bodyEl.getRequiredSize()
            table.style.position = "absolute"
            table.style.left = Math.round(viewSize[0] / 2) + "px"
            table.style.top = Math.round(viewSize[1] / 2) + "px"
            // console.log(presentationType)
            if (presentationType == "image") {
                OverPageBrowser.instance.createCloseBtn(overLay)
                var img = document.createElement("img")
                tdImage.appendChild(img)
                img.onclick = function(){
                    OverPageBrowser.instance.hide()
                }
                img.style.cursor = "pointer"
                img.onload = function(){
                    $("#loadingProgressImg").css("display", "none")
                    $(this).css("display", "block")
                    var savedTitle = $("#tdTitleWebGaleryBigTitle").html()
                    $("#tdTitleWebGaleryBigTitle").html("")
                    $("#tdTitleWebGaleryBigTitle").width($(this).width())
				   // var tableSize = [$("#Webgalery3BigTable").width(),
					// $("#Webgalery3BigTable").height()]
				    var tableSize = [$(this).width()+2*$("#WebGaleryBigScrollLeft").width(), $("#Webgalery3BigTable").height()]// to
																																// jest
																																// poprawne
																																// jeśli
																																// img
																																// nie
																																// ma
																																// border
                    $("#tdTitleWebGaleryBigTitle").html(savedTitle)
                    var bodyEl = new jslt.Element(document.body)
                    var viewSize = bodyEl.getRequiredSize()
                    var divEl = new jslt.Element(jslt.overPageInstance.outenerLayerId)
                    viewSize[1] = divEl.getViewHeight();
                    var thisPosition = [parseInt((viewSize[0] - tableSize[0]) / 2), Math.max(0, parseInt((viewSize[1] - tableSize[1]) / 2))]
                    $("#Webgalery3BigTable").css("left", thisPosition[0] + "px")
                    $("#Webgalery3BigTable").css("top", thisPosition[1] + "px")
                    OverPageBrowser.instance.positionCloseBtn(thisPosition, tableSize)
                }
                img.id = this.imageId;
            }
            else
                if (presentationType == "movie") {
                }
        }
        else
            if (substitute) {
                if (presentationType == "image") {
                }
                else
                    if (presentationType == "movie") {

                    }
            }
        if (presentationType == "image") {
            document.getElementById(this.imageId).style.display = "none"
            document.getElementById(this.imageId).src = record[1];
        }
        else
            if (presentationType == "movie") {
                if (OverPageBrowser.config.flvPlayer.onlySwf) {
                    this.createSwfPlayer(OverPageBrowser.config.flvPlayer.src, OverPageBrowser.config.flvPlayer.size);
                    return
                }
                else {
                    document.getElementById("Webgalery3BigTable").style.background = "none"
                    document.getElementById("Webgalery3BigTable").style.borderBottom = "none"
                    this.createFlvPlayer(record[1], "Webgalery3BigImageTd", "Webgalery3BigTable", record[2])

                }
            }
        if (presentationType == "image") {
            $("#loadingProgressImg").css("display", "block")
        }
        var isPrevElement = index > 0
        if (isPrevElement) {
            // check: is link only image?
            var prevEl = records[index - 1]
            isPrevElement = prevEl[2].indexOf("config|") == -1
        }

        document.getElementById("WebGaleryBigScrollLeft").onclick = isPrevElement ? new Function("OverPageBrowser.instance.showGaleryImage(" + (index - 1) + ",true," + recordsToPass + ",'" + this.wg3Instance + "')") : null
        document.getElementById("WebGaleryBigScrollLeft").style.cursor = isPrevElement ? "pointer" : "default";
        if (this.arrowsBg.length == 0) {
            this.arrowsBg.push(document.getElementById("WebGaleryBigScrollLeft").style.backgroundImage)
            this.arrowsBg.push(document.getElementById("WebGaleryBigScrollRight").style.backgroundImage)
        }
        document.getElementById("WebGaleryBigScrollLeft").style.backgroundImage = index > 0 ? this.arrowsBg[0] : "none";
        document.getElementById("WebGaleryBigScrollRight").onclick = index < (records.length - 1) ? new Function("OverPageBrowser.instance.showGaleryImage(" + (index + 1) + ",true," + recordsToPass + ",'" + this.wg3Instance + "')") : null
        document.getElementById("WebGaleryBigScrollRight").style.cursor = index < (records.length - 1) ? "pointer" : "default";
        document.getElementById("WebGaleryBigScrollRight").style.backgroundImage = index < (records.length - 1) ? this.arrowsBg[1] : "none";
        if (records.length > 1) {
            $("#WebGaleryBigHeader").html((index + 1) + " / " + records.length)
        }
        if (presentationType == "image") {
            var tit = record[2]
            if (tit.indexOf("_extended_") > -1) {
                var p = tit.split("_extended_")
                tit = p[1]
            }
            $("#tdTitleWebGaleryBigTitle").html(tit)
        }

    }
    this.hide = function(){
        this.over.hide()
    }
    this.createFlvPlayer = function(movieURL, assignToId, centerId, title){
        document.getElementById('contentOverPageDiv').onclick = null
        var emb = new PluginEmbeder()
        emb.addAttribute("id", "flvPlayer")
        emb.addAttribute("width", OverPageBrowser.config.flvPlayer.size[0])
        emb.addAttribute("height", OverPageBrowser.config.flvPlayer.size[1])
        emb.addAttribute("file", OverPageBrowser.config.flvPlayer.src)
        emb.addAttribute("wmode", "transparent")
        emb.addVariable("isHTML", "true")
        emb.addVariable("movieURL", movieURL)
        emb.addVariable("title", title)
        emb.addVariable("knobXMaxMax", OverPageBrowser.config.flvPlayer.knobXMaxMax)
        emb.addVariable("progressLineWidthMax", OverPageBrowser.config.flvPlayer.progressLineWidthMax)
        var playerHTML = emb.getHTML()// emb.assignToElement(assignToId)
        if (centerId == "outerFLV") {
            playerHTML = "<div id='outerFLV' >" + playerHTML + "</div>"
        }
        document.getElementById(assignToId).innerHTML = playerHTML
        this.over.centerContent(document.getElementById(centerId), OverPageBrowser.config.flvPlayer.size)
    }
	this.createFlvPlayer2=function(movie,title){
		this.createSwfPlayer(OverPageBrowser.config.flvPlayer.src, OverPageBrowser.config.flvPlayer.size,{movieURL:movie,title:title});
	}
    this.createSwfPlayer = function(swfFile, size, paramsA, playerSize, attributesA){
        this.over = new jslt.OverPage()
        var overLay = this.over.getLayer(OverPageBrowser.config.opacity, {
            backgroundColor: OverPageBrowser.config.backgroundColor
        })
        this.over.setCenter()
        var emb = new PluginEmbeder()
        if (!playerSize) {
            playerSize = size
        }
        emb.addAttribute("width", playerSize[0])
        emb.addAttribute("height", playerSize[1])
        emb.addAttribute("file", swfFile)
        emb.addAttribute("wmode", "transparent")
        emb.addVariable("isHTML", "true")
        if (paramsA) {
            for (var p in paramsA) {
                emb.addVariable(p, paramsA[p])
            }
        }
        for (var p in attributesA) {
            emb.addAttribute(p, attributesA[p])
        }
        if (!attributesA || !attributesA.id) {
            emb.addAttribute('id', 'swfPlayerObject')
        }
        var playerHTML = emb.getHTML()
        playerHTML = "<div id='outerSwfPlayer' class='elAbsolute'>" + playerHTML + "</div>"
        document.getElementById(jslt.overPageInstance.layerId).innerHTML = playerHTML
        this.over.centerContent(document.getElementById('outerSwfPlayer'), size)
    }
    /**
	 * require jquery
	 *
	 * @param {Object}
	 *            url
	 * @param {Object}
	 *            size
	 */
    this.loadDocument = function(url, size){
        this.over = new jslt.OverPage()
        var overLay = this.over.getLayer(OverPageBrowser.config.opacity, {
            backgroundColor: OverPageBrowser.config.backgroundColor
        })
        this.over.setCenter()
        var contentHTML = "<div id='outerOverDocument' class='elAbsolute' style='width:" + size[0] + "px;height:" + size[1] + "px'>loading...</div>"
        document.getElementById(jslt.overPageInstance.layerId).innerHTML = contentHTML
        this.over.centerContent(document.getElementById('outerOverDocument'), size)
        $.get(url, function(data){
            $('#outerOverDocument').html(data)
        });
    }
    /**
	 * OverPageBrowser.instance.showHTML('',[500,400])
	 *
	 * @param {String}
	 *            html
	 * @param {Array}
	 *            size
	 * @param {Boolean}
	 *            stayOnClick
	 */
    this.showHTML = function(html, size,stayOnClick){
        this.over = new jslt.OverPage()
        var overLay = this.over.getLayer(OverPageBrowser.config.opacity, {
            backgroundColor: OverPageBrowser.config.backgroundColor
        })
        if(!stayOnClick){
        overLay.onclick = function(){
            OverPageBrowser.instance.hide()
        }
        }
        this.over.setCenter()
        var contentHTML = "<div id='outerOverDocument' class='elAbsolute' style='width:" + size[0] + "px;height:" + size[1] + "px'>"
        contentHTML += html
        contentHTML += "</div>"
        document.getElementById(jslt.overPageInstance.layerId).innerHTML = contentHTML
        this.over.centerContent(document.getElementById('outerOverDocument'), size)
         if(!stayOnClick){
        document.getElementById('outerOverDocument').onclick = function(){
            return false
        }
         }
    }
    // $('#vsFrame').contents().find('head').
    /**
	 * Not work in IExplore
	 *
	 * @param {Object}
	 *            html
	 * @param {Object}
	 *            size
	 * @param {Object}
	 *            styles
	 */
    this.showHTMLFrame = function(html, size, styles){
        this.over = new jslt.OverPage()
        var overLay = this.over.getLayer(OverPageBrowser.config.opacity, {
            backgroundColor: OverPageBrowser.config.backgroundColor
        })
        overLay.onclick = function(){
            OverPageBrowser.instance.hide()
        }

        this.over.setCenter()
        var src = 'javascript:'
        src += '<html><body>' + html + '</body></html>'
        var contentHTML = "<iframe id='outerOverDocument' src='" + src + "' class='elAbsolute' style='width:" + size[0] + "px;height:" + size[1] + "px'>"
        contentHTML += "</iframe>"
        document.getElementById(jslt.overPageInstance.layerId).innerHTML = contentHTML
        OverPageBrowser.instance.createCloseBtn(overLay)
        this.over.centerContent(document.getElementById('outerOverDocument'), size)

    }
    this.showFrame = function(src, size, title){
        this.over = new jslt.OverPage()
        var overLay = this.over.getLayer(OverPageBrowser.config.opacity, {
            backgroundColor: OverPageBrowser.config.backgroundColor
        })
        overLay.onclick = function(){
            OverPageBrowser.instance.hide()
        }
        OverPageBrowser.instance.createCloseBtn(overLay)
        this.over.setCenter()
        var contentHTML = "<div id='outerOverDocument' class='elAbsolute' style='width:" + size[0] + "px;height:" + size[1] + "px'>"
        contentHTML += "<iframe src='" + src + "' frameborder='0' class='elAbsolute' style='width:" + size[0] + "px;height:" + size[1] + "px'>"
        contentHTML += "</iframe>"
        contentHTML += "<div id='titleBar' class='elAbsolute' style='width:" + size[0] + "px'>"
        contentHTML += title
        contentHTML += "</div>"
        contentHTML += "</div>"
        document.getElementById(jslt.overPageInstance.layerId).innerHTML = contentHTML
        this.over.centerContent(document.getElementById('outerOverDocument'), size)

    }
    this.fixFlvMiniatures = function(){
        var a = document.getElementsByTagName("a")
        for (var i = 0; i < a.length; i++) {
            if ((a[i].href.indexOf(".flv") > -1 || a[i].href.indexOf(".f4v") > -1) && a[i].className.indexOf("flvAdd") == -1) {
                var curA = a[i];
                curA.className += " flvAdd"
                if (OverPageBrowser.config.flvPlayImage.indexOf('.swf') > -1) {
                    for (var i = 0; i < curA.childNodes.length; i++) {
                        if (curA.childNodes[i].nodeType == 1 && curA.childNodes[i].nodeName.toLowerCase() == 'img') {
                            var imEl = curA.childNodes[i];
							break;
                        }
                    }
                    var emb = new PluginEmbeder()
                    emb.addAttribute("width", imEl.width)
                    emb.addAttribute("height", imEl.height)
					 emb.addAttribute("wmode", 'transparent')
                    emb.addAttribute("file", OverPageBrowser.config.flvPlayImage)
                  	emb.addAttribute('className','LaunchPlayerBtn')
				   emb.addVariable('miniature',imEl.src)
				   emb.addVariable('url',curA.href)
				    emb.addVariable('title',imEl.alt)
				    curA.innerHTML=emb.getHTML()
                }
                else {
                    var im = document.createElement("img")
                    im.src = OverPageBrowser.config.flvPlayImage
                    curA.style.position = "relative"
                    im.style.position = "absolute"
                    im.style.left = "0px"
                    im.style.top = "0px"
                    im.style.cursor = "pointer"
                    im.className = "moviePlayButton"
                    curA.appendChild(im)
                }


            }
        }
    }
    this.createCloseBtn = function(overLay){
        if (OverPageBrowser.config.closeImg.show) {
        	if(OverPageBrowser.config.skinableClose){
        		var imOuter=document.createElement("div")
        		imOuter.id=imOuter.className='OverPageBrowserCloseOuter'
        			imOuter.style.position="absolute"
        		var imInner=document.createElement("div")
        		imInner.className='OverPageBrowserCloseElement'
        		imInner.style.position='relative'
        		imInner.style.cursor='pointer'
        		imInner.style.display='block'
    			overLay.appendChild(imOuter)
    			imOuter.appendChild(imInner)
        	}else{
            var closeImg = document.createElement("img")
            closeImg.style.position = "absolute"
            closeImg.style.display = "none"
            closeImg.style.cursor = "pointer"
            closeImg.id = this.closeImageId
            closeImg.src = OverPageBrowser.config.closeImg.src
            closeImg.onclick = function(){
                OverPageBrowser.instance.hide()
            }
            overLay.appendChild(closeImg)
        	}
        }
    }
    this.positionCloseBtn = function(thisPosition, imgSize){
        if (OverPageBrowser.config.closeImg.show) {
        	if(OverPageBrowser.config.skinableClose){
        		var closeEl = document.getElementById('OverPageBrowserCloseOuter')
        		closeEl.style.left = (thisPosition[0] + imgSize[0]  +  OverPageBrowser.config.borderWidth) + "px"
        		closeEl.style.top = (thisPosition[1]   +  OverPageBrowser.config.borderWidth) + "px"
        	}else{
        		var close = document.getElementById(OverPageBrowser.instance.closeImageId)
                if (close) {
                    close.style.display = "block";
                    close.style.left = (thisPosition[0] + imgSize[0] - 7 +  OverPageBrowser.config.borderWidth) + "px"
                    close.style.top = (thisPosition[1]  -OverPageBrowser.config.closeImg.height+ 7 +  OverPageBrowser.config.borderWidth) + "px"
                }
        	}

        }
    }
    /**
     * public
     */
    this.getCenterBlock=function(size,withClose){
    	if(withClose==undefined){
    		withClose=true
    	}
    	$('body').append($('<div>')
    			.attr('id','OverPageBrowserAll')
    			.css('position','fixed')
    			.css('display','block')
    			.css('left',0)
    			.css('top',0)
    			.css('backgroundColor',OverPageBrowser.config.backgroundColor)
    			.css('opacity',OverPageBrowser.config.opacity)
    			.width($('html').width())
    			.height($('html').height())
    	);
    	$('body').append($('<div>')
    			.attr('id','OverPageBrowserCenterOuter')
    			.css('position','fixed')
    			.css('display','block')
    			.css('left',($('html').width()-size[0])/2)
    			.css('top',($('html').height()-size[1])/2)
    			.css('background','url(/modules/layout/ajax-loader.gif) no-repeat center center')
    			.width(size[0])
    			.height(size[1])
    			);
    	if(withClose){
    		$('#OverPageBrowserCenterOuter').append($('<div>')
    				.attr('id','OverPageBrowserCloseOuter')
        			.attr('class','OverPageBrowserCloseOuter')
        			.css('position','absolute')
        			.css('left',size[0])
        			.css('top',0)
        			);
    		$('#OverPageBrowserCloseOuter').append($('<div>')
        			.attr('class','OverPageBrowserCloseElement')
        			.css('position','absolute')
        			.css('cursor','pointer')
        			.click(function(){OverPageBrowser.instance.removeCenterBlock()})
        			);
    	}
    	$('#OverPageBrowserCenterOuter').append($('<div>')
    			.attr('id','OverPageBrowserCenterContent')
    			);
    	return $('#OverPageBrowserCenterContent')[0]
    }
    this.removeCenterBlock=function(){
    	$('#OverPageBrowserCenterOuter').remove()
    	$('#OverPageBrowserAll').remove()
    }
}
OverPageBrowser.instance = new OverPageBrowser.OverPageBrowser()