/**
 * @ngdoc FbFlexItemOptions
 * @name fasit.component.FbFlexItemOptions
 * @function
 *  
 * @description
 * Används för att visa en del som kollapsar vid trycking för att sen visar den andra.
 *
 */
angular.module('fasit')
    .directive('fbFlexItemOptions', ['$compile', function ($compile) {
        'use strict';
        var compile: any,
            link: any;


        link = function (scope: fb.IFbFlexItemOptionsScope, element: fb.IRootElementService, attrs: ng.IAttributes) {
            scope.alignSelfOptions = [
                { name: 'auto', value: 'auto' },
                { name: 'flex-start', value: 'flex-start' },
                { name: 'flex-end', value: 'flex-end' },
                { name: 'center', value: 'center' },
                { name: 'baseline', value: 'baseline' },
                { name: 'stretch', value: 'stretch' }
            ];
            scope.alignSelfOptions = [
                'auto', 'flex-start', 'flex-end', 'center',  'baseline',  'stretch'
            ];

        };


        compile = function (element: fb.IRootElementService, attrs: any, linker: any): any {

            return link;
        };



        return {
            restrict: 'E',
            scope: {
                flexAttributes: '='
            },
            compile: compile,

            templateUrl: 'app/Directives/fbFlexItemOptions/fbFlexItemOptions.html',
        };

    }]);

/*
Flex items:
*Align-self: Sets vertical alignment 
Top: flex-start
Middle: center
Bottom: flex-end
Full height: stretch



*Flex: Sets horizontal alignment
Flex-grow:
Fixed width: 0
Number: Flexible width proportional to other elements, full stretch if only element on row

Flex-shrink:
Fixed width: 0
Number: Flexible width proportional to other elements, full stretch if only element on row

Flex-basis:
Number or "auto"




http://the-echoplex.net/flexyboxes/?fixed-height=on&legacy=on&display=flex&flex-direction=row&flex-wrap=wrap&justify-content=flex-start&align-items=flex-start&align-content=flex-start&order[]=0&flex-grow[]=1.5&flex-shrink[]=1&flex-basis[]=auto&align-self[]=auto&order[]=5&flex-grow[]=0&flex-shrink[]=0.5&flex-basis[]=auto&align-self[]=flex-start&order[]=0&flex-grow[]=3&flex-shrink[]=1&flex-basis[]=auto&align-self[]=auto&order[]=0&flex-grow[]=0&flex-shrink[]=1&flex-basis[]=auto&align-self[]=auto&order[]=0&flex-grow[]=0&flex-shrink[]=1&flex-basis[]=auto&align-self[]=auto

*/