document.observe("dom:loaded", function(ev) {
    var links = $$('div.carousel li a');
    if (links) {
        links.each(function(link) {
            link.observe('click', function(ev) {
                // get the link element
                link = Event.element(ev);
                link = (link.tagName == 'li') ? link : link.up('li');

                // if the link is currently active, let the event continue
                // else, take over the event for our evil purposes muhahahaha
                if (!link.hasClassName('active')) {
                    Event.stop(ev);

                    // get the index of the link
                    linkIndex = link.identify().substr(link.identify().length - 1, 1);

                    // hide the active link
                    $$('div.carousel li.active').each(function(el) {
                        el.removeClassName('active');
                    });

                    // hide the current offer
                    $$('div.carousel div.offer.active').each(function(el) {
                        el.removeClassName('active');
                        el.setStyle({
                            display: 'none'
                        });
                    });

                    // add 'active' to the clicked link
                    link.addClassName('active');

                    // show the current offer
                    $('offer' + linkIndex).addClassName('active').setStyle({
                        display: 'block'
                    });
                }
            });
        });
    }

    var categories = $$('div.category');
    if (categories) {
        var count = 0;
        categories.each(function(category) {
            if (count % 4 == 3) {
                category.addClassName('last');
            }
            category.observe('mouseover', function(ev) {
                category = Event.element(ev);
                category = (category.tagName == 'DIV') ? category : category.up('div.category');
                var link = category.down('a');
                link.setStyle({
                    backgroundColor: 'black'
                });
            });
            category.observe('click', function(ev) {
                category = Event.element(ev);
                category = (category.tagName == 'DIV') ? category : category.up('div.category');
                var link = category.down('a');
                window.location = link.href;
            });
            category.observe('mouseout', function(ev) {
                category = Event.element(ev);
                category = (category.tagName == 'DIV') ? category : category.up('div.category');
                var link = category.down('a');
                link.setStyle({
                    backgroundColor: 'transparent'
                });
            });
            count++;
        });
    }


    initAppendQSLinks();
});

// give an <a> tag a class of 'appendQS' and this will be called onClick() of the link to automatically
// append the current query string to the link in question before navigating, leaving the normal HTML intact.
function appendQueryString() {
    if (window.location.search.substring(1) != '') {
        this.href += '?' + window.location.search.substring(1);
    }
}

function initAppendQSLinks() {
    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        if (links[i].className != 'appendQS') continue;
        links[i].onclick = appendQueryString;
    }

}