$.fn.cycle.transitions.scrollBothWays = function($cont, $slides, opts) {
    $cont.css('overflow','hidden');
    opts.before.push($.fn.cycle.commonReset);
    opts.fxFn = function(curr, next, opts, cb, fwd) {
        var w = $cont.width();
        opts.cssFirst = { left: 0 };
        opts.animIn   = { left: 0 };
        if(fwd){
            opts.cssBefore= { left: w, top: 0 };
            opts.animOut  = { left: 0-w };
        }else{
            opts.cssBefore= { left: -w, top: 0 };
            opts.animOut  = { left: w };
        };
        var $l = $(curr), $n = $(next);
        var speedIn = opts.speedIn, speedOut = opts.speedOut, easeIn = opts.easeIn, easeOut = opts.easeOut, animOut = opts.animOut, animIn = opts.animIn;
        $n.css(opts.cssBefore);
        var fn = function() {$n.show();$n.animate(animIn, speedIn, easeIn, cb);};
        $l.animate(animOut, speedOut, easeOut, function() {
            if (opts.cssAfter) $l.css(opts.cssAfter);
            if (!opts.sync) fn();
        });
        if (opts.sync) fn();
    };
};

$.fn.cycle.transitions.scrollBothWaysVertical = function($cont, $slides, opts) {
    $cont.css('overflow','hidden');
    opts.before.push($.fn.cycle.commonReset);
    opts.fxFn = function(curr, next, opts, cb, fwd) {
        var h = $cont.height();
        opts.cssFirst = { top: 0 };
        opts.animIn   = { top: 0 };
        if(fwd){
            opts.cssBefore= { left: 0, top: h };
            opts.animOut  = { top: 0-h };
        }else{
            opts.cssBefore= { top: -h, left: 0 };
            opts.animOut  = { top: h };
        };
        var $l = $(curr), $n = $(next);
        var speedIn = opts.speedIn, speedOut = opts.speedOut, easeIn = opts.easeIn, easeOut = opts.easeOut, animOut = opts.animOut, animIn = opts.animIn;
        $n.css(opts.cssBefore);
        var fn = function() {$n.show();$n.animate(animIn, speedIn, easeIn, cb);};
        $l.animate(animOut, speedOut, easeOut, function() {
            if (opts.cssAfter) $l.css(opts.cssAfter);
            if (!opts.sync) fn();
        });
        if (opts.sync) fn();
    };
};

$(function(){

    function initHome() {
         $('#info .info_item').css('display', 'none');
        $('#subnav').css('visibility', 'hidden');
    }

    function initCollection() {
        $('#info .info_item').css('display', 'none');
        $('#info_collection').css('display', 'block');
        $('#subnav').css('visibility', 'visible');
    }

    function initStory() {
        $('#info .info_item').css('display', 'none');
        $('#subnav').css('visibility', 'hidden');
    }

    function initWhere() {
        $('#info .info_item').css('display', 'none');
        $('#subnav').css('visibility', 'hidden');
        
    }
    
    function initPress() {
        $('#info .info_item').css('display', 'none');
        $('#info_press').css('display', 'block');
        $('#subnav').css('visibility', 'hidden');
        
    }
    
    function initShop() {
        $('#info .info_item').css('display', 'none');
        $('#subnav').css('visibility', 'hidden');
    }
    
    //names of nav elements. first is a dummy (home)
    var nav = [
                    ['dummy', 'dummy'], 
                    ['collection', 'nav_collection', initCollection], 
                    ['story', 'nav_story', initStory],
                    ['where', 'nav_where', initWhere],
                    ['press', 'nav_press', initPress]
                ];

    $('#viewport').cycle({
        timeout: 0,
        fx: 'fade',
        pager: '#nav',
        pagerAnchorBuilder: function(index, element) {
            if (index == 0) return;
            return '<li id="' + nav[index][1] + '"><a href="#">' + nav[index][0] + '</a></li>';
        },
        pagerClick: function(index, element) {
            $("#nav a").removeClass('active');
            $("#nav #" + nav[index][1] + " a").addClass('active');
            if (!!nav[index][2]) nav[index][2]();
        }
    });
    
    $('#nav').append("<li><a href='/store'>shop</a></li>");
    
    $('#logo').click(function(){
        initHome();
       $('#viewport').cycle(0);  
       $('#nav li a').removeClass('active');
    });

    var story_slides_num = $('#story_slides .page').length;
    $('#story_slides').cycle({
        timeout: 0,
        fx: 'scrollBothWays',
        next: '#slide_story a.more',
        prev: '#slide_story a.back',
        prevNextClick: function(isNext, index, element) {
            if (index == 0) 
                $('#slide_story a.back').css('display', 'none');
            else 
                $('#slide_story a.back').css('display', 'inline');
            if (index == story_slides_num-1)
                $('#slide_story a.more').css('display', 'none');
            else
                $('#slide_story a.more').css('display', 'inline');
        }
    });


    var where_slides_num = $('#where_slides .page').length;
    $('#where_slides').cycle({
        timeout: 0,
        fx: 'scrollBothWays',
        next: '#slide_where a.more',
        prev: '#slide_where a.back',
        prevNextClick: function(isNext, index, element) {
            if (index == 0) 
                $('#slide_where a.back').css('display', 'none');
            else 
                $('#slide_where a.back').css('display', 'inline');
            if (index == where_slides_num-1)
                $('#slide_where a.more').css('display', 'none');
            else
                $('#slide_where a.more').css('display', 'inline');
        }
    });
    
    var press_slides_num = $('#press_slides .page').length;
    $('#info_press').append("<p>"+$('#press_slides .page:first-child p').html()+"</p>");
    $('#press_slides').cycle({
        timeout: 0,
        fx: 'fade',
        next: '#slide_press a.slide_right',
        prev: '#slide_press a.slide_left',
        prevNextClick: function(isNext, index, element) {
            if (index == 0) 
                $('#slide_press a.slide_left').css('display', 'none');
            else 
                $('#slide_press a.slide_left').css('display', 'inline');
            if (index == press_slides_num-1)
                $('#slide_press a.slide_right').css('display', 'none');
            else
                $('#slide_press a.slide_right').css('display', 'inline');  
            $('#info_press p').html($(element).find('p').html());
        }
    });
    
    var collection_slides_num = $('#collection_slides .page').length;
    $('#info_collection .max').text(collection_slides_num);
    $('#info_collection').append("<p class='description'>"+$('#collection_slides .page:first-child p').html()+"</p>");
    $('#collection_slides').cycle({
        timeout: 0,
        fx: 'fade',
        next: '#slide_collection a.slide_right',
        prev: '#slide_collection a.slide_left',
        prevNextClick: function(isNext, index, element) {
            if (index == 0) 
                $('#slide_collection a.slide_left').css('display', 'none');
            else 
                $('#slide_collection a.slide_left').css('display', 'inline');
            if (index == collection_slides_num-1)
                $('#slide_collection a.slide_right').css('display', 'none');
            else
                $('#slide_collection a.slide_right').css('display', 'inline');  
            $('#info_collection p.description').html($(element).find('p').html());
            $('#info_collection .current').text(index+1);
        }
    });

});