var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);
var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);

Event.observe(document, 'dom:loaded', function() {
    toggleNavIE();
    equalizeHeight($$('.drilldown-main'));
    pngFix();
    imgHover();
    addHover('.button');
    horizontalCarousel();
    verticalCarousel();
    productSwitcher();
    pricePicker();
    tabSwitcher();
    BrandImageBg();
    checkInputCaps();
    toolbarLimiter();
});

    function toolbarLimiter() {
        /* tootlbar limiter dropdown list */
        /* I had put it here, I didn't want to duplicate the same JS code in multiple templates */
        if($$('.toolbar .limiter').length > 1) {
            $$('.limiter').invoke('observe','click',function(){
                if(!this.hasClassName('open')) {
                    this.addClassName('open');
                } else {
                    this.removeClassName('open');
                }
            })
        }
    }
    

    function checkInputCaps() {

        if($$('form.checkCaps').length > 0)
        {
            $$('form.checkCaps input[type=text], form.checkCaps textarea').invoke('observe', 'keyup', function(event) {
                if((event.keyCode<37 || event.keyCode>40) && event.keyCode!=8 && event.keyCode!=9){
                    var position = getSelectionStart(this);
                    if(!this.hasClassName('validate-email')) {
                        position = checkCAPS(this, false, position);
                    }
                    textSelect(this, position);
                }
            });

            var events = new Array('click');
            for(var i = 0; i < events.length; i++) {
                $$('form.checkCaps input[type=text], form.checkCaps textarea').invoke('observe', events[i], function() {
                    var position = getSelectionStart(this);
                    if(!this.hasClassName('validate-email')) {
                        position = checkCAPS(this, false, position);
                    }
                    textSelect(this, position);
                });
            }
        }
    }

    /* Check if given string contains French accents and repleace it with non-accent chars,
     * any other letters are delated from strong, returned string contains only Capitalize letters, and numbers */
    function checkCAPS(o,simple, position){


        var accents = 'ÀÁÂÃÄÅàáâãäåÒÓÔÕÕÖØòóôõöøÈÉÊËèéêëðÇçÐÌÍÎÏìíîïÙÚÛÜùúûüÑñŠšŸÿýŽž';
        var accentsOut = ['A','A','A','A','A','A','A','A','A','A','A','A','O','O','O','O','O','O','O','O','O','O','O','O','O','E','E','E','E','E','E','E','E','E','C','C','D','I','I','I','I','I','I','I','I','U','U','U','U','U','U','U','U','N','N','S','S','Y','Y','Y','Z','Z'];
        var strAccents = o.value.split('');
        var strAccentsOut = new Array();
        var strAccentsLen = strAccents.length;

        for (var y = 0; y < strAccentsLen; y++) {
            if (accents.indexOf(strAccents[y]) != -1) {
                strAccentsOut[y] = accentsOut[accents.indexOf(strAccents[y])];
            }
            else
                if(simple){
                    strAccentsOut[y] = strAccents[y].toUpperCase().replace(/([^A-Z0-9,;:!?()@*�"\' \.\-\n])/g,"");
                }
                else{
                    strAccentsOut[y] = strAccents[y].toUpperCase().replace(/([^A-Z0-9,�\' \.\-\n])/g,"");
                }
        }
        strAccentsOut = strAccentsOut.join('');
        if(strAccents.length > strAccentsOut.length)
            position = position-1;
        o.value = strAccentsOut;

        if(simple)
            o.scrollTop = o.scrollHeight;
        return position;
    }


function BrandImageBg() {
    if($$('.catalog-category-view .category-description img').length > 0) {
        var picker = $$('.catalog-category-view .category-description img')[0];
        picker.up().addClassName('brand-image');
    }
}

function pricePicker() {

    var i=0;
    var j=0;
    var sel = null;
    var picker = $$('.price-picker li');
    var ranges = $$('.price-ranges li');

  if(!$$('.state-price')[0]){
    // Checking if is selected
    for(j=0;j<picker.length;j++) {
        if(picker[j].hasClassName('selected')) {
            ranges[j].show();
            var sel = j;
        }
    }

    picker.each(function(li){
        // Adding class name for each Price Range
        eval("li.down('span').addClassName('range"+i+"')");
        i++;

        // Mouse over/out handler
        Event.observe(li,'mouseover',function(e){


            this.addClassName('over');
            var cur = e.findElement('li');
            for(k=0;k<picker.length;k++) {
                if(cur == picker[k]) {
                    if(sel)
                        ranges[sel].hide();
                    ranges[k].show();
                }
            }
        });
        Event.observe(li,'mouseout',function(){

            this.removeClassName('over');
            for(p=0;p<ranges.length;p++){
                if(sel)
                    ranges[sel].show();
                if(!picker[p].hasClassName('selected'))
                    ranges[p].hide();
            }
        });

    });
  }

}
/* Simple Opener - add class name, for parent element */
function simpleOpener(cls,step) {

    var openers = $$(cls);
    openers.each(function(e){
        e.observe('click', function(){
            e.up(step).toggleClassName('open');
        })
    })
}

function productSwitcher() {

    $$('.category-products li.container .avalible-colors, .category-products li.coup-de-coeur .avalible-colors').each(function(list){
       Event.observe(list,'click', function(event) {
           var cur = event.findElement('li');
           if(!cur.hasClassName('active')) {
                var children_arr = list.childElements();
                var prod_arr = list.next('.product-container').down('ul').childElements();

                if(children_arr.length == prod_arr.length) {
                    for(i=0;i<children_arr.length;i++) {
                        children_arr[i].removeClassName('active');
                        if(children_arr[i] == cur) {
                            prod_arr[i].show();
                        } else {
                            prod_arr[i].hide();
                        }
                    }
                    cur.addClassName('active');
                }
           }
       });
    });
}

//adding class="over" on main navigation items mouseenter
function toggleNavIE() {
    $$('#nav li.main-option').each(function(item) {
        item.onmouseenter = function() {$(this).addClassName('over');}
        item.onmouseleave = function() {$(this).removeClassName('over');}
    })
}

//setting equal height for elements of the list:
function equalizeHeight(pLists) {
    if(pLists) {
        pLists.each(function(pList) {
            var pItems = pList.childElements();
            var pHeight = 0;
            for(i=0; i <pItems.length; i++) {
                if(pItems[i].getHeight() > pHeight)
                    pHeight = pItems[i].getHeight();
            }

            pItems.invoke('setStyle', {height: pHeight + 'px'});
        });
    }
}

//left sidebar opener
//function sideBarOpener() {
function toggleOpener(openers) {
    var links = $$(openers);
    links.each(function(item) {
        Event.observe(item, 'click', function() {
            item.up('li').toggleClassName('open')
        });
    });
}

function addHover(elem,cls) {

    var elemTags = $$(elem);
    if(!cls)
        var cls = 'hover';

    elemTags.each(function(e){
        Event.observe(e,'mouseover',function(){
            this.addClassName(cls);
        });
        Event.observe(e,'mouseout',function(){
            this.removeClassName(cls);
        });
    })
}

/*---------------------------------------------------------------------------*/
function imgHover() {

    var buttons = $$('img.btn-hover');

    for(var i=0, images=[]; i<buttons.length; i++) {
        var newSrc = buttons[i].src.replace('.png', '-on.png');
        var j;
        var check = false;
        for(j=0; j<images.length; j++) {
            if(images[j].src == newSrc) {
                check = true;
                break;
            }
        }
        if(!check) {
            images.push(new Image());
            images.last().src = newSrc;
        }
    }

    for(var i=0; i<images.length; i++) {
        images[i].onload = function() {
            for(j=0; j<buttons.length; j++) {
                origSrc = this.src.replace('-on', '');
                if(buttons[j].src == origSrc) {
                    if(buttons[j].parentNode.nodeName == 'BUTTON') {
                        Element.extend(buttons[j].parentNode);
                        buttons[j].parentNode.observe('mouseover', function(){
                            childImg = this.down('img');
                            childImg.src = childImg.src.replace('.png', '-on.png');
                        });
                        buttons[j].parentNode.observe('mouseout', function(){
                            childImg = this.down('img');
                            childImg.src = childImg.src.replace('-on', '');
                        });
                    }
                    else if(buttons[j].hasClassName('nav-img')) {
                        buttons[j].up('li').observe('mouseover', function(){
                            childImg = this.down('img');
                            childImg.src = childImg.src.replace('.png', '-on.png');
                            toggleMenu(this,1);
                        });
                        buttons[j].up('li').observe('mouseout', function(){
                            childImg = this.down('img');
                            childImg.src = childImg.src.replace('-on', '');
                            toggleMenu(this,0);
                        });
                    }
                    else {
                        buttons[j].observe('mouseover', function(){
                            this.src = this.src.replace('.png', '-on.png');
                        });
                        buttons[j].observe('mouseout', function(){
                            this.src = this.src.replace('-on', '');
                        });
                    }
                }
            }
        }
        if(navigator.appName == "Microsoft Internet Explorer")
            images[i].src = images[i].src;
    }
}

function tabSwitcher() {

    if($$('.product-tabs .btn-list li').length > 0) {
        $$('.product-tabs .btn-list li:first-child')[0].addClassName('active');

        var btns = $$('.product-tabs .btn-list li');
        var tabs = $$('.product-tabs .tab-list li');

        // adding unique css-class for each LI & activate first tab
        for(k=0;k<btns.length;k++) {
            //btns[k].down('span').addClassName('tab'+k);
            if(btns[k].hasClassName('active')) {
                tabs[k].show();
            }
        }

        btns.each(function(item) {
            Event.observe(item, 'click', function(event) {
                var neew = event.findElement('li');
                if(!neew.hasClassName('active')) {
                    for(i=0;i<btns.length;i++) {
                        btns[i].removeClassName('active');
                        tabs[i].hide();
                        if(btns[i] == neew) {
                            tabs[i].show();
                            btns[i].addClassName('active');
                        }
                    }
                }
            });
        });
    }
}

// animated Carrousels
function horizontalCarousel() {
    var carrousels = $$('.horizontal-carousel');

    for (i=0; i<carrousels.length; i++) {
        var carrousel = carrousels[i];
        var carrousel_ul = carrousel.down('ul');
        var carrousel_ul_size = carrousel_ul.childElements().length;
        var carrousel_li_width = carrousel.down('li', 0).getWidth();
        var margin_right = parseInt(carrousel_ul.down('li', 0).getStyles().marginRight.split('px').join(''));
        if(margin_right > 0)
            carrousel_li_width = carrousel_li_width + margin_right;
        var carrousel_ul_width = carrousel_li_width*carrousel_ul_size;
        var left_btn = carrousel.down('span.left-views');
        var right_btn = carrousel.down('span.right-views');
        var carrousel_area_width = carrousel.down('.view-area').getWidth();
        

        carrousel_ul.setStyle({width: carrousel_ul_width + 'px'});
        updateNav(carrousel_ul, left_btn, right_btn, carrousel_ul_width, carrousel_area_width);

        if(left_btn) {
            Event.observe(left_btn, 'click', function() {
                if(this.hasClassName('left-active')) {
                    carrousel_ul = this.next('.view-area').down('ul');
                    carrousel_li_width = carrousel_ul.down('li', 0).getWidth();
                    var margin_right = parseInt(carrousel_ul.down('li', 0).getStyles().marginRight.split('px').join(''));
                    if(margin_right > 0)
                        carrousel_li_width = carrousel_li_width + margin_right;
                    left_btn = this;
                    right_btn = this.next('.right-views');
                    carrousel_ul_size = carrousel_ul.childElements().length;
                    carrousel_ul_width = carrousel_li_width*carrousel_ul_size;
                    carrousel_area_width = this.next('.view-area').getWidth();


                    new Effect.Move(carrousel_ul, {
                        x: carrousel_li_width,
                        y: 0,
                        mode: 'relative',
                        duration: 0.4,
                        queue: {
                            scope: 'carousel_scope',
                            limit: 1
                        },
                        afterFinish: function() {updateNav(carrousel_ul, left_btn, right_btn, carrousel_ul_width, carrousel_area_width);}
                    });
                }
            });
        }

        if(right_btn) {
            Event.observe(right_btn, 'click', function() {
                if(this.hasClassName('right-active')) {
                    carrousel_ul = this.previous('.view-area').down('ul');
                    carrousel_li_width = carrousel_ul.down('li', 0).getWidth();
                    var margin_right = parseInt(carrousel_ul.down('li', 0).getStyles().marginRight.split('px').join(''));
                    if(margin_right > 0)
                        carrousel_li_width = carrousel_li_width + margin_right;
                    left_btn = this.previous('.left-views');
                    right_btn = this;
                    carrousel_ul_size = carrousel_ul.childElements().length;
                    carrousel_ul_width = carrousel_li_width*carrousel_ul_size;
                    carrousel_area_width = this.previous('.view-area').getWidth();


                    new Effect.Move(carrousel_ul, {
                        x: - carrousel_li_width,
                        y: 0,
                        mode: 'relative',
                        duration: 0.4,
                        queue: {
                            scope: 'carousel_scope',
                            limit: 1
                        },
                        afterFinish: function() {updateNav(carrousel_ul, left_btn, right_btn, carrousel_ul_width, carrousel_area_width);}
                    });
                }
            });
        }

    }
}

// animated Carrousels
function verticalCarousel() {
    var carrousels = $$('.vertical-carousel');

    for (i=0; i<carrousels.length; i++) {
        var carrousel = carrousels[i];
        var carrousel_ul = carrousel.down('ul');
        var carrousel_ul_size = carrousel_ul.childElements().length;
        var carrousel_li_height = carrousel.down('li', 0).getHeight();
        var carrousel_ul_height = carrousel_li_height*carrousel_ul_size;
        var left_btn = carrousel.down('span.left-views');
        var right_btn = carrousel.down('span.right-views');
        var carrousel_area_height = carrousel.down('.view-area').getHeight();

        carrousel_ul.setStyle({height: carrousel_ul_height + 'px'});
        updateNav(carrousel_ul, left_btn, right_btn, carrousel_ul_height, carrousel_area_height, 1);

        if(left_btn) {
            Event.observe(left_btn, 'click', function() {
                if(this.hasClassName('left-active')) {
                    carrousel_ul = this.next('.view-area').down('ul');
                    carrousel_li_height = carrousel_ul.down('li', 0).getHeight();
                    left_btn = this;
                    right_btn = this.next('.right-views');
                    carrousel_ul_size = carrousel_ul.childElements().length;
                    carrousel_ul_height = carrousel_li_height*carrousel_ul_size;
                    carrousel_area_height = this.next('.view-area').getHeight();


                    new Effect.Move(carrousel_ul, {
                        y: carrousel_li_height,
                        x: 0,
                        mode: 'relative',
                        duration: 0.4,
                        queue: {
                            scope: 'carousel_scope',
                            limit: 1
                        },
                        afterFinish: function() {updateNav(carrousel_ul, left_btn, right_btn, carrousel_ul_height, carrousel_area_height, 1);}
                    });
                }
            });
        }

        if(right_btn) {
            Event.observe(right_btn, 'click', function() {
                if(this.hasClassName('right-active')) {
                    carrousel_ul = this.previous('.view-area').down('ul');
                    carrousel_li_height = carrousel_ul.down('li', 0).getHeight();
                    left_btn = this.previous('.left-views');
                    right_btn = this;
                    carrousel_ul_size = carrousel_ul.childElements().length;
                    carrousel_ul_height = carrousel_li_height*carrousel_ul_size;
                    carrousel_area_height = this.previous('.view-area').getHeight();


                    new Effect.Move(carrousel_ul, {
                        y: - carrousel_li_height,
                        x: 0,
                        mode: 'relative',
                        duration: 0.4,
                        queue: {
                            scope: 'carousel_scope',
                            limit: 1
                        },
                        afterFinish: function() {updateNav(carrousel_ul, left_btn, right_btn, carrousel_ul_height, carrousel_area_height, 1);}
                    });
                }
            });
        }

    }
}

function updateNav(carrousel_ul, left_btn, right_btn, carrousel_ul_xy, carrousel_area_xy,mode) {
        if(!mode)
            mode = 0;

        if(left_btn) {
            if(carrousel_ul.positionedOffset()[mode] >= 0){
                left_btn.removeClassName('left-active');
                left_btn.setStyle({display: 'none'});
            } else {
                left_btn.addClassName('left-active');
                left_btn.setStyle({display: ''});
            }
        }

        if(right_btn) {
            if(carrousel_ul.positionedOffset()[mode] + carrousel_ul_xy <= carrousel_area_xy) {
                right_btn.removeClassName('right-active');
                right_btn.setStyle({display: 'none'});
            } else {
                right_btn.addClassName('right-active');
                right_btn.setStyle({display: ''});
            }
        }
}

function pngFix() {
    if(!Prototype.BrowserFeatures.XPath && (ie55 || ie6)) {
        var toFix = $$('.pngfix');
        for (var i=0;i<toFix.length; i++) {
            var bgImg = toFix[i].getStyle('backgroundImage');
    			if(bgImg.indexOf(".png")!=-1){
    			    var iebg;
    			    if(bgImg.indexOf('url("')!=-1)
    				    iebg = bgImg.split('url("')[1].split('")')[0];
    				else
    				    iebg = bgImg.split('url(')[1].split(')')[0];

    				toFix[i].setStyle({backgroundImage: 'none'});
    				toFix[i].runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iebg + "',sizingMethod='scale')";
    			}
        }
    }
}