/**************************************************************

 Script : AjaxBox:
 Desc: load of ajax content(type=ajax) or inline content (default)  in popup box, extenal open/close controll.
 Author: Stefano Curtoni

 based on :
 Script		: MultiBox
 Version		: 1.2
 Authors		: Samuel Birch
 Desc		: Supports jpg, gif, png, flash, flv, mov, wmv, mp3, html, iframe
 Licence		: Open Source MIT Licence
 **************************************************************/

var AjaxBox = new Class({
    getOptions: function(){
        return {
            initialWidth: 150,
            initialHeight: 300,
            container: document.body,
            contentColor: '#FFF',
            waitDuration: 2000,
            imageOpen:"",
            imageClose:"",
            onOpen: Class.empty,
            onClose: Class.empty
        };
    },

    initialize: function(className, options){
        this.setOptions(this.getOptions(), options);
        this.openClosePos = {};
        this.timer = 0;
        this.contentToLoad = {};
        this.index = 0;
        this.opened = false;
        this.contentObj = {};
        this.containerDefaults = {};

        this.content = $$('.' + className);

        this.container = new Element('div').addClass('AjaxBoxContainer').injectInside(this.options.container);

        this.box = new Element('div').addClass('AjaxBoxContent').injectInside(this.container);

        this.contentContainer =$E(".AjaxBoxContentContainer");

        this.content.each(function(el, i){

            el.index = i;
            el.target = $$("." + options.imageTarget);
            el.addEvent('click', function(e){
                new Event(e).stop();
                this.openClose(el);
            }.bind(this));

            if (el.href.indexOf('#') > -1) {
                el.content = $(el.href.substr(el.href.indexOf('#') + 1));
                if (el.content) {
                    el.content.setStyle('display', 'none');
                }
            }
        }, this);

        this.containerEffects = new Fx.Styles(this.container, {
            duration: 400,
            transition: Fx.Transitions.sineInOut
        });
        this.reset();
    },

    setContentType: function(link){
        var str = link.href.substr(link.href.lastIndexOf('.') + 1).toLowerCase();
        var contentOptions = {};

        if ($chk(link.rel)) {
            var optArr = link.rel.split(',');
            optArr.each(function(el){
                var ta = el.split(':');
                contentOptions[ta[0]] = ta[1];
            });
        }
        this.contentObj = {};

        this.contentObj.url = link.href;
        this.contentObj.xH = 0;

        if (contentOptions.width) {
            this.contentObj.width = contentOptions.width;
        }
        if (contentOptions.height) {
            this.contentObj.height = contentOptions.height;
        }
        if (contentOptions.panel) {
            this.panelPosition = contentOptions.panel;
        }
        else {
            this.panelPosition = this.options.panel;
        }

        switch (contentOptions.type) {
            case 'ajax':
                this.type = 'ajax';
                break;
      case 'iframe':
                this.type = 'iframe';
                break;
            default:
                this.type = 'html';
                break;
        }
    },

    reset: function(){
        this.container.setStyles({
            'opacity': 0,
            'display': 'none'
        });
        this.removeContent();
        this.opened = false;
    },

    getOpenClosePos: function(el){

    /* return the center point of open/close image*/
      if (el.getFirst()) {

            var w = el.getFirst().getCoordinates().width;
            var h = el.getFirst().getCoordinates().height;

            this.openClosePos = {
                width: 0,
                height: 0,
                top: el.getFirst().getCoordinates().top+(h/2).toInt(),
                left: el.getFirst().getCoordinates().left+(w/2).toInt()
            };
        }
        else {
           var w = el.getCoordinates().width;
           var h = el.getCoordinates().height;

            this.openClosePos = {
                width: 0,
                height: 0,
                top: el.getCoordinates().top+(h/2).toInt(),
                left: el.getCoordinates().left+(w/2).toInt()
            };
       }

        return this.openClosePos;
    },

    openClose: function(el){

        if (!this.opened) {

          el.getChildren("." + this.options.imageTarget).setProperty("src", this.options.imageClose);

            this.options.onOpen();

            this.index = this.content.indexOf(el);
            this.openId = el.getProperty('id');

            this.opened = true;

            this.container.setStyles(this.getOpenClosePos(el));

            this.container.setStyles({
                opacity: 0,
                display: 'block',
                opacity: 1
            });

            this.load(this.index);

        }

      /*close action*/
        else {

      el.getChildren("." + this.options.imageTarget).setProperty("src", this.options.imageOpen);

            this.opened = false;
            this.hideContent();
            this.containerEffects.stop();
            this.zoomOut.bind(this).delay(500);
            this.options.onClose();

        }
    },

    getContent: function(index){
        this.setContentType(this.content[index]);

        var desc = {};
        this.contentToLoad = {
            title: this.content[index].title,
            //desc: $(this.options.descClassName+this.content[index].id).clone(),
            desc: desc,
            number: index + 1
        };
    },

    zoomOut: function(){
    /*close effect*/
      this.containerEffects.start({
            width: 0,
            height: 0,
            top:this.openClosePos.top - 2*(this.container.getStyle('border').toInt()),
            left:this.openClosePos.left,
            opacity:[1,0]
        });

        this.reset.bind(this).delay(500);
    },

    load: function(index){
        this.box.addClass('AjaxBoxLoading');
        this.getContent(index);
        this.resize();
    },

    resize: function(){
    /*open effect*/
        var top = this.openClosePos.top - this.contentObj.height -2*(this.container.getStyle('border').toInt());
        var left = this.openClosePos.left //+ (this.container.getStyle('border').toInt());

        if (top < 0) {
            var top = this.openClosePos.top ;
            //top = 0
        }
    /*
     * add other controls
        if (left < 0) {
            var left = this.openClosePos.left //+ (this.container.getStyle('border').toInt());
        }
    */

      this.containerEffects.stop();

      this.containerEffects.start({
            width: this.contentObj.width,
            height: Number(this.contentObj.height) + this.contentObj.xH,
            top: top,
            left: left,
            opacity:[0,1]
        });
        this.timer = this.showContent.bind(this).delay(500);

    },

    showContent: function(){

        this.box.removeClass('AjaxBoxLoading');
        this.removeContent();

        this.contentContainer.setProperties({
            id: 'AjaxBoxContentContainer'
        }).setStyles({
            opacity: 0,
            width: this.contentObj.width + 'px',
            height: (Number(this.contentObj.height) + this.contentObj.xH) + 'px'
        }).injectInside(this.box);

        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 == 'ajax') {

                   new Ajax(this.contentObj.url, {
                        method: 'get',
                        update: 'AjaxBoxContentContainer',
                        evalScripts: true,
                        autoCancel: true
                    }).request();

                }
    else{

    }

        this.contentEffects = new Fx.Styles(this.contentContainer, {
            duration: 500,
            transition: Fx.Transitions.linear
        });
        this.contentEffects.start({
            opacity: 1
        });
    },

    hideContent: function(){

        //  this.box.addClass('AjaxBoxLoading');
        this.contentEffects.start({
            opacity: 0
        });
        this.removeContent.bind(this).delay(500);
    },

    removeContent: function(){
         if ($('AjaxBoxContentContainer')) {
            $('AjaxBoxContentContainer').remove();
        }
    }
});

AjaxBox.implement(new Options);
AjaxBox.implement(new Events);

/*************************************************************/