var ProfileSlider = Class.create(AC.Slider, {

    createMovieSizes: function(item) {
        item.addClassName('triggerlink');

        var id = item.up('div').identify().replace(/ad-/, '');
        var div = document.createElement('div');

        if (this.movieSizeNav) {
            var movieSizeNav = this.movieSizeNav.cloneNode(true);
            var links = movieSizeNav.select('a');
            links.each(function(link, i) {
                link.href = link.href.replace(/#(.*)/, '#'+id+'-$1');
            });
        }

        var large = div.cloneNode(true);
        large.id = id+'-large';
        large.className = 'size large';
        item.parentNode.appendChild(large);
        var movie = div.cloneNode(true);
        movie.className = 'movie';
        movie.innerHTML += '<a class="movieLink" href="'+item.href+'?width=640&amp;height=360"></a>';
        if (this.endState) {
            movie.appendChild(this.endState.cloneNode(true));
        }
        if (movieSizeNav) {
            movie.appendChild(movieSizeNav.cloneNode(true));
        }
        large.appendChild(movie);

        var small = div.cloneNode(true);
        small.id = id+'-small';
        small.className = 'size small';
        item.parentNode.appendChild(small);
        var movie = div.cloneNode(true);
        movie.className = 'movie';
        var size = '';
        var href = '';
        if(item.href.match('r640-9cie')){
            href = item.href.toString().replace('r640-9cie', 'r320-9cie');
        } else if (item.href.match('640x360')){
            href = item.href.toString().replace('640x360', '320x180');
        }
       
        movie.innerHTML += '<a class="movieLink" href="'+href+'?width=320&amp;height=180"></a>';
        if (this.endState) {
            movie.appendChild(this.endState.cloneNode(true));
        }
        if (movieSizeNav) {
            movie.appendChild(movieSizeNav.cloneNode(true));
        }
        small.appendChild(movie);

        var medium = div.cloneNode(true);
        medium.id = id+'-medium';
        medium.className = 'size medium';
        item.parentNode.appendChild(medium);
        var movie = div.cloneNode(true);
        movie.className = 'movie';
        var href = '';
        if(item.href.match('r640-9cie')){
            href = item.href.toString().replace('r640-9cie', 'r480-9cie');
        } else if (item.href.match('640x360')){
            href = item.href.toString().replace('640x360', '480x272');
        }
        movie.innerHTML += '<a class="movieLink" href="'+href+'?width=480&amp;height=272"></a>';
        if (this.endState) {
            movie.appendChild(this.endState.cloneNode(true));
        }
        if (movieSizeNav) {
            movie.appendChild(movieSizeNav.cloneNode(true));
        }
        medium.appendChild(movie);

        item.href = '#'+id+'-large';
    },

    populate: function(items) {
        this.endState = new Element('div', {'class':'endState'}).insert('<p><a href="#replay" class="pillbutton replay"><span>Watch again</span><b>&gt;</b></a></p>');
        this.movieSizeNav = $$('.sizenav')[0];
        items.each(function(item) {
            this.createMovieSizes(item);
            var sliderItem = new AC.SliderItem(item);
            this.items.push(sliderItem);
        }.bind(this));
        this.render(4);
    },

    scrollToItem: function(index) {
        var page = null;

        var itemsPerPage = this.itemsPerPage;
        for (var i=1; i<=this.totalPages+1; i++) {

            // figure out the upper and lower bounds on this page
            var lowerBound = (i*this.itemsPerPage)-this.itemsPerPage;
            var upperBound = lowerBound+itemsPerPage-1;
            // check if it's visible on the current page so we don't scroll if we don't have to
            if (i==this.currentPage && index>=lowerBound && index<=upperBound) page = i;

            // if we don't have a page number, and we're between the bounds, set the page number
            if (!page && index>=lowerBound && index<=upperBound) page = i;
        }

        if (page!=this.currentPage) {
            this.scrolltoPageNumber(page);
        }
    }
});

var ProfileSwap = Class.create({

    initialize: function() {
        this.wrapper = $('display').up();

        this.ads = $$('#videos div a');
        this.makeSlider(this.ads);
        this.swapView = new AC.ViewMaster.Viewer(null, 'display', 'triggerlink', { shouldAnimateContentChange:true, animationDuration:.4 });
        this.swapView.setDelegate(this);

        if (document.location.hash) {
            var id = document.location.hash.replace(/#/, '');
            var content = $(id);
            if (content) {
                var section = this.swapView.addSection(content);
                this.swapView.show(section);
            }
        }

        if (!this.swapView.currentSection) {
            var section = this.swapView.addSection($$('#videos div.size')[0]);
            $('clicktoplay').style.display = 'block';
        } else {
            this.swapView.didAppendContent(this.swapView);
        }
    },

    makeSlider: function(active) {
        this.slider = new ProfileSlider('slider', active);
        this.slider.setCarousel(true);
        this.slider.resetPages();

        if (document.location.hash) {
            var id = document.location.hash.toString().replace(/#(.*)-.*/, '$1');

            var link = $$('#slider li:not(.cloned) a[href*=#'+id+']')[0];
            this.slider.jumptoPageNumber(Math.floor(link.up().previousSiblings().length/this.slider.itemsPerPage));
        }
    },

    willShow: function(view, outgoing, incoming) {
        this.currentId = incoming.id;

        var size = incoming.id.replace(/.*-/, '');
        view.options.shouldAnimateContentChange = !(this.currentSize == size);
        this.currentSize = size;
    },

    didAppendContent: function(view) {
        var incoming = view.currentSection;
        var container = view.view.view();

        if (incoming && container) {
            var newDimensions = incoming.content.getDimensions();
            var currentDimensions = view.view.view().getDimensions();

            if (view.options.shouldAnimateContentChange) {
                
                new Effect.Parallel([
                    new Effect.Scale(container, ((newDimensions.width / currentDimensions.width) * 100), { scaleY:false, scaleContent:false, sync:true }),
                    new Effect.Scale(container, ((newDimensions.height / currentDimensions.height) * 100), { scaleX:false, scaleContent:false, sync:true })
                ], { duration:view.options.animationDuration });
            } else {
                container.style.width = newDimensions.width+'px';
                container.style.height = newDimensions.height+'px';
            }
        }
    },

    didShow: function(view, outgoing, incoming) {
        if (!this.currentId || !this.currentSize) {
            this.currentId = incoming.id;
            this.currentSize = incoming.id.replace(/.*-/, '');
        }

        this.setSliderActive(incoming.id);

        view.options.shouldAnimateContentChange = false;
    },

    setSliderActive: function(id) {
        var id = this.currentId;
        var size = this.currentSize;

        this.slider.container.select('a.'+this.swapView.triggerClassName).each(function(item) {
            var movie = item.href.replace(/.*#(.*)-.*/, '$1');
            item.href = '#'+movie+'-'+size;

            if (id.match(movie)) {
                item.addClassName('active');
                $(item).up('li').addClassName('active');
            } else {
                item.removeClassName('active');
                $(item).up('li').removeClassName('active');
            }
        });
    }

});


Event.observe(window, 'load', function() {
     var tracker = new AC.ViewMaster.Tracker('click');
    if (AC.Detector.isMobile()) {

        var container = $('swap');
        container.addClassName('iphone');
        container.select('a').each(function(vid) {
            
            if(vid.href.match(/640x360.mov/)){
                vid.href = vid.href.replace(vid.href.substr(vid.href.length-11, 7), 'r320-9cie');
            } else {
                vid.href = vid.href.replace('r640-9cie.mov', 'i320x180.m4v');
            }
            
        });

    } else {

        new ProfileSwap();
    }

   

});