var Porc = {};

var log = function(){
    if (window.console && console.log){
        try {
            console.log.apply(console, arguments);
        } catch(e) {
            console.log(Array.slice(arguments));
        }
    }
};


Porc.Rotocop = new Class({
    Implements: [Options,Events],
    options: {
        //onNext: $empty,
        //onPrevious: $empty,
        //onLoad: $empty,
        itemsPerPage: 3, //number of items in window
        showPrevNext: true,
        showPrevNextOverlay: false,
        showPage: false, // show nav that shows which pane you are on
        slide: true, // show slide fx
        clickableContents: false, //clicking content will rotate to next
        keyEvents: false, //prev-next controlled via keyboard
        startPage: 1, // which page to start on
        timer: null // time in miliseconds
    },

    initialize: function(container,options){
        this.setOptions(options);		
        this.container = $(container);
        this.contents = this.container.getChildren().clone();
        
        this.itemCount = this.contents.length;
        this.pageCount = Math.ceil(this.itemCount / this.options.itemsPerPage);
        this.page = this.options.startPage;
        
        this.width = this.container.getSize().x;

        this.cover = new Element('div', {
            'styles': {
                'width': this.width,
                'overflow':'hidden',
                'position': 'relative'
            }
        });
        
        this.mover = new Element('div');

        this.controls = new Element('div', {
            'class': 'roto-nav'
        });

        this.fx = new Fx.Tween(this.mover, {
            duration: 400,
            transition: Fx.Transitions.Expo.easeOut,
            link: 'cancel',
            property: 'margin-left'
        });

    },

    load: function() {
        if (this.pageCount == 1) return false;

        this.fireEvent('load', this.contents);

        this.mover.setStyle('width', '20000px').adopt(this.contents);
        this.cover.adopt(this.mover);
        this.container.empty().adopt(this.cover);
        
        this.controls.inject(this.container, 'bottom');

        if (this.options.showPrevNext) this.buildPrevNext();
        if (this.options.showPrevNextOverlay) this.buildPrevNextOverlay();
        if (this.options.showPage) this.buildPageNav();
        if (this.page != 1) this.rotate(this.page);
        if ($chk(this.options.timer)) this.setTimer();
        
        if (this.options.keyEvents) {
            window.addEvent('keydown', this.keyEvents.bind(this));
        }
        
        if (this.options.clickableContents) {
            this.contents.each(function(el) {
                if (el.hasClass('ignore')) {
                    return false;
                }
                el.addEvent('click', this.next.bind(this));
                el.setStyle('cursor', 'pointer');
            }, this);
        }

        return this;
    },

    setTimer: function(){
        var timer = this.next.periodical(this.options.timer,this);

        // clear timer when a button is clicked
        var btns = [];
        if (this.options.showPrevNext) btns.extend([this.prevBtn, this.nextBtn]);
        if (this.options.showPrevNextOverlay) btns.extend([this.prevBtnOverlay, this.nextBtnOverlay]); 
        if (this.options.showPage) btns.extend(this.pageNav); 

        btns.each(function(el){ 
            el.addEvent('click', function(){
                $clear(timer);
            });
        });
    },

    rotate: function(page){
        var firstInPage = this.contents[this.options.itemsPerPage * (page - 1)];

        var shift = firstInPage.getPosition(this.mover).x;
        
        log('page', page);
        log('firstInPage', firstInPage);
        log('shift', shift);
        

        if (this.options.slide == true) {
            this.fx.start('-'+shift+'px');
            //this.fx('margin-left', '-'+shift+'px');
        } else {
            this.mover.setStyle('margin-left', '-'+shift+'px');
        }

        if(this.options.showPage) {
            this.pageNav[this.page - 1].removeClass('on');
            this.pageNav[page - 1].addClass('on');
        }

        if(this.options.showPrevNext) {
            [this.prevBtn, this.nextBtn].each(function(el) {
                el.removeClass('disabled');
            });

            switch (page) {
                case this.pageCount: 
                    this.nextBtn.addClass('disabled');
                    break;
                case 1:
                    this.prevBtn.addClass('disabled');
                    break;
            }
        }

        this.page = page;
    },

    buildPrevNext: function(){
        var prevNext = new Element('div', {
            'class': 'roto-prev-next'
        });

        this.prevBtn = new Element('a', {
            'class': 'btn prev disabled',
            'html': 'Previous',
            'events': {
                'click': this.prev.bind(this)
            }
        }).inject(prevNext,'bottom');

        this.nextBtn = new Element('a', {
            'class': 'btn next',
            'html': 'Next',
            'events': {
                'click': this.next.bind(this)
            }
        }).inject(prevNext,'bottom');

        prevNext.inject(this.controls, 'bottom');
    },

    buildPrevNextOverlay: function(){
        log('overlay');
        var prevNext = new Element('div', {
            'class': 'roto-prev-next-overlay'
        });

        this.prevBtnOverlay = new Element('a', {
            'class': 'btn prev disabled',
            'html': 'Previous',
            'events': {
                'click': this.prev.bind(this)
            }
        }).inject(prevNext,'bottom');

        this.nextBtnOverlay = new Element('a', {
            'class': 'btn next',
            'html': 'Next',
            'events': {
                'click': this.next.bind(this)
            }
        }).inject(prevNext,'bottom');

        prevNext.inject(this.cover, 'bottom');
    },

    buildPageNav: function(){
        this.pageNav = [];
        var container = new Element('ul', {'class': 'roto-page clear'});
        for (i=0;i<this.pageCount;i++) {
            this.pageNav[i] = new Element('li', {'html': '<a>'+ (i + 1) +'</a>'}).inject(container,'bottom');
        }
        this.pageNav[0].addClass('on');
        this.pageNav.each(function(el, i){ 
            el.addEvent('click', this.rotate.pass(i + 1, this));
        }, this);
        
        container.inject(this.controls,'bottom');
    },

    prev: function(){
        var prevPage = (this.page == 1) ? this.pageCount : this.page - 1;
        this.rotate(prevPage);
        this.fireEvent('prev');
    },

    next: function(){
        var nextPage = (this.page == this.pageCount) ? 1 : this.page + 1;
        this.rotate(nextPage); 
        this.fireEvent('next');
    },

    keyEvents: function(event){
        if (event.key == 'left') this.prev();
        if (event.key == 'right') this.next();
    },
    
    initTitlePageNav: function(container) {
        $(container).getChildren().each(function(el, i) {
            el.addEvent('click', this.rotate.pass(i + 2, this));
            el.setStyle('cursor', 'pointer');
        }, this);
    }
});


