window.size = function() {
    var w = 0;
    var h = 0;
    
    //IE
    if(!window.innerWidth) {
        //strict mode
        if(!(document.documentElement.clientWidth == 0)) {
            w = document.documentElement.clientWidth;
            h = document.documentElement.clientHeight;
        }
        //quirks mode
        else {
            w = document.body.clientWidth;
            h = document.body.clientHeight;
        }
    }
    //w3c
    else {
        w = window.innerWidth;
        h = window.innerHeight;
    }
    return {width:w,height:h};
}

function getScrollXY() {
    var scrOfX = 0, scrOfY = 0;
    if( typeof( window.pageYOffset ) == 'number' ) {
        //Netscape compliant
        scrOfY = window.pageYOffset;
        scrOfX = window.pageXOffset;
    } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
        //DOM compliant
        scrOfY = document.body.scrollTop;
        scrOfX = document.body.scrollLeft;
    } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
        //IE6 standards compliant mode
        scrOfY = document.documentElement.scrollTop;
        scrOfX = document.documentElement.scrollLeft;
    }
    return {'x': scrOfX, 'y': scrOfY};
}

Ext.onReady(function() {
    var relatedItemsEl = Ext.get("related-items");
    if (relatedItemsEl) {
        
        var showCount = 5;
        var actionLink = relatedItemsEl.child("div.actions a");
        var isHidden = false;
        
        var hideShowRelations = function() {
            var allLinks = relatedItemsEl.query("ul li");
            if (allLinks.length > showCount) {
                var actions = Ext.query("div.actions");
                Ext.each(actions, function(actionEl) {
                    Ext.fly(actionEl).setStyle("display", "block");
                });
            }
            var links = allLinks.slice(showCount);
            Ext.each(links, function(link) {
                Ext.fly(link).setStyle("display", isHidden ? "block" : "none");
            });
            isHidden = !isHidden;
            actionLink.update(isHidden ? MORE__TRANSLATION : LESS__TRANSLATION);
        };
        
        hideShowRelations();
        
        actionLink.on("click", function() {
            hideShowRelations();
        }, this, {preventDefault: true});
    }
    
    
    
    var articleDetailsLinkEl = Ext.get("article-details-link");
    var articleDetailsEl = Ext.get("article-details");
    if (articleDetailsLinkEl && articleDetailsEl) {
        
        articleDetailsLinkEl.on("click", function() {
            articleDetailsEl.setStyle("display", "block");
            articleDetailsLinkEl.setStyle("display", "none");
        }, this, {preventDefault: true});
    }
    
    
    var expandActicleTreeContainers = Ext.query("li a span.expand-collapse");
    Ext.each(expandActicleTreeContainers, function(spanEl) {
        Ext.fly(spanEl).on("click", function() {
            container = Ext.fly(spanEl).parent().parent().child("ul");
            if (container) {
                container.setVisibilityMode(Ext.Element.DISPLAY);
                container.setVisible(!container.isVisible());
                
                // toggle plus, minus icons
                var parentContainer = Ext.fly(spanEl).parent().parent();
                if (parentContainer) {
                    if (!container.isVisible()) {
                        Ext.fly(spanEl).update(EXPAND__TRANSLATION);
                        Ext.fly(spanEl).set({'title': EXPAND__TRANSLATION});
                        parentContainer.removeClass("expanded");
                    } else {
                        Ext.fly(spanEl).update(COLLAPSE__TRANSLATION);
                        Ext.fly(spanEl).set({'title': COLLAPSE__TRANSLATION});
                        parentContainer.addClass("expanded");
                    }
                }
            }
        }, this, {preventDefault: true});
    });
    
    
    // article media preview handling
    var mediaThumbnails = Ext.query("img.article-media-thumb");
    if (mediaThumbnails) {
        
        var getPreviewEl = function(thumbId) {
            var referenceNumber = thumbId.split("-").shift();
            if (referenceNumber) {
                return Ext.get(referenceNumber + "-large");
            }
            return null;
        };
        
        var tasks = {};
        Ext.each(mediaThumbnails, function(thumbEl) {
            
            Ext.fly(thumbEl).on("mouseover", function(event, target) {
                tasks[thumbEl.id] = new Ext.util.DelayedTask(function() {
                    
                    var referenceNumber = thumbEl.id.split("-").shift();
                    var previewElementInDom = Ext.get(referenceNumber + '-large');
                    
                    var showPreview = function(previewEl) {
                        previewEl.setStyle("display", "block");
                        var windowSize = window.size();
                        
                        var scrollPos = getScrollXY();
                        previewEl.setX(Math.ceil(windowSize.width / 2) - Math.ceil(previewEl.getWidth() / 2));
                        previewEl.setY(Math.ceil(windowSize.height / 2) - Math.ceil(previewEl.getHeight() / 2) + scrollPos.y);
                    };
                    
                    if (!previewElementInDom) {
                        Ext.Ajax.request({
                            url: MEDIA_PREVIEW_URL,
                            method: 'GET',
                            success: function(result, request) {
                                Ext.DomHelper.insertBefore(Ext.get("content-body"), result.responseText);
                                showPreview(getPreviewEl(thumbEl.id));
                            },
                            params: {'lang': CURRENT_LANGUAGE, 'ref_id': referenceNumber}
                        });
                    } else {
                        showPreview(previewElementInDom);
                    }
                
                });
                tasks[thumbEl.id].delay(500); 

            });
            
            Ext.fly(thumbEl).on("mouseout", function() {
                tasks[thumbEl.id].cancel();
                var previewEl = getPreviewEl(thumbEl.id);
                if (previewEl) {
                    Ext.fly(previewEl).setStyle("display", "none");
                }
            });
        
        });
    }
});