/**
 * StoryBook.fn.UI
 * ==
 * Handles all user actions and fires events for consumption by StoryBook(),
 * dependent on markup generated by StoryRender
 *
 * @param string container css selector used to scope all dom event listeners
 */
StoryBook.fn.UI = {};

/**
 * UI.init()
 * --
 * sets up event listeners for clicks and keypresses
 *
 * @param null
 * @return this
 */
StoryBook.fn.UI.init = function(){
    this.fn = this.prototype;
    this.keyCode = {
        up: 38,
        left: 37,
        down: 40,
        right: 39,
        space: 32
    };

    this.uiActions = {
        back: $('.ui-do_back'),
        next: $('.ui-do_next'),
        skipTo: $('.ui-do_skip_to')
    };

    this.backButton = $('.ui__back-button');
    this.nextButton = $('.ui__next-button');

    var $uiKeysWrapper = $('.ui__keyboard');
    this.uiKeys = {
        up: $uiKeysWrapper.find('.ui__keyboard--top-key'),
        left: $uiKeysWrapper.find('.ui__keyboard--left-key'),
        down: $uiKeysWrapper.find('.ui__keyboard--down-key'),
        right: $uiKeysWrapper.find('.ui__keyboard--right-key'),
    };

    //brought over from index, sort this later
    var frame = $('.story_book');
    //chapter selectors
    var intro = frame.find('.story_book__intro'),
    colophon = frame.find('.story_book__colophon');

    //KEYDOWN/KEYUP

    $(document).on('keydown', this.UI.keyDownHandler.bind(this));
    $(document).on('keyup', $.proxy(this.UI.keyUpHandler, this));

    //ARROW AND SLIDE NAV
    this.uiActions.back.on('click', $.proxy(this.UI.back, this));
    this.uiActions.next.on('click', $.proxy(this.UI.next, this));
    this.uiActions.skipTo.on('click', $.proxy(this.UI.skipTo, this));

    //FB and Twitter share links
    $('.post_share_tweet').on('click', $.proxy(this.UI.tweetClicked, this));
    $('.post_share_facebook').on('click', $.proxy(this.UI.fbClicked, this));

    return this;
}

/**
 * UI.show()
 * --
 * erm...shows the UI
 *
 * @param null
 * @return this
 */
StoryBook.fn.UI.show = function(){
    this.$uiWrapper.fadeIn(200).children().fadeIn(200);
    return this;
}

/**
 * UI.hide()
 * --
 * erm...hides the UI
 *
 * @param null
 * @return this
 */
StoryBook.fn.UI.hide = function(){
    this.$uiWrapper.fadeOut(200).children().fadeOut(200);
    return this;
}

/**
 * UI.cleanup
 * --
 * cleans up the UI
 *
 * @param null
 * @return this
 */
StoryBook.fn.UI.clean = function(){
    if(this.pointer >= 2){
        this.UI.show();
        this.backButton.hide();
    }
    if(this.pointer == this.bookmarks.colophon.page){
        this.nextButton.hide();
    }
}

/**
 * UI.keyDownHandler()
 * --
 * any keydown is routed through here
 *
 * @param null
 * @return this
 */
StoryBook.fn.UI.keyDownHandler = function(e){
    var keycode = e.keyCode;// || e.keycode || e.which;

    switch(keycode){
        case this.keyCode.left:
            e.preventDefault();
            this.uiKeys.left.addClass('pressed');
            this.back();

        break;

        case this.keyCode.right || key.space :
            e.preventDefault();
            this.uiKeys.right.addClass('pressed');
            this.next();
        break;

        case this.keyCode.up :
            this.uiKeys.up.addClass('pressed');
        break;

        case this.keyCode.down :
            this.uiKeys.down.addClass('pressed');
        break;
    }

    return this;
}

/**
 * UI.keyUpHandler()
 * --
 * not much needs to happen on keyup atm so just keep things simple for the moment
 *
 * @param null
 * @return this
 */
StoryBook.fn.UI.keyUpHandler = function(){
    $('.ui__keyboard').find('.ui__keyboard--key').removeClass('pressed');
    return this;
}

/**
 * uiBack()
 * --
 * any action to step back one animation
 *
 * @param null
 * @return this
 */
StoryBook.fn.UI.back = function(e){
    e.preventDefault();
    this.back();
    return this;
}

/**
 * uiNext()
 * --
 * any action to advance one animation
 *
 * @param null
 * @return this
 */
StoryBook.fn.UI.next = function(e){
    e.preventDefault();
    this.next();
    return this;
}

/**
 * uiSkipTo()
 * --
 * skip to a specific chapter
 *
 * @param null
 * @return this
 */
StoryBook.fn.UI.skipTo = function(e){
    e.preventDefault();
    var bookmark = $(e.currentTarget).data('bookmark');

    //if the key doesn't exist, make sure this.pointer has a value
    bookmark = this.bookmarks[bookmark].page || this.pointer;

    this.skipTo(bookmark);
    return this;
}

/**
 * tweetClicked()
 * --
 * function for when the tweet button is clicked
 *
 * @param event e event object
 * @return this
 */
StoryBook.fn.UI.tweetClicked = function(e){

    e.preventDefault();

    // Because we're not using the regular twitter.com/intent/tweet or whatever,
    // we store the url of the card in the href of the link, and the title is the actual tweet
    var loc = $(this).attr('href');
    var tweet  = $(this).attr('title');

    //Trigger a new window with the Twitter dialog, in the middle of the page
    window.open('http://twitter.com/share?url=' + loc + '&text=' + tweet, 'twitterwindow', 'height=300, width=550, top='+($(window).height()/2 - 225) +', left='+$(window).width()/2 +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
}

/**
 * fbClicked()
 * --
 * function for when the facebook button is clicked
 *
 * @param event e event object
 * @return this
 */
StoryBook.fn.UI.fbClicked = function(e){
    e.preventDefault();

    var fb_link = $(this).attr('href');

    //Trigger a new window with the Facebook dialogue
    window.open( fb_link, 'popup', 'height=300, width=550, top='+($(window).height()/2 - 225) +', left='+$(window).width()/2 +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');

}