Porc.Fixed = new Class({
    initialize: function(el){
        this.el = $(el);
        
        if (!this.el) return false;
        
        this.defaultPosition = this.el.getStyle('position');
        
        var elSize = this.el.getCoordinates();
        this.defaultHeight = elSize.top + elSize.height;

        this.checkSize();
        
        window.addEvent('resize', function() {
            clearTimeout(this.timer);
            this.timer = this.checkSize.delay(100, this);
        }.bind(this));
    },
    
    checkSize: function() {
        var winSize = window.getSize();

        if (this.defaultHeight < winSize.y) {
            this.el.setStyle('position', 'fixed');
            log('set fixed', this.el.getStyle('position'));
            this.createShim();
        } else {
            this.el.setStyle('position', this.defaultPosition);
            log('set default', this.el.getStyle('position'));
            this.destroyShim();
        }
    },
    
    createShim: function() {
        if (this.shim) return false;
    
        this.shim = new Element('div', {
            'id': 'site-placeholder'
        }).inject(this.el, 'after');
    },
    
    destroyShim: function() {
        if (!this.shim) return false;
        this.shim.destroy();
        this.shim = null;
    }
    
});


//Why is indexhibit putting this function inline
var do_click = function() {}


window.addEvent('domready', function() {
    var fixed = new Porc.Fixed('site');
});