var tracks;
var trackLabel;
var currentTrack;

window.addEvent('domready', function () {
    $(document.body).addClass('js');

    //external links
    $$('a[rel=external]').set('target', '_blank');

    if ($('slider-container')) {
        var htmlSlider = new HTMLSlider('slider-container', 'slide',
		{
		    interval: 6000,
		    autoSlideEnabled: true,
		    paginationEnabled: true,
		    paginationContainerId: 'pagination-container',
		    indicatorContainerId: 'indicator-container'
		});
    }

    //ie6/ie7 stuffs
    if (Browser.ie6 || Browser.ie7 || Browser.ie8) {
        $$('li:last-child').addClass('last-child');
    }

    //if browser doesn't support placeholder text, use MooTools
    if (!Modernizr.input.placeholder) {
        var searchInput = $$('input[type="search"]')[0];
        if (searchInput) {
            var placeholder = searchInput.get('placeholder')
            searchInput.set('value', placeholder);
            searchInput.addEvents({
                'focus': function (evt) {
                    if (searchInput.get('value') == placeholder) {
                        searchInput.set('value', '');
                    }
                },
                'blur': function (evt) {
                    if (searchInput.get('value') == '') {
                        searchInput.set('value', placeholder);
                    }
                }
            });
        }
    }

    var container = $('container');

    //subNav's
    //group each two H2 and UL in a div

    var subNav = $$('#nav li div.sub');


    subNav.each(function (el, i) {
        var subNavH2 = el.getElements('h2');
        var subNavUL = el.getElements('ul');
        var counter = 0;
        var subNavGroupContainer = new Element('div');
        var longestArrLength = subNavH2.length;

        if (longestArrLength < subNavUL.length) {
            longestArrLength = subNavUL.length;
        }

        for (i = 0; i < longestArrLength; i++) {
            if (counter == 2) {
                counter = 0;
                subNavGroupContainer = new Element('div');
            }
            if (subNavH2[i]) subNavGroupContainer.wraps(subNavH2[i]);
            if (subNavUL[i]) subNavGroupContainer.wraps(subNavUL[i]);
            counter++;
        };

        var children = el.getChildren('div');
        var childrenLength = children.length;
        if (childrenLength == 1) {
            el.setStyle('width', 200)
        }
        if (childrenLength == 2) {
            el.setStyle('width', 420)
        }
        if (childrenLength == 3) {
            el.setStyle('width', 630)
        }
    });

    if ($('home')) {
        //homepage What's On boxes
        var boxContainer = $('whatson');
        var inactiveMask = new Element('div', {
            'id': 'inactive'
        }).inject(boxContainer, 'bottom');

        var box = boxContainer.getChildren('li');

        box.each(function (el, i) {
            //video box - 
            var hasChildren = el.getChildren('ul')

            if (!hasChildren.length < 1) {
                var playVideo = el.getChildren('ul').getFirst('li').getElement('a');
                var youTubeURL = playVideo.get('href').toString();

                if (youTubeURL.contains('youtu.be')) {
                    //playVideo.set('href','#')
                    var youTubeID = youTubeURL.split('.be/')[1];

                    var videoDiv = el.getElement('div');
                    videoDiv.addClass('video');
                    videoDiv.setStyle('position', 'absolute')//override the style put in by JW player
                    var closeVideo = new Element('button', {
                        'html': 'Close'
                    }).inject(videoDiv, 'top');

                    playVideo.addEvent('click', function (e) {
                        e.preventDefault();
                        videoDiv.addClass('video-on');
                        inactiveMask.addClass('inactive-on');
                        addAlert('Video overlay on');
                        el.addClass("playing");
                    });
                    closeVideo.addEvent('click', function (e) {
                        videoDiv.removeClass('video-on');
                        el.removeClass("playing");
                        inactiveMask.removeClass('inactive-on');
                        addAlert('Video overlay off');
                        var videoTarget = this.getNext().id;
                        jwplayer(videoTarget).stop();
                    });
                }
            };
        });

        //slider
        $('promos-slider').addClass('js-scroll');
        $('slider-container').setStyle('width', 2000);
        $('slider-container').setStyle('height', 330);

        var cols = $$('div.col');
        var maxHeight = 0;
        if (cols) {
            cols.each(function (item) {
                maxHeight = Math.max(maxHeight, item.getSize().y);
            });
            cols.setStyle('min-height', maxHeight);
        };
    }

    //event detail page - multimedia switcher
    //this could surely be done with less code???  

    if ($('multimedia')) {
        var video = $('video');
        var sound = $('sound');
        var gallery = $('gallery');
        var multimediaSections = $$(video, sound, gallery);
        multimediaSections.addClass('hide');
        container.grab(video, 'top').grab(sound, 'top').grab(gallery, 'top');
        var multimediaLinks = $$('#multimedia a');

        function hide(me) {
            me.removeClass('show');
            me.addClass('hide');
        }

        multimediaLinks.each(function (el, i) {
            el.addEvent('click', function (e) {
                e.preventDefault();
                var href = el.get('href');
                multimediaLinks.removeClass('active')
                el.toggleClass('active');
                if (href.contains('video')) {
                    video.toggleClass('show');
                    sound.removeClass('show');
                    gallery.removeClass('show');
                    if (video.hasClass('show') == false) {
                        el.removeClass('active');
                    }
                }
                if (href.contains('sound')) {
                    video.removeClass('show');
                    sound.toggleClass('show');
                    gallery.removeClass('show');
                    if (sound.hasClass('show') == false) {
                        el.removeClass('active');
                    }
                }
                if (href.contains('gallery')) {
                    video.removeClass('show');
                    sound.removeClass('show');
                    gallery.toggleClass('show');
                    if (gallery.hasClass('show') == false) {
                        el.removeClass('active');
                    }
                }
            });
        });


        //gallery slider
        var featuredWrapper = new Element('div', { id: 'js-featured-wrapper' });
        var featuredContainer = $('featured');
        featuredWrapper.wraps(featuredContainer);
        featuredContainer.addClass('js-scroll');
        var featureH2 = $$('#featured h2')[0];


        //setup array and do some math
        var targetElement = 0;
        var featuredList = $$('#featured ul');
        var featuredItems = $$('#featured ul li a');
        var featuredItemsTotal = featuredItems.length;
        var totalClicks = featuredItemsTotal - 5;
        var totalHeight = 0;

        featuredItems.each(function (el, i) {
            var itemHeight = el.getSize().y;
            totalHeight = totalHeight + itemHeight;
        });

        //set height of <ul> and IE6 needs a different width.
        if (Browser.Engine.trident4) {
            featuredList.setStyle('height', totalHeight + 50);
        }
        else {
            featuredList.setStyle('height', totalHeight);
        }
        new Element('button', {
            'class': 'scroll-button',
            'id': 'scroll-left',
            events: {
                click: function (e) {
                    e.preventDefault();
                    scrollLeft();
                }
            }
        }).inject(featuredWrapper, 'top');

        new Element('button', {
            'class': 'scroll-button',
            'id': 'scroll-right',
            events: {
                click: function (e) {
                    e.preventDefault();
                    scrollRight();
                }
            }
        }).inject(featuredWrapper, 'top');


        $('scroll-left').addClass('inactive')
        if (featuredItemsTotal <= 5) {
            $('scroll-right').addClass('inactive')
        }

        var newTarget = $$('#gallery ul')[0];

        var scroll = new Fx.Scroll('featured', {
            wait: false,
            duration: 500,
            offset: { 'x': 0, 'y': 0 },
            transition: Fx.Transitions.Quad.easeInOut,
            onComplete: function () {
                scrollEnd();
            }
        });

        function scrollRight() {
            if (targetElement !== totalClicks) {
                targetElement = targetElement + 1
                scroll.toElement(featuredItems[targetElement]);
            }
        }

        function scrollLeft() {
            if (targetElement !== 0) {
                targetElement = targetElement - 1
                scroll.toElement(featuredItems[targetElement]);
            }
        }

        function scrollEnd() {
            if (targetElement == 0) {
                $('scroll-left').addClass('inactive');
                $('scroll-right').removeClass('inactive');
            }
            else if (targetElement == totalClicks) {
                $('scroll-left').removeClass('inactive');
                $('scroll-right').addClass('inactive');
            }
            else {
                $('scroll-left').removeClass('inactive')
                $('scroll-right').removeClass('inactive')
            }
        }

        //gallery image switcher
        var mainImage = $$('#photo-container img')[0];
        var caption = $$('#photo-container p')[0];
        var thumbs = $$('#gallery ul li a');
        thumbs.each(function (el, i) {
            var targetPath = el.get('href')
            var captionText = el.getElement('img').get('alt');
            el.addEvent('click', function (e) {
                thumbs.each(function (el, i) {
                    el.removeClass('selected');
                })
                el.addClass('selected')
                e.preventDefault();
                mainImage.set('src', targetPath);
                caption.set('text', captionText)
            });
        });
        //open Reviews tab
        var writeReview = $('write-review');
        writeReview.addEvent('click', function (e) {
            e.preventDefault();
            tabLinks[1].fireEvent('click', e);
        });

        //basic tabs - need to make it accessible
        var tabContainers = $$('div#tabs > div');
        var tabLinks = $$('div#tabs > ul li a');
        tabContainers.addClass('hidden');
        tabContainers[0].removeClass('hidden');

        tabLinks.each(function (el, i) {
            el.addEvent('click', function (e) {
                e.preventDefault();
                tabLinks.removeClass('selected');
                el.addClass('selected');
                tabContainers.addClass('hidden');
                tabContainers[i].removeClass('hidden');
                el.set('test', 'test');
                //aria-selected="true"
            });
        });

        if ($('showreviewstab').value == 1) {
            var reviewTab = $$('div#tabs > ul li a[href="#reviews"]');
            tabLinks.removeClass('selected');
            reviewTab.addClass('selected');
            tabContainers.addClass('hidden');
            tabContainers[1].removeClass('hidden');
            reviewTab.set('test', 'test');
            //aria-selected="true"			
        }

        // Media Player External Interface Link
        tracks = $$('#sound ul li');
        trackLabel = $('now-playing');

        if (tracks[0]) {
            tracks.each(function (el, i) {
                el.setStyle('display', 'block');

                el.addEvent('click', function (evt) {
                    evt.stop();

                    selectTrack(i, true);
                });
            });

            // Select first track
            selectTrack(0);
        }
    }
    var olay = new overlay();
    //multiBox: images
    new multiBox('mb', {
        overlay: olay
    });

    /* Search term value store */

    var searchBoxClass = 'searchTerms';

    var searchBoxArr = $$(String('.' + searchBoxClass));

    if (searchBoxArr[0]) {
        searchBoxArr.each(function (el, i) {
            var searchTerm = 'KEYWORD(S)';

            if (String(window.location).indexOf('search=') == -1) el.set('value', searchTerm);

            el.addEvents({
                'focus': function (evt) {
                    if (el.get('value') == searchTerm) {
                        el.set('value', '');
                    }
                },
                'blur': function (evt) {
                    if (el.get('value') == '') {
                        el.set('value', searchTerm);
                    }
                }
            });
        });
    }


});

function removeOldAlert() {
    var oldAlert = $("alert");
    if (oldAlert)
        document.body.removeChild(oldAlert);
}
function addAlert(aMsg) {
    removeOldAlert();
    var newAlert = document.createElement("div");
    newAlert.setAttribute("role", "alert");
    newAlert.setAttribute("id", "alert");
    var msg = document.createTextNode(aMsg);
    newAlert.appendChild(msg);
    document.body.appendChild(newAlert);
}


function getMovie(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        return window[movieName];
    }
    else {
        return document[movieName];
    }
}

function selectTrack(trackId, updatePlayer) {
    if (currentTrack) currentTrack.setStyle('display', 'block');
	
    currentTrack = tracks[trackId];

    if (updatePlayer) getMovie('mediaplayer').selectSlide(trackId);

    trackLabel.set('html', currentTrack.getFirst('a').get('html'));

    currentTrack.setStyle('display', 'none');
}