
/**************************************************************
 Script		: MultiBox
 Version		: 1.3.1
 Authors		: Samuel Birch, modified by Jonathan Uhlmann
 Desc		: Supports jpg, gif, png, flash, flv, mov, wmv, mp3, html, iframe
 Licence		: Open Source MIT Licence
 **************************************************************/
var MultiBox = new Class({
    getOptions: function(){
        return {
            initialWidth: 250,
            initialHeight: 250,
            container: document.body,
            useOverlay: false,
            overlayColor: "#000",
            overlayOpacity: 0.7,
            contentColor: "#FFF",
            showNumbers: true,
            showControls: true,
            waitDuration: 2000,
            descClassName: false,
            descMinWidth: 400,
            descMaxWidth: 600,
            movieWidth: 400,
            movieHeight: 300,
            offset: {
                x: 0,
                y: 0
            },
            fixedTop: false,
            path: "typo3/ju_multibox/res/player/",
            onOpen: Class.empty,
            onClose: Class.empty,
            openFromLink: true,
            relativeToWindow: true,
            stringImageCount: " of "
        }
    },
    initialize: function(B, A){
        this.setOptions(this.getOptions(), A);
        this.openClosePos = {};
        this.timer = 0;
        this.contentToLoad = {};
        this.index = 0;
        this.opened = false;
        this.contentObj = {};
        this.containerDefaults = {};
        if (this.options.useOverlay) {
            this.overlay = new Overlay({
                container: this.options.container,
                color: this.options.overlayColor,
                opacity: this.options.overlayOpacity,
                onClick: this.close.bind(this)
            })
        }
        this.content = $$("." + B);
        if (this.options.descClassName) {
            this.descriptions = $$("." + this.options.descClassName);
            this.descriptions.each(function(C){
                C.setStyle("display", "none")
            })
        }
        this.container = new Element("div").addClass("MultiBoxContainer").injectInside(this.options.container);
        this.iframe = new Element("iframe").setProperties({
            id: "multiBoxIframe",
            name: "mulitBoxIframe",
            src: "javascript:void(0);",
            frameborder: 1,
            scrolling: "no"
        }).setStyles({
            position: "absolute",
            top: -20,
            left: -20,
            width: "115%",
            height: "115%",
            filter: "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)",
            opacity: 0
        }).injectInside(this.container);
        this.box = new Element("div").addClass("MultiBoxContent").injectInside(this.container);
        this.closeButton = new Element("div").addClass("MultiBoxClose").injectInside(this.container).addEvent("click", this.close.bind(this));
        this.controlsContainer = new Element("div").addClass("MultiBoxControlsContainer").injectInside(this.container);
        this.controls = new Element("div").addClass("MultiBoxControls").injectInside(this.controlsContainer);
        this.previousButton = new Element("div").addClass("MultiBoxPrevious").injectInside(this.controls).addEvent("click", this.previous.bind(this));
        this.nextButton = new Element("div").addClass("MultiBoxNext").injectInside(this.controls).addEvent("click", this.next.bind(this));
        this.title = new Element("div").addClass("MultiBoxTitle").injectInside(this.controls);
        this.number = new Element("div").addClass("MultiBoxNumber").injectInside(this.controls);
        this.description = new Element("div").addClass("MultiBoxDescription").injectInside(this.controls);
        if (this.content.length == 1) {
            this.title.setStyles({
                "margin-left": 0
            });
            this.description.setStyles({
                "margin-left": 0
            });
            this.previousButton.setStyle("display", "none");
            this.nextButton.setStyle("display", "none");
            this.number.setStyle("display", "none")
        }
        new Element("div").setStyle("clear", "both").injectInside(this.controls);
        this.content.each(function(D, C){
            D.index = C;
            D.addEvent("click", function(E){
                new Event(E).stop();
                this.open(D)
            }
.bind(this));
            if (D.href.indexOf("#") > -1) {
                D.content = $(D.href.substr(D.href.indexOf("#") + 1));
                if (D.content) {
                    D.content.setStyle("display", "none")
                }
            }
        }, this);
        this.containerEffects = new Fx.Styles(this.container, {
            duration: 400,
            transition: Fx.Transitions.sineInOut
        });
        this.controlEffects = new Fx.Styles(this.controlsContainer, {
            duration: 300,
            transition: Fx.Transitions.sineInOut
        });
        this.reset()
    },
    setContentType: function(B){
        var D = B.href.substr(B.href.lastIndexOf(".") + 1).toLowerCase();
        var C = {};
        if ($chk(B.rel)) {
            var A = B.rel.split(",");
            A.each(function(F){
                var E = F.split(":");
                C[E[0]] = E[1]
            })
        }
        if (C.type != undefined) {
            D = C.type
        }
        this.contentObj = {};
        this.contentObj.url = B.href;
        this.contentObj.xH = 0;
        if (C.width) {
            this.contentObj.width = C.width
        }
        else {
            this.contentObj.width = this.options.movieWidth
        }
        if (C.height) {
            this.contentObj.height = C.height
        }
        else {
            this.contentObj.height = this.options.movieHeight
        }
        if (C.panel) {
            this.panelPosition = C.panel
        }
        else {
            this.panelPosition = this.options.panel
        }
        switch (D) {
            case "jpg":
            case "gif":
            case "png":
                this.type = "image";
                break;
            case "swf":
                this.type = "flash";
                break;
            case "flv":
                this.type = "flashVideo";
                this.contentObj.xH = 70;
                break;
            case "mov":
                this.type = "quicktime";
                break;
            case "wmv":
                this.type = "windowsMedia";
                break;
            case "rv":
            case "rm":
            case "rmvb":
                this.type = "real";
                break;
            case "mp3":
                this.type = "flashMp3";
                this.contentObj.width = 320;
                this.contentObj.height = 70;
                break;
            case "element":
                this.type = "htmlelement";
                this.elementContent = B.content;
                this.elementContent.setStyles({
                    display: "block",
                    opacity: 0
                });
                if (this.elementContent.getStyle("width") != "auto") {
                    this.contentObj.width = this.elementContent.getStyle("width")
                }
                this.contentObj.height = this.elementContent.getSize().size.y;
                this.elementContent.setStyles({
                    display: "none",
                    opacity: 1
                });
                break;
            default:
                this.type = "iframe";
                if (C.ajax) {
                    this.type = "ajax"
                }
                break
        }
    },
    reset: function(){
        this.container.setStyles({
            opacity: 0,
            display: "none"
        });
        this.controlsContainer.setStyles({
            height: 0
        });
        this.removeContent();
        this.previousButton.removeClass("MultiBoxButtonDisabled");
        this.nextButton.removeClass("MultiBoxButtonDisabled");
        this.opened = false
    },
    getOpenClosePos: function(C){
        if (this.options.openFromLink) {
            if (C.getFirst()) {
                var A = C.getFirst().getCoordinates().width - (this.container.getStyle("border").toInt() * 2);
                if (A < 0) {
                    A = 0
                }
                var B = C.getFirst().getCoordinates().height - (this.container.getStyle("border").toInt() * 2);
                if (B < 0) {
                    B = 0
                }
                this.openClosePos = {
                    width: A,
                    height: B,
                    top: C.getFirst().getCoordinates().top,
                    left: C.getFirst().getCoordinates().left
                }
            }
            else {
                var A = C.getCoordinates().width - (this.container.getStyle("border").toInt() * 2);
                if (A < 0) {
                    A = 0
                }
                var B = C.getCoordinates().height - (this.container.getStyle("border").toInt() * 2);
                if (B < 0) {
                    B = 0
                }
                this.openClosePos = {
                    width: A,
                    height: B,
                    top: C.getCoordinates().top,
                    left: C.getCoordinates().left
                }
            }
        }
        else {
            if (this.options.fixedTop) {
                var D = this.options.fixedTop
            }
            else {
                var D = ((window.getHeight() / 2) - (this.options.initialHeight / 2) - this.container.getStyle("border").toInt()) + this.options.offset.y
            }
            this.openClosePos = {
                width: this.options.initialWidth,
                height: this.options.initialHeight,
                top: D,
                left: ((window.getWidth() / 2) - (this.options.initialWidth / 2) - this.container.getStyle("border").toInt()) + this.options.offset.x
            }
        }
        return this.openClosePos
    },
    open: function(A){
        this.options.onOpen();
        this.index = this.content.indexOf(A);
        this.openId = A.getProperty("id");
        if (!this.opened) {
            this.opened = true;
            if (this.options.useOverlay) {
                this.overlay.show()
            }
            this.container.setStyles(this.getOpenClosePos(A));
            this.container.setStyles({
                opacity: 0,
                display: "block"
            });
            if (this.options.fixedTop) {
                var B = this.options.fixedTop
            }
            else {
                var B = ((window.getHeight() / 2) - (this.options.initialHeight / 2) - this.container.getStyle("border").toInt()) + this.options.offset.y
            }
            this.containerEffects.start({
                width: this.options.initialWidth,
                height: this.options.initialHeight,
                top: B,
                left: ((window.getWidth() / 2) - (this.options.initialWidth / 2) - this.container.getStyle("border").toInt()) + this.options.offset.x,
                opacity: [0, 1]
            });
            this.load(this.index)
        }
        else {
            if (this.options.showControls) {
                this.hideControls()
            }
            this.getOpenClosePos(this.content[this.index]);
            this.timer = this.hideContent.bind(this).delay(500);
            this.timer = this.load.pass(this.index, this).delay(1100)
        }
    },
    getContent: function(A){
        this.setContentType(this.content[A]);
        var B = {};
        if (this.options.descClassName) {
            this.descriptions.each(function(D, C){
                if (D.hasClass(this.openId)) {
                    B = D.clone()
                }
            }, this)
        }
        this.contentToLoad = {
            title: this.content[A].title || "&nbsp;",
			//title: this.content[A] || "&nbsp;",
			//title: this.content || "&nbsp;",
            desc: B,
            number: A + 1
        }
    },
    close: function(){
        if (this.options.useOverlay) {
            this.overlay.hide()
        }
        if (this.options.showControls) {
            this.hideControls()
        }
        this.hideContent();
        this.containerEffects.stop();
        this.zoomOut.bind(this).delay(500);
        this.options.onClose()
    },
    zoomOut: function(){
        this.containerEffects.start({
            width: this.openClosePos.width,
            height: this.openClosePos.height,
            top: this.openClosePos.top,
            left: this.openClosePos.left,
            opacity: 0
        });
        this.reset.bind(this).delay(500)
    },
    load: function(B){
        this.box.addClass("MultiBoxLoading");
        this.getContent(B);
        if (this.type == "image") {
            var A = this.contentObj.xH;
            this.contentObj = new Asset.image(this.content[B].href, {
                onload: this.resize.bind(this)
            });
            this.contentObj.xH = A
        }
        else {
            this.resize()
        }
    },
    resize: function(){
        if (this.options.fixedTop) {
            var B = this.options.fixedTop
        }
        else {
            var B = ((window.getHeight() / 2) - ((Number(this.contentObj.height) + this.contentObj.xH) / 2) - this.container.getStyle("border").toInt() + window.getScrollTop()) + this.options.offset.y
        }
        var A = ((window.getWidth() / 2) - (this.contentObj.width / 2) - this.container.getStyle("border").toInt()) + this.options.offset.x;
        if (B < 0) {
            B = 0
        }
        if (A < 0) {
            A = 0
        }
        this.containerEffects.stop();
        this.containerEffects.start({
            width: this.contentObj.width,
            height: Number(this.contentObj.height) + this.contentObj.xH,
            top: B,
            left: A,
            opacity: 1
        });
        this.timer = this.showContent.bind(this).delay(500)
    },
    showContent: function(){
        this.box.removeClass("MultiBoxLoading");
        this.removeContent();
        this.contentContainer = new Element("div").setProperties({
            id: "MultiBoxContentContainer"
        }).setStyles({
            opacity: 0,
            width: this.contentObj.width + "px",
            height: (Number(this.contentObj.height) + this.contentObj.xH) + "px"
        }).injectInside(this.box);
        if (this.type == "image") {
            this.contentObj.injectInside(this.contentContainer)
        }
        else {
            if (this.type == "iframe") {
                new Element("iframe").setProperties({
                    id: "iFrame" + new Date().getTime(),
                    width: this.contentObj.width,
                    height: this.contentObj.height,
                    src: this.contentObj.url,
                    frameborder: 0,
                    scrolling: "auto"
                }).injectInside(this.contentContainer)
            }
            else {
                if (this.type == "htmlelement") {
                    this.elementContent.clone().setStyle("display", "block").injectInside(this.contentContainer)
                }
                else {
                    if (this.type == "ajax") {
                        new Ajax(this.contentObj.url, {
                            method: "get",
                            update: "MultiBoxContentContainer",
                            evalScripts: true,
                            autoCancel: true
                        }).request()
                    }
                    else {
                        var A = this.createEmbedObject().injectInside(this.contentContainer);
                        if (this.str != "") {
                            $("MultiBoxMediaObject").innerHTML = this.str
                        }
                    }
                }
            }
        }
        this.contentEffects = new Fx.Styles(this.contentContainer, {
            duration: 500,
            transition: Fx.Transitions.linear
        });
        this.contentEffects.start({
            opacity: 1
        });
        this.title.setHTML(this.contentToLoad.title);
        if (this.options.showNumbers) {
            this.number.setHTML(this.contentToLoad.number + this.options.stringImageCount + this.content.length)
        }
        else {
            this.number.setHTML("&nbsp;")
        }
        if (this.options.descClassName) {
            if (this.description.getFirst()) {
                this.description.getFirst().remove()
            }
            this.contentToLoad.desc.injectInside(this.description).setStyles({
                display: "block"
            })
        }
        if (this.options.showControls) {
            this.timer = this.showControls.bind(this).delay(800)
        }
    },
    hideContent: function(){
        this.box.addClass("MultiBoxLoading");
        this.contentEffects.start({
            opacity: 0
        });
        this.removeContent.bind(this).delay(500)
    },
    removeContent: function(){
        if ($("MultiBoxMediaObject")) {
            $("MultiBoxMediaObject").empty();
            $("MultiBoxMediaObject").remove()
        }
        if ($("MultiBoxContentContainer")) {
            $("MultiBoxContentContainer").remove()
        }
    },
    showControls: function(){
        this.clicked = false;
        if (this.container.getStyle("height") != "auto") {
            this.containerDefaults.height = this.container.getStyle("height");
            this.containerDefaults.backgroundColor = this.options.contentColor
        }
        this.container.setStyles({
            height: "auto"
        });
        if (this.contentToLoad.number == 1) {
            this.previousButton.addClass("MultiBoxPreviousDisabled")
        }
        else {
            this.previousButton.removeClass("MultiBoxPreviousDisabled")
        }
        if (this.contentToLoad.number == this.content.length) {
            this.nextButton.addClass("MultiBoxNextDisabled")
        }
        else {
            this.nextButton.removeClass("MultiBoxNextDisabled")
        }
        this.controlEffects.start({
            height: this.controls.getStyle("height")
        })
    },
    hideControls: function(A){
        this.controlEffects.start({
            height: 0
        }).chain(function(){
            this.container.setStyles(this.containerDefaults)
        }
.bind(this))
    },
    showThumbnails: function(){
    },
    next: function(){
        if (this.index < this.content.length - 1) {
            this.index++;
            this.openId = this.content[this.index].getProperty("id");
            if (this.options.showControls) {
                this.hideControls()
            }
            this.getOpenClosePos(this.content[this.index]);
            this.timer = this.hideContent.bind(this).delay(500);
            this.timer = this.load.pass(this.index, this).delay(1100)
        }
    },
    previous: function(){
        if (this.index > 0) {
            this.index--;
            this.openId = this.content[this.index].getProperty("id");
            if (this.options.showControls) {
                this.hideControls()
            }
            this.getOpenClosePos(this.content[this.index]);
            this.timer = this.hideContent.bind(this).delay(500);
            this.timer = this.load.pass(this.index, this).delay(1000)
        }
    },
    createEmbedObject: function(){
        if (this.type == "flash") {
            var A = this.contentObj.url;
            var B = new Element("div").setProperties({
                id: "MultiBoxMediaObject"
            });
            this.str = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" ';
            this.str += 'width="' + this.contentObj.width + '" ';
            this.str += 'height="' + this.contentObj.height + '" ';
            this.str += 'title="MultiBoxMedia">';
            this.str += '<param name="movie" value="' + A + '" />';
            this.str += '<param name="quality" value="high" />';
            this.str += '<embed src="' + A + '" ';
            this.str += 'quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" ';
            this.str += 'width="' + this.contentObj.width + '" ';
            this.str += 'height="' + this.contentObj.height + '"></embed>';
            this.str += "</object>"
        }
        if (this.type == "flashVideo") {
            var A = this.contentObj.url;
            var B = new Element("div").setProperties({
                id: "MultiBoxMediaObject"
            });
            this.str = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" ';
            this.str += 'width="' + this.contentObj.width + '" ';
            this.str += 'height="' + (Number(this.contentObj.height) + this.contentObj.xH) + '" ';
            this.str += 'title="MultiBoxMedia">';
            this.str += '<param name="movie" value="' + this.options.path + 'flvplayer.swf" />';
            this.str += '<param name="quality" value="high" />';
            this.str += '<param name="salign" value="TL" />';
            this.str += '<param name="scale" value="noScale" />';
            this.str += '<param name="FlashVars" value="path=' + A + '" />';
            this.str += '<embed src="' + this.options.path + 'flvplayer.swf" ';
            this.str += 'quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" ';
            this.str += 'width="' + this.contentObj.width + '" ';
            this.str += 'height="' + (Number(this.contentObj.height) + this.contentObj.xH) + '"';
            this.str += 'salign="TL" ';
            this.str += 'scale="noScale" ';
            this.str += 'FlashVars="path=' + A + '"';
            this.str += "></embed>";
            this.str += "</object>"
        }
        if (this.type == "flashMp3") {
            var A = this.contentObj.url;
            var B = new Element("div").setProperties({
                id: "MultiBoxMediaObject"
            });
            this.str = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" ';
            this.str += 'width="' + this.contentObj.width + '" ';
            this.str += 'height="' + this.contentObj.height + '" ';
            this.str += 'title="MultiBoxMedia">';
            this.str += '<param name="movie" value="' + this.options.path + 'mp3player.swf" />';
            this.str += '<param name="quality" value="high" />';
            this.str += '<param name="salign" value="TL" />';
            this.str += '<param name="scale" value="noScale" />';
            this.str += '<param name="FlashVars" value="path=' + A + '" />';
            this.str += '<embed src="' + this.options.path + 'mp3player.swf" ';
            this.str += 'quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" ';
            this.str += 'width="' + this.contentObj.width + '" ';
            this.str += 'height="' + this.contentObj.height + '"';
            this.str += 'salign="TL" ';
            this.str += 'scale="noScale" ';
            this.str += 'FlashVars="path=' + A + '"';
            this.str += "></embed>";
            this.str += "</object>"
        }
        if (this.type == "quicktime") {
            var B = new Element("div").setProperties({
                id: "MultiBoxMediaObject"
            });
            this.str = '<object  type="video/quicktime" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"';
            this.str += ' width="' + this.contentObj.width + '" height="' + this.contentObj.height + '">';
            this.str += '<param name="src" value="' + this.contentObj.url + '" />';
            this.str += '<param name="autoplay" value="true" />';
            this.str += '<param name="controller" value="true" />';
            this.str += '<param name="enablejavascript" value="true" />';
            this.str += '<embed src="' + this.contentObj.url + '" autoplay="true" pluginspage="http://www.apple.com/quicktime/download/" width="' + this.contentObj.width + '" height="' + this.contentObj.height + '"></embed>';
            this.str += "<object/>"
        }
        if (this.type == "windowsMedia") {
            var B = new Element("div").setProperties({
                id: "MultiBoxMediaObject"
            });
            this.str = '<object  type="application/x-oleobject" classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"';
            this.str += ' width="' + this.contentObj.width + '" height="' + this.contentObj.height + '">';
            this.str += '<param name="filename" value="' + this.contentObj.url + '" />';
            this.str += '<param name="Showcontrols" value="true" />';
            this.str += '<param name="autoStart" value="true" />';
            this.str += '<embed type="application/x-mplayer2" src="' + this.contentObj.url + '" Showcontrols="true" autoStart="true" width="' + this.contentObj.width + '" height="' + this.contentObj.height + '"></embed>';
            this.str += "<object/>"
        }
        if (this.type == "real") {
            var B = new Element("div").setProperties({
                id: "MultiBoxMediaObject"
            });
            this.str = '<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"';
            this.str += ' width="' + this.contentObj.width + '" height="' + this.contentObj.height + '">';
            this.str += '<param name="src" value="' + this.contentObj.url + '" />';
            this.str += '<param name="controls" value="ImageWindow" />';
            this.str += '<param name="autostart" value="true" />';
            this.str += '<embed src="' + this.contentObj.url + '" controls="ImageWindow" autostart="true" width="' + this.contentObj.width + '" height="' + this.contentObj.height + '"></embed>';
            this.str += "<object/>"
        }
        return B
    }
});
MultiBox.implement(new Options);
MultiBox.implement(new Events);

