if (typeof(tracker) == 'undefined') {
    tracker = false;
}

OverlayGallery = Class.create({
    swapViewClassName: 'overlaygallery',
    sectionClassName: 'gallery',
    sliderClassName: 'slider',
    sliderItemClassName: 'item',
    triggerClassName: 'gallerylink',

    initialize: function(container, id) {
        this.container = container;
        this.id = id;

        this.createContent();
    },

    draw: function() {
        if (!this.container.down('.'+this.sliderItemClassName)) {
            this.slider = true;
            this.swapView = true;
            return;
        }

        // create the slider
        var sliderContainer = new Element('div', { id:this.sliderClassName+this.id, className:this.sliderClassName })
        this.container.appendChild(sliderContainer);
        this.slider = new OverlayGallerySlider(sliderContainer, this.sliderItemClassName);


        // unique trigger class name for each gallery swap view
        var links = this.slider.container.select('a.'+this.triggerClassName);
        links.each(function(link) {
            link.addClassName(this.triggerClassName+this.id);
        }.bind(this));

        // create the view master and delegate
        var galleryContainer = new Element('div', { id:this.swapViewClassName+this.id, className:this.swapViewClassName });
        this.container.insert({ top:galleryContainer });
        this.swapView = new AC.ViewMaster.Viewer(this.content, galleryContainer, this.triggerClassName+this.id, { silentTriggers:true });
    },

    viewMoreLink: function() {
        var urlToken, section, product, productTitle;

        urlToken = window.location.toString().split('/');

        section = urlToken[3];
        product = urlToken[4]

        if (product.substr(0,1) == 'i') {
            productTitle = product.toLowerCase() == 'idvd' ? 'DVD' : product.substr(1, product.length-1).capitalize();
            productTitle = 'i' + productTitle;
        } else {
            productTitle = product.capitalize();
        }

        return '<a class="pillbutton" href="/' +section+ '/tutorials/#' +product+ '"><span>View all ' +productTitle+ ' Tutorials</span><b>&gt;</b></a>';
    },

    createContent: function() {
        // create the content for the view master, it will either be
        // an image with captions, a movie, or remote content
        this.content = [];

        var links = this.container.select('a.'+this.triggerClassName);
        links.each(function(link) {
            var url = link.href.replace(/#.*/, '');
            var id = link.href.replace(/.*#/, '');

            var thumb = link.down('img');
            var title = (thumb) ? thumb.alt : link.innerHTML;

            if (url.match(/\.mov/)) {
                var content = new Element('div', { className:'movie' });
                content.innerHTML += '<a class="movieLink" href="'+url+'">Click to play</a>';
                content.innerHTML += '<a class="posterLink" href="http://images.apple.com/global/elements/overlay/overlay_movie_endstate_640x400_20081014.jpg"></a>';
                content.innerHTML += '<ul class="endState"><li><a class="replay pillbutton" href="#replay"><span>Watch again</span><b>&gt;</b></a></li><li>'+this.viewMoreLink()+'</li></ul>';
            } else if (url.match(/\....$/)) {
                var content = new Element('div', { className:'image' });
                content.innerHTML += '<img src="'+url+'" alt="'+title+'" />';
                content.innerHTML += '<h3>'+title+'</h3>';
                if (thumb.title) {
                    content.innerHTML += '<p>'+thumb.title+'</p>';
                }
            }

            if (content) {
                link.href = '#'+id;
                var container = new Element('div', { id:id, className:this.sectionClassName });
                container.appendChild(content);
                this.content.push(container);
            } else {
                this.content.push(link);
            }
        }.bind(this));
    }

});




Event.onDOMReady(function() {

    // add listeners to the image and tutorial links, so we can turn them on later
    $$('a.OverlayPanel').each(function(link) {
        if (link.innerHTML.match(/tutorial/i) || link.innerHTML.toLowerCase().match('find out how') ) {
            link.observe('click', function(evt) {
                AC.OverlayPanel.overlay.showNested = 'tutorial';
            });
        } else if (link.innerHTML.match(/class="play"/i)) {
            link.observe('click', function(evt) {
                AC.OverlayPanel.overlay.showNested = 'movie';
            });
        } else if (link.innerHTML.match(/gallery/i)) {
            link.observe('click', function(evt) {
                AC.OverlayPanel.overlay.showNested = 'image';
            });
        } else {
            link.observe('click', function(evt) {
                AC.OverlayPanel.overlay.showNested = 'first';
            });
        }
    });

    // on show, set up the content inside the remote node
    var background = function(evt) {
        var overlay = evt.event_data.data.sender;
        var incoming = evt.event_data.data.incomingView;

        if (incoming && typeof(overlay.setOverlayShadowImageSrc) == 'function') {
            overlay.setOverlayShadowImageSrc('http://images.apple.com/au/iwork/images/overlay_bg20090106.png');
            if (!incoming.gallery) {
                incoming.gallery = new OverlayGallery(incoming.content, incoming.id);
            }
        }
    }
    Event.Listener.listenForEvent(AC.ViewMaster, 'ViewMasterWillShowNotification', false, background);

    // after show, set up the slider and view masters
    var gallery = function(evt) {
        var overlay = evt.event_data.data.sender;
        var incoming = evt.event_data.data.incomingView;
        if (incoming && incoming.gallery && overlay.overlayId == 'OverlayPanel') {

            // if we don't have the swapView, make it now
            if (!incoming.gallery.swapView) {
                incoming.gallery.draw();
            }
            if (incoming.gallery.swapView != true) {

                // if we are a special trigger, go ahead and show that section
                // if we don't already have one showing
                if (overlay.showNested == 'first') {
                    var swapView = incoming.gallery.swapView;
                    swapView.show(swapView.sectionWithId(swapView.orderedSections[0]));
                    overlay.showNested = false;
                } else if (overlay.showNested == 'image') {
                    var swapView = incoming.gallery.swapView;
                    swapView.sections.each(function(section) {
                        if (section.value.content.down('.image') && overlay.showNested) {
                            swapView.show(section.value);
                            overlay.showNested = false;
                        }
                    });
                } else if (overlay.showNested == 'movie') {
                    var swapView = incoming.gallery.swapView;
                    swapView.sections.each(function(section) {
                        if (section.value.content.down('.movie') && overlay.showNested) {
                            swapView.show(section.value);
                            overlay.showNested = false;
                        }
                    });
                } else if (overlay.showNested == 'tutorial') {
                    var swapView = incoming.gallery.swapView;
                    swapView.sections.each(function(section) {
                        if (section.value.triggers()[0].innerHTML.match('Tutorial') && overlay.showNested) {
                            swapView.show(section.value);
                            overlay.showNested = false;
                        }
                    });
                }

                // show the correct page of the slider
                if (incoming.gallery.slider) {
                    var triggers = incoming.gallery.swapView.currentSection.triggers();
                    var page = 0;
                    page = triggers[0].up('li').getAttribute('index');
                    incoming.gallery.slider.scrolltoPageNumber(parseInt(page));
                }
            }
        }

        overlay.showNested = false;
    }
    Event.Listener.listenForEvent(AC.ViewMaster, 'ViewMasterDidShowNotification', false, gallery);

    if (!tracker) {
        tracker = new AC.ViewMaster.Tracker('click');
    }
});