//append a browser-specific stylesheet to the head
function setCSS() {
    //create CSS stylesheet
    var css = document.createElement("link");
    css.setAttribute("type", "text/css");
    css.setAttribute("rel", "Stylesheet");
    if (Ext.isIE6) {
        css.setAttribute("href", "/Common/IE6.css");
        //        var pngFix = document.createElement("script");
        //        pngFix.setAttribute("type", "text/javascript");
        //        pngFix.setAttribute("src", "/UserControls/Trakkware/Png_Fix.js");
        //        document.getElementsByTagName("head")[0].appendChild(pngFix);
    }
    else if (Ext.isIE7) { css.setAttribute("href", "/Common/IE7.css") }
    else if (Ext.isSafari) { css.setAttribute("href", "/Common/Safari.css") }
    else if (Ext.isMac && Ext.isGecko) { css.setAttribute("href", "/Common/MacFX.css") }
    else { css.setAttribute("href", ""); }
    document.getElementsByTagName("head")[0].appendChild(css);
};

// create an animated pop-out window to show content like an URL or form
function showWindow(button, url, title, width, height, skin, id) {
    var win;
    //set optional parameters
    title == undefined ? title = button.title : title = title;
    skin == undefined ? skin = null : skin = skin + '.css';
    width == undefined ? width = 670 : width = width;
    height == undefined ? height = 600 : height = height;
    // create the window on the first click and reuse on subsequent clicks 
    if (!win) {
        win = new Ext.Window({
            id: (id) ? id : Ext.id(),
            layout: 'fit',
            width: width, //670
            height: height, //600
            closeAction: 'close',
            modal: 'true', /* masks the background on opening when true*/
            plain: true,
            draggable: false,
            resizable: false,
            animateTarget: button,
            animShow: function() {
                this.proxy.show();
                this.proxy.setBox(this.animateTarget.getBox());
                this.proxy.setOpacity(0.5);
                var b = this.getBox(false);
                b.callback = this.afterShow;
                b.scope = this;
                b.duration = 0.6;
                b.easing = 'easeIn';
                b.opacity = 0.5;
                b.block = true;
                this.el.setStyle('display', 'none');
                this.proxy.shift(b);
            },
            items: new Ext.ux.ManagedIframePanel(
                {
                    defaultSrc: url,
                    loadMask: false
                }
            ),
            buttons: [{
                text: 'Close',
                handler: function() {
                    win.close();
                }
}],
				listeners: { show: function() { Ext.getBody().on('click', function() { win.close(); } ); },
					close: close_method
				}
			});
		}
		win.show();
		function close_method() {
			Ext.getBody().un('click', close_method);
			Ext.ns('WeledaHomePage');
			if (WeledaHomePage.embedFlash)
				WeledaHomePage.embedFlash();
		}

    };

    /*----------find all PopOut windows set triggers and panels --------------- */
    /*loop through the page to find all PopOut windows and set their triggers and panels*/
    // each one must be wrapped with a div class="openWindowWrapper"
    //each trigger needs a class="more-btn"
    //the div you want to show popping up (panel) should have class="finalDiv"
    //give finalDiv attributes "alignDiv" and "offsets" (separated by comma) to align the pop-op window
    function setAllPopOutWindows() {
        Ext.onReady(function() {
            Ext.get(document.body).select('.openWindowWrapper').each(function(el) {
                if ((Ext.get(el).child('.more-btn') != null) || (Ext.get(el).child('.finalDiv'))) {
                    var trigger = Ext.get(el).child('.more-btn');
                    var panel = Ext.get(el).child('.finalDiv');
                    var align = Ext.get(el).child('.finalDiv').getAttributeNS('tag', 'alignDiv') != null ? Ext.get(el).child('.finalDiv').getAttributeNS('tag', 'alignDiv') : 'tr-tl';
                    var strOffsets = Ext.get(el).child('.finalDiv').getAttributeNS('tag', 'offsets') != null ? Ext.get(el).child('.finalDiv').getAttributeNS('tag', 'offsets') : '-5,0';
                    var offsets = []
                    offsets[0] = parseInt(strOffsets.split(",")[0]);
                    offsets[1] = parseInt(strOffsets.split(",")[1]);
                    var control = new Trakkware.OpenWindow({
                        trigger: trigger,
                        panel: panel,
                        align: align,
                        offset: offsets
                    });
                }
                else { }
            });
        });
    };

    /*----------------OpenWindow pop-out--------------*/
    //config options= 
    //trigger & panel, where to align (eg. 'tl-br'), alignment offsets ( as array [5, 10])
    Ext.namespace('Trakkware', 'Trakkware.OpenWindow');
    // triggerEl
    Trakkware.OpenWindow = function(config) {
        Ext.applyIf(this, config, {
    });
    this.triggerEl = Ext.get(this.trigger);
    this.panelEl = Ext.get(this.panel);
    if (!this.triggerEl || !this.panelEl) {
        alert("both trigger(" + this.trigger + ") and panel(" + this.panel + ") need to be set");
        return;
    }
    this.triggerEl.on('click', this.showWindowControl, this);
    this.panelEl.child('.hide-btn').on('click', this.hideWindowControl, this);
    this.proxy = this.triggerEl.createProxy("x-window-proxy");
    this.proxy.enableDisplayMode('block');
}
Ext.extend(Trakkware.OpenWindow, Ext.util.Observable, {
    showWindowControl: function() {
        Ext.get(document.body).select('.finalDiv').setStyle('display', 'none');
        this.proxy.show();
        this.proxy.setBox(this.triggerEl.getBox());
        this.proxy.setOpacity(0);
        this.panelEl.setStyle('display', 'block');
        this.panelEl.setStyle('z-index', '1000');
        this.panelEl.alignTo(this.triggerEl, this.align + '?', this.offset, 0);
        var b = this.panelEl.getBox(false);
        b.callback = this.afterShow;
        b.scope = this;
        b.duration = .2;
        b.easing = 'easeNone';
        b.opacity = .5;
        b.block = true;
        this.panelEl.setStyle('display', 'none');
        this.proxy.shift(b);
    },
    afterShow: function() {
        this.proxy.setStyle('display', 'none');
        this.panelEl.setStyle('display', 'block');
    },
    hideWindowControl: function() {
        this.panelEl.setStyle('display', 'none');
    }
});

