'use strict'

angular.module('shuttlerockApp')
    .directive "blurredBgImg", ->
        console.log "blurring background" if DEBUG
        (scope, element, attrs) ->
            attrs.$observe "blurredBgImg", (value) ->
                element.css
                    "background-image": "url(" + value + ")"
                    "webkit-filter": "blur(5px) brightness(0.8) saturate(0.7)"
                    "-moz-filter": "blur(5px) brightness(0.8) saturate(0.7)"
                    "filter": "blur(5px) brightness(0.8) saturate(0.7)"

    .directive "bgImg", ->
        (scope, element, attrs) ->
            attrs.$observe "bgImg", (value) ->
              if value && value.length
                element.css
                  "background-image": "url(" + value + ")"

    .directive "allScreen", ->
        restrict: "A"
        link: (scope, element, attrs)->
            newHeight = $(window).height() + 60 + 'px'
            $(element).height newHeight

    .directive "middleOf", ->
        restrict: "A"
        link: (scope, element, attrs)->
          selector = attrs.middleOf
          referenceElement = $(selector)
          referenceElement.on 'load', (e) ->
            w = referenceElement.width()
            h = referenceElement.height()
            element.css(left: "#{w/2}px", top: "#{h/2}px")
            element.show()

    .directive "siteHeader", ($rootScope, Dock)->
        restrict: "E"
        templateUrl: assetPrefix + "/views/menu.html"
        replace: true
        link: ->
          $rootScope.dock = Dock

    .directive 'lazyLoadingImage', ->
        restrict: 'A'

        link: (scope, element, attrs) ->
            showIfNeeded = (element, src) ->
                if $(window).scrollTop() + 2 * $(window).height() > $(element).offset().top
                    $(element).attr 'src', src

            showIfNeeded(element, attrs['lazyLoadingImage'])

            $(window).on 'scroll', ->
                showIfNeeded(element, attrs['lazyLoadingImage'])


    .directive "photoMenu", ->
        restrict: "E"
        templateUrl: assetPrefix + "/scripts/directives/templates/photoMenu.html"
        replace: true

    .directive "buttonBlock", ($rootScope) ->
        restrict: "E"
        templateUrl: assetPrefix + "/scripts/directives/templates/buttonBlock.html"
        replace: true
        scope:
            disabled: "="
            click: "&"
            showPreloader: "@"
        link: (scope, element, attrs) ->
            scope.columnClasses = $rootScope.columnClasses
            $('[back]').on "click", ->
                #change class on slide-container in index.html
                $('.slide-container').removeClass('rl')
                $('.slide-container').addClass('lr')
                scope.$apply()
                history.back()
            $('[next]').on "click", (e) ->
                #show loading div
                $rootScope.showPreloader = attrs.showPreloader
                #change class on slide-container in index.html
                $('.slide-container').removeClass('lr')
                $('.slide-container').addClass('rl')
                scope.$apply()
            $('[home]').on "click", (e) ->
                #show loading div
                $('.slide-container').removeClass('rl')
                $('.slide-container').addClass('lr')
                scope.$apply()

    .directive 'mainMenuButton', ->
        restrict: 'A'
        link: (scope, element, attrs) ->
          $(element).on 'click', (e)->
            e.preventDefault()
            menuBody = $('.sr-menu-wrapper')
            menuBody.css('width', '180px')
            $('.sr-menu-curtain').show()
            $('#sr-header').css('margin-left', '-180px')
            $('div[ui-view] > div.ng-scope').css('margin-left', '0')
            $('div[ui-view] > div.ng-scope').css('margin-left', '-180px')
    
    .directive 'hideMenu', ->
        restrict: 'A'
        link: (scope, element, attrs) ->
          $(element).on 'click', (e) ->
            menuBody = $('.sr-menu-wrapper')
            menuBody.css('width', '0')
            $('#sr-header').css('margin-left', '0')
            $('.sr-menu-curtain').hide()
            $('div[ui-view] > div.ng-scope').css('margin-left', '0')
            return false

    .directive 'hideOnFocus', ->
      link: (scope, element, attrs) ->
        selector = attrs['hideOnFocus']
        controlledElement = $(selector)
        $(element).on 'focus', ->
          controlledElement.css('display', 'block')
          controlledElement.css('float', 'none')
          setTimeout ->
            controlledElement.css('float', 'right')
          , 0
        $(element).on 'blur', ->
          if controlledElement.is(':hover')
            controlledElement.on 'mouseout', ->
              controlledElement.css('display', 'none')     
              controlledElement.off 'mouseout'
          else
            controlledElement.css('display', 'none') 

    .directive "pageHeader", ($translate) ->
        restrict: "E"
        replace: true
        template: '<div class="page-header {{columnClasses}}">
                        <h1 ng-bind-html="title"></h1>
                    </div>'
        link: (scope, element, attrs) ->
            attrs.$observe "title", (value) ->
                scope.title = $translate(value)

    .directive 'greyPlaceholder', ($timeout) ->
        restrict: 'A'
        link: (scope, element, attrs) ->
            if attrs.greyPlaceholderData? && attrs.greyPlaceholderData.length > 0
                img = $(element).parent().find('img')                
                data = JSON.parse(attrs.greyPlaceholderData)
                realWidth = $(element).parent().width()
                photoWidth = data.width
                shrinkFactor = photoWidth / realWidth
                photoHeight = data.height
                realHeight = photoHeight / shrinkFactor
                $(element).css('height', "#{realHeight}px")
                img.css('height', "#{realHeight}px")
                $(element).css('opacity', '1.0')
                img.on 'load', ->
                    $(element).animate { opacity: 0.0 }, 500, 'swing', ->
                        $(element).remove()


.directive "error", ($translate) ->
        restrict: "E"
        replace: true
        template: '<div ng-show="showError" class="error {{columnClasses}}">
                                <p ng-bind-html="errorText"></p>
                            </div>'
        link: (scope, element, attrs) ->
            attrs.$observe "errorText", (value) ->
                scope.showError = false
                scope.errorText = $translate(value)
                scope.showError = !!value


.directive "blurredImage", ->
        restrict: "E"
        replace: true
        scope:
            src: "@"

        link: (scope, element, attrs) ->
            scope.itemId = "canvas"
            fillCanvas = (src) ->
                return  unless scope.src
                console.log "filling canvas" if DEBUG
                context = element[0].getContext("2d") # get the 2d context object
                console.log "element "+element[0].width if DEBUG
                img = new Image() #create a new image
                img.onload = ->
                    console.log element if DEBUG
                    console.log "on load " if DEBUG
                    context.drawImage img, 0, 0, 100, 100 # draw the image at the given location
                    boxBlurCanvasRGBA scope.itemId, 0, 0, 100, 100, 5, 1

                img.crossOrigin = ""
                console.log "setting source "+src if DEBUG
                img.src = scope.src

            attrs.$observe "src", (value) ->
                console.log "src  is #{value}" if DEBUG
                fillCanvas(value)
        template: "<canvas id='canvas' class='background'></canvas>"