/**
 * Content
 *
 * @require     MooTools
 * @require     MooTools.NB
 * @require     MooTools.NB.Custom
 *
 * @author      Monin Dmitry
 * @version     1.00 alpha
 */

(function() {

var CHECKED_CLASS = "cake-filter-chk-checked";
var FILTER_CHECKED_CLASS = "cake-filter-chk-checked";
var DISABLED_CLASS= "cake-filter-disabled";
var HOVER_OFFSET_X = 22;
var HOVER_OFFSET_Y = 22;

MooTools.NB.Custom.CakeFinder = new Class ({
    initialize: function()
    {
        this.element = $('cake-finder');
        this.element.setStyle("visibility", "visible");
        this.productsEl = $('cake-finder-products');
        this.productsElWrap = $('cake-finder-products').getFirst();
        this.productsElWrap.addEvent("mouseover", this.onMouseOver.bindWithEvent(this));
        this.filterListEl = $('cake-finder-filter');
        this.loader = $("cake-finder-loader");
        
        this.scrollIncr = 71;
        this.isScrolling = false;
        
        this.data = [];
        
        this.scrollUp = $('cake-finder-scroll-up');
        this.scrollUp.addEvent("click", this.onScrollUp.bindWithEvent(this));
        
        this.scrollDown = $('cake-finder-scroll-down');
        this.scrollDown.addEvent("click", this.onScrollDown.bindWithEvent(this));
        
        this.element.addEvent("mouseleave", this.hideTooltip.bind(this));
        
        this.hover = $('cake-finder-hover');
        this.hover.addEvent("mousemove", this.onHoverMouseMove.bindWithEvent(this));
        
        this.hover.addEvent("mouseleave", this.onHoverMouseLeave.bindWithEvent(this));
        this.hoveredElement = null;
        this.hoveredElementPos = [0, 0];
        this.hoveredProduct = null;
        
        this.preloader = $('cake-finder-preloader');
        this.preloaded = [];
        
        this.form = $('cake-finder-form');
        this.timeOutId = 0;
        
        
        this.resetBtn = $('cake-finder-reset', this.onReset.bindWithEvent(this));
        this.resetBtn.addEvent("click", this.onReset.bindWithEvent(this));
        
        // Initializing filter
        this.filterListEl.addEvent("click", this.onClick.create({bind: this, event : true}));
        
        // Initializing checkboxes
        $$("a.cake-filter-chk").each(function(chk) {
            if(chk.getPrevious().checked)
            {
                //this.setCheckbox(chk);
                chk.addClass(CHECKED_CLASS);
                
                var isHeaderChk = chk.getParent().hasClass("cake-filter-hd");
                
                if(isHeaderChk)
                {
                    var filter = chk.getParent().getParent();
                    filter.addClass(FILTER_CHECKED_CLASS);
                    this.toggleFilter(filter);				
                }
                else
                {
                    var filter = chk.getParent().getParent().getParent();
                    var isCollapsible = (!filter.hasClass("cake-filter-expanded") && filter.getElements(".cake-filter-hd").length > 0);
                    
                    if(isCollapsible)
                    {
                       this.toggleFilter(filter);
                    }
                }				
            }
        }, this);
        
        this.loadProducts();
        this.updateHeight();
        
        this.preloadInitials.delay(500, this);
    }
});

MooTools.NB.Custom.CakeFinder.implement({
    disable : function() {
        this.loader.setStyle("width", this.element.offsetWidth + "px");
        this.loader.setStyle("height", Number(this.element.offsetHeight + 16) + "px");
        this.loader.setStyle("visibility", "visible");
        
    },
    enable : function() {
        this.loader.setStyle("visibility", "hidden");
        
    },
    disableAllFilters : function() {
        var childs = this.filterListEl.getChildren();
        for(var i = 0; i < childs.length; i++)
        {
            if(childs[i].hasClass("cake-filter"))
            {
                childs[i].addClass(DISABLED_CLASS);
            }
        }
        
        var checkboxes = this.filterListEl.getElements(".cake-filter-bd a.cake-filter-chk");
        for(i = 0; i < checkboxes.length; i++)
        {
            checkboxes[i].addClass(DISABLED_CLASS);
        }
    },
    hideTooltip : function() {
        this.hover.setStyle("visibility", "hidden");
    },
    loadProducts : function() {
        
        this.hideTooltip();
        
        this.scrollUp.setStyle("visibility", "hidden");
        this.scrollDown.setStyle("visibility", "hidden");
        
        this.disable();
        
        this.productsElWrap.innerHTML = "";
        
        this.productsEl.addClass("cake-finder-loader");
        this.form.set("send", {onComplete : function(response) {
              this.productsEl.removeClass("cake-finder-loader");
              
              var result;
              
              try
              {
                 eval('result=' + response);				 
              }
              catch(exc)
              {
                console.log(exc);
              }	
              finally 
              {
                 this.data = result.data;
                 
                 this.productsElWrap.innerHTML = result.html;
                 
                 this.productsElWrap.setStyle("top", "0px");
                 this.refreshScrollBars();
                 
                 this.updateFilter();
                 
                 this.enable();
              }          
              
        }.bind(this) });
        
        this.form.send('/index.php?eID=cakefinder&products_pid=' + CakeFinderConfig.productsPid + '&L=' + CakeFinderConfig.languageId);
        

    },
    onClick: function(e) {
        e.stop();
        
        e.target = $(e.target);
        
        
        if(e.target.hasClass("cake-filter-expander"))
        {
            this.toggleFilter(e.target.getParent().getParent());
        }
        else if(e.target.hasClass("cake-filter-chk"))
        {
            this.setCheckbox(e.target);
        }
    },
    onMouseOver : function(e) {
        
        if(this.isScrolling)
        {
            return;
        }
        
        e.target = $(e.target);
        
        if(e.target.tagName.toLowerCase() == "a")
        {

            if (e.target.getParent().hasClass('cake-finder-product-disabled'))
            {
                return;
            }

            this.showToolTip($(e.target.getFirst()));
        }
        else if(e.target.tagName.toLowerCase() == "img" && e.hoveredElement != e.target.parentNode)
        {
            if (e.target.getParent().getParent().hasClass('cake-finder-product-disabled'))
            {
                return;
            }


            this.showToolTip($(e.target));
        }
    },
    
    onHoverMouseMove : function(e) {
        if(e.page.x > this.hoveredElementPos.x + this.hoveredElement.offsetWidth)
        {
            this.hideTooltip();
        }
        else if(e.page.y > this.hoveredElementPos.y + this.hoveredElement.offsetHeight)
        {
            this.hideTooltip();
        }
        else if(e.page.x < this.hoveredElementPos.x)
        {
            this.hideTooltip();
        }
        else if(e.page.y < this.hoveredElementPos.y)
        {
            this.hideTooltip();
        }
    },
    onHoverMouseLeave : function(e) {
        
        
        this.hideTooltip();
    },
    onReset : function(e) {
        e.stop();
        
        // Unchecking all
        var checkboxes = this.element.getElements('a.cake-filter-chk');
        for(i = 0; i < checkboxes.length; i++)
        {
            checkboxes[i].removeClass(CHECKED_CLASS);
            checkboxes[i].getPrevious().checked = false;                
        }
        
        this.element.getElements('.cake-filter').each(function(el) {
            el.removeClass(FILTER_CHECKED_CLASS);
        });
        
        this.loadProducts();
    },
    onScrollDown : function(e) {
        e.stop();
        
        this.scroll(-this.scrollIncr);
    },
    onScrollUp : function(e) {
        e.stop();
        
        this.scroll(this.scrollIncr);
        
    },
    preload : function(img) {
        if(typeof img == "object" && img.length)
        {
            for(var i = 0; i < img.length; i++)
            {
                this.preload(img[i]);
            }
        }
        else if(typeof img == "string" && img.match(/<img/))
        {
            var div = document.createElement("div");
            div.innerHTML = img;
            this.preloader.appendChild(div);
        }
        else if(typeof img  == "string")
        {
            var imgObj = document.createElement("img");
            imgObj.src = img;
            this.preloader.appendChild(imgObj);
        }
    },
    preloadInitials : function() {
        var path = "/fileadmin/inc/img/xshared/backgrounds/";
        this.preload(path + "bg-cake-finder-hover.png");
        this.preload(path + "bg-product-tooltip.png");
        this.preload(path + "bg-product-tooltip-btm.png");
        
    },
    scroll : function(dif) {
        if(this.isScrolling)
        {
            return;
        }
        this.isScrolling = true;
        
        var outerHeight = this.productsEl.getSize().y;
        var innerHeight = this.productsElWrap.getSize().y;
        
        var max = 0;
        var min = -(innerHeight - outerHeight);
        
        var offsetY = this.productsElWrap.getPosition(this.productsEl).y;
        offsetY += dif;
        
        offsetY = Math.max(min, offsetY);
        offsetY = Math.min(max, offsetY);
        
        var tween = new Fx.Tween(this.productsElWrap, {
            onComplete : (function() {
              this.isScrolling = false;
              this.refreshScrollBars();        		
            }).bind(this)
        });
        tween.start("top", offsetY);
        
        this.refreshScrollBars.delay(100, this);
        
        
    },
    showToolTip : function(img) {
        
        // Checking if image is visible
        if(!img)
        {
            return;
        }
        var elPos = img.getParent().getParent().getPosition(this.productsEl);
        if(elPos.y + img.offsetHeight > this.productsEl.offsetHeight || elPos.y < 0)
        {
            return;
        }
        
        // finding product
        this.hoveredProduct = null;
        var productId = img.getParent().getParent().id.match(/cake-finder-product-([0-9]+)/)[1];
        for(var i = 0; i < this.data.products.length; i++)
        {
            if(this.data.products[i].uid == productId)
            {
                this.hoveredProduct = this.data.products[i];
            }
        }
        
        if(!this.hoveredProduct)
        {
            return;
        }
        
        this.hover.setStyle("visibility", "visible");
        this.hover.getFirst().innerHTML = '<img src="' + img.src + '" title="' + this.hoveredProduct.name + '" width="' + img.width + '" height="' + img.height + '" />';
        this.hover.getFirst().href = this.hoveredProduct.url;
        this.hover.getLast().innerHTML = this.hoveredProduct.imageHtml;
        
        var imgPos = img.getPosition(this.productsEl);
        var x = imgPos.x - HOVER_OFFSET_X;
        var y = imgPos.y - HOVER_OFFSET_Y;
        
        this.hover.setStyle("left", x + "px");
        this.hover.setStyle("top", y + "px");
        this.hoveredElement = img.getParent(); 
        this.hoveredElementPos = this.hoveredElement.getPosition();
        
        // Is outside browser window bounds?
        
        if(this.hoveredElementPos.y  - 270 < window.getScroll().y)
        {
           this.hover.addClass("cake-finder-hover-bottom");
        }
        else
        {
           this.hover.removeClass("cake-finder-hover-bottom");
        }
        
        
    },
    refreshScrollBars : function() {
        
        var outerHeight = this.productsEl.getSize().y;
        var innerHeight = this.productsElWrap.getSize().y;
        
        if(innerHeight > outerHeight)
        {
            // showing scrollbars
            var offset = this.productsElWrap.getPosition(this.productsEl);
            
            var scrollUpVis   = (offset.y < 0) ? 'visible' : 'hidden';
            this.scrollUp.setStyle("visibility", scrollUpVis);
            
            var scrollDownVis = (-offset.y < innerHeight - outerHeight) ? 'visible' : 'hidden';
            this.scrollDown.setStyle("visibility", scrollDownVis);			
        }
        
    },
    setCheckbox : function(checkbox) {
        
        // Chekcing if checkbox is disabled
        if(checkbox.hasClass(DISABLED_CLASS))
        {
            return;
        }
        // Whole Filter is checked
        else if(checkbox.getParent().getParent().getParent().hasClass(FILTER_CHECKED_CLASS))
        {
            return;			
        }
        
        var parents = checkbox.getParents();
        for(var i = 0; i < parents.length; i++)
        {
            if(parents[i].hasClass(DISABLED_CLASS))
            {
                return;
            }
        }
        
        var checked = checkbox.hasClass(CHECKED_CLASS);
        if(checked)
        {
            checkbox.removeClass(CHECKED_CLASS);            
        }
        else
        {
            checkbox.addClass(CHECKED_CLASS);		
        }
        checked = !checked;
        
        checkbox.getPrevious().checked = checked;
        
        if(checkbox.getParent().hasClass("cake-filter-hd"))
        {
            if(checked)
            {
                // Unchecking all
                var checkboxes = checkbox.getParent().getNext().getElements('a.cake-filter-chk');
                for(i = 0; i < checkboxes.length; i++)
                {
                    checkboxes[i].removeClass(CHECKED_CLASS);
                    checkboxes[i].getPrevious().checked = false;				
                }
                
                checkbox.getParent().getParent().addClass(FILTER_CHECKED_CLASS);            
            }
            else
            {
                checkbox.getParent().getParent().removeClass(FILTER_CHECKED_CLASS);
            }
        }
        else if(checked)
        {
            var hd = checkbox.getParent().getParent().getPrevious();
            if(hd)
            {
                var chk = hd.getElements("a.cake-filter-chk");
                if(chk.length > 0)
                {
                   chk[0].removeClass(CHECKED_CLASS);
                   chk[0].getPrevious().checked = false;
                }
            }
        }
        
        
        this.loadProducts();
    },
    toggleFilter: function(filterEl) {
        var filterBd = filterEl.getElements("div.cake-filter-bd")[0];
        var display = filterBd.getStyle("display");
        
        if(display == "none")
        {
            filterBd.setStyle("display", "block");
            filterEl.addClass("cake-filter-expanded");
        }
        else
        {
            filterBd.setStyle("display", "none");
            filterEl.removeClass("cake-filter-expanded");
        }
        
        this.updateHeight();
    },
    updateHeight : function() {
        this.productsEl.setStyle("height", "1px");
        
        var height = this.element.offsetHeight - 10;
        
        if(Browser.Engine.trident && Browser.Engine.version < 5)
        {
            height -= 5;
        }
        
        this.productsEl.setStyle("height", height + "px");
        this.refreshScrollBars();
    },
    updateFilter : function() {
        
    	this.disableAllFilters();
        
        for(var i = 0; i < this.data.possibleTagGroups.length; i++)
        {
            var filterElementId = "cake-filter-" + this.data.possibleTagGroups[i];
            if($(filterElementId))
            {
            	$(filterElementId).removeClass(DISABLED_CLASS);
            }
            else
            {
            	//console.log("wrong tag group", this.data.possibleTagGroups[i]);
            }
        }
        
        for(i = 0; i < this.data.possibleTags.length; i++)
        {
            var chkElementId = "cake-filter-tag-" + this.data.possibleTags[i];
            if($(chkElementId))
            {
            	$(chkElementId).removeClass(DISABLED_CLASS);
            }
            else
            {
            	//console.log("wrong tag", this.data.possibleTags[i]);
            }            	
        }
    }
});

window.addEvent('domready', function() {
    var controller = new MooTools.NB.Custom.CakeFinder();
});

})();