/*-------expanding item ----------
pass in "this" (trigger link). 
Wrap the whoe item with class= "expandableItemWrapper", and give the slide-out section class="expandSection"
---------------------------------*/
function expandSection(button) {
    var el = Ext.get(button).up('.expandableItemWrapper', 5).child('.expandSection');
    if (el.hasClass('hidden')) {
        el.slideIn('t', {
            easing: 'easeOut',
            duration: 0.5,
            useDisplay: true
        });
        el.toggleClass('hidden');
        el.toggleClass('expanded');
    } else if (el.hasClass('expanded')) {
        el.slideOut('t', {
            easing: 'easeOut',
            duration: 0.5,
            remove: false,
            useDisplay: true
        });
        el.toggleClass('expanded');
        el.toggleClass('hidden');
    }
};

/*----------------------------------
toggle the appearance of the top section text in an expanding Div
-----------------------------------*/
function toggleShortText(button) {
    var el = Ext.get(button).up('.expandableItemWrapper', 5).child('.shortDescription');
    el.toggleClass('show');
    el.toggleClass('hide');
};

/*--------------------------------
toggle the visibility of the more/close buttons
give the more button class="more-btn show" to start
give the hide button class="more-btn hide" to start
---------------------------------*/
function toggleVisibility(button) {
    Ext.get(button).up('.expandableItemWrapper', 5).select('.more-btn').each(function(el) {
        el.toggleClass('show');
        el.toggleClass('hide');
    });

};

/*----------------------------------
close the expanded section by a button
in the lower section
-----------------------------------*/
function closeButton(el) {
    var el1 = Ext.get(el).up('.expandWrapper', 5).child('.more-btn');
    expandSection(el1);
};

/*---------------------
text truncator
takes 3 arguments:
long text container, destination of chopped text(optional, defaults to longtext container), chop length (optional, defaults to 25)
also creates an ellipse on the shortened version
----------------------*/
function chopText(el, el2, length) {
    el2 == undefined ? el2 = el : el2 = el2;
    length == undefined ? length = 25 : length = length;
    var cleanEl = Ext.get(el);
    var chopEl = Ext.get(el2);

    cleanEl.dom.origText = cleanEl.dom.innerHTML; //console.log(cleanEl.dom.origText);
    chopEl.update(Ext.util.Format.ellipsis(Ext.util.Format.stripTags(cleanEl.dom.origText), length));
};

function selectAll(ctl) {
    if (ctl.value == 'Enter Keyword(s)') {
        ctl.value = '';
    }
    else {
        ctl.select();
    }
};
/*------------------------------------
search for any rowWrappers on page so that new classes can be applied to them or sub items
takes an element inside which to look for rowWrappers
calls function to find certain items inside the last rowWrapper
-----------------------------------*/
function findRowWrappers(el) {
    var lastRowWrapper = Ext.get(el).select('.rowWrapper').last();
    if (null == lastRowWrapper) { }
    else if (null !== lastRowWrapper) {
        findLastRowItems(lastRowWrapper)
    }
};
/*--------------------------------
within the last row wrapper, find the items to change class
--------------------------------*/
function findLastRowItems(el) {
    Ext.get(el).select('.ingItem').each(function(el) {
        Ext.get(el).addClass('last');
    });
    Ext.get(el).select('.productListItem').each(function(el) {
        Ext.get(el).addClass('last');
        Ext.get(el).select('.productListItemInnerBoundingBox').each(function(el) {
            Ext.get(el).addClass('last');
        });
    });
    Ext.get(el).select('.horizontalVideoItem').each(function(el) {
        Ext.get(el).addClass('last');
    });
    Ext.get(el).select('.contentTagGroupGridItemInnerBoundingBox').each(function(el) {
        Ext.get(el).addClass('last');
    });
    Ext.get(el).select('.horizontalSiteMapSiblingsItem').each(function(el) {
        Ext.get(el).addClass('last');
    });
    Ext.get(el).select('.employeeCollectionItem').each(function(el) {
        Ext.get(el).addClass('last');
        Ext.get(el).select('.employeeCollectionItemInnerBoundingBox').each(function(el) {
            Ext.get(el).addClass('last');
        });
    });

    Ext.get(el).select('.horizontalVideoItem').each(function(el) {
        Ext.get(el).addClass('last');
        Ext.get(el).select('.contentTagGroupGridItemInnerBoundingBox').each(function(el) {
            Ext.get(el).addClass('last');
        });
    });
    Ext.get(el).select('.contentCollectionItemInnerBoundingBox').each(function(el) {
        Ext.get(el).addClass('last');
    });
};