Tiled map reader with CooffeScript

if console == undefined
    console = {
        log: (msg) ->
            msg = msg
    }


class LoaderInfo
    @intance = new LoaderInfo()
    @res = 0
    @resLoaded = 0
    @callBack = null

    constructor: () ->

    @loaded: () ->
        LoaderInfo.resLoaded += 1
        if LoaderInfo.res > 0
            if LoaderInfo.resLoaded>=LoaderInfo.res
                LoaderInfo.callBack() if LoaderInfo.callBack

    @incLoads: () ->
        LoaderInfo.res += 1


class BaseDOMManager

    injectCSS: (target, css) ->
        console.log css
        for i of css
            do (i) =>
                target.style[i] = css[i]

    addEvent: (target, name,func) ->
        if target.attachEvent
            return target.attachEvent 'on'+name, func
        else
            return target.addEventListener name, func

    ajaxRequest: (url,callBack,type) ->
        if type==undefined
            #type = 'json'
            type = 'text'
        request = null
        nativeEval = window['eval']
        if window.ActiveXObject
            try
                request = new ActiveXObject "Msxml2.XMLHTTP"
            catch err
                # ...
            if request == null
                try
                    request = new ActiveXObject "Microsoft.XMLHTTPP"
                catch e
                    # ...
        else
            try
                request = new XMLHttpRequest()
            catch err
                # ...

        if request
            request.onreadystatechange = () =>
                if request.readyState==4
                    if request.status==200
                        if type=='json'
                            callBack nativeEval "(" + request.responseText + ")"
                        else
                            callBack request #.responseText
            request.open "GET", url
            request.send null

        return request

    parseDOM: (xmlString) ->
        if window.DOMParser
            parser=new DOMParser()
            xmlDoc=parser.parseFromString xmlString,"text/xml"
        else
            xmlDoc=new ActiveXObject "Microsoft.XMLDOM"
            xmlDoc.async = false
            xmlDoc.loadXML xmlString
        xmlDoc

    trim: (string) ->
        return string.replace /^\s+|\s+$/g, ''



class Entity
    constructor: (@name,@x,@y,@type) ->
        if @type==undefined
            @type="circle"
        if @rad==undefined
            @rad=16
        @ele = document.createElement 'area'
        @position @x,@y
        @ele.href="#"
        @ele.title = @ele.alt = @name

    position: (x,y) =>
        @x=x
        @y=y
        @ele.coords = @x+","+@y+","+@rad

class Tileset
    constructor: (src, @name, @firstgid, @tW, @tH, cb) ->
        @gid = @firstgid
        @image = new Image()
        @image.src = src
        @image.onload = @loaded
        @tiles = []
        LoaderInfo.incLoads()
        if cb==undefined
            @callBack = (dt)->
                dt = dt
        else
            @callBack = cb

    loaded: (e) =>
        y=0
        while y<@image.height
            x=0
            while x<@image.width
                @tiles.push
                    x:x
                    y:y
                x += @tW
            y += @tH
        LoaderInfo.loaded()
        @callBack(e)

    render: (id, cx, x,y) =>
        if id==0
            return
        id = id - @firstgid
        #cx.fillStyle = "#efefef"
        #cx.fillRect x,y, @tW,@tH
        t = @tiles[id]
        cx.drawImage @image, t.x,t.y, @tW, @tH, x,y, @tW,@tH



class Map extends BaseDOMManager

    constructor: (src) ->
        @tilesets = []
        @layers = []
        @ajaxRequest src, @dataDone, 'xml'
        @resources = 0
        @canvas = document.createElement 'canvas'
        @injectCSS @canvas, {
                position:'absolute'
            }
        LoaderInfo.incLoads()

    dataDone: (request) =>
        doc = @parseDOM request.responseText
        mapDOM = doc.getElementsByTagName('map')[0]
        @canvas.width = parseInt(mapDOM.getAttribute('width')) * parseInt(mapDOM.getAttribute('tilewidth'))
        @canvas.height = parseInt(mapDOM.getAttribute('height')) * parseInt(mapDOM.getAttribute('tileheight'))

        for tileset in doc.getElementsByTagName 'tileset'
            do (tileset) =>
                image = tileset.getElementsByTagName('image')[0].getAttribute 'source'
                @tilesets.push new Tileset(image, tileset.getAttribute('name'),
                        new Number(tileset.getAttribute('firstgid')),
                        new Number(tileset.getAttribute('tilewidth')),
                        new Number(tileset.getAttribute('tileheight')), @resourceDone )
                @resources += 1

        for layer in doc.getElementsByTagName 'layer'
            do (layer) =>
                #data = layer.getElementsByTagName('data')[0]
                #bData = window.atob @trim data.childNodes[0].nodeValue
                lay = []
                #for data in @trim(layer.getElementsByTagName('data')[0].childNodes[0].nodeValue).split(',')
                for data in layer.getElementsByTagName('tile')
                    do (data) =>
                        lay.push parseInt data.getAttribute 'gid'
                @layers.push
                    name:layer.getAttribute 'name'
                    width:layer.getAttribute 'width'
                    height:layer.getAttribute 'height'
                    data:lay

        LoaderInfo.loaded()

    resourceDone: (e) =>
        @resources -= 1
        if @resources<=0
            #console.log 'done'
            @renderizeMap()

    renderizeMap: () =>
        @render @canvas.getContext('2d')

    render: (cx,x,y,width,height) =>
        for i in [0..@tilesets.length-1]
            do (i) =>
                tileset = @tilesets[i]
                layer = @layers[i]
                t = 0
                for iy in [0..layer.height-1]
                    do (iy) =>
                        for ix in [0..layer.width-1]
                            do (ix) =>
                                px = ix*tileset.tW
                                py = iy*tileset.tH
                                #console.log layer.data[t]
                                tileset.render layer.data[t], cx, px,py
                                t += 1




class Stage extends BaseDOMManager
    @instance = null

    constructor: (@divName) ->
        Stage.instance = this
        @addEvent window, 'load', (e) ->
            window.stage = Stage.instance
            Stage.instance.start()
        @tX = @tY = @x = @y = 0
        @over = new Image()
        @over.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAs"+
        "TAAALEwEAmpwYAAAAB3RJTUUH3QgPExkF/22+eAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAALElEQVRYw+3OMQEAAAgD"+
        "oGn/zjOGDyRg2ubT5pmAgICAgICAgICAgICAgMABQLQDPYU9GZMAAAAASUVORK5CYII="

    start: () =>
        LoaderInfo.callBack = @iniStage

        @div = document.getElementById @divName
        @plane = document.createElement 'div'
        @map = document.createElement 'map'
        @map.name = "cliclableNodes"


        @injectCSS @div, {
                overflow:'hidden'
            }
        @injectCSS @plane, {
                position:'absolute'
            }
        @injectCSS @over, {
                position:'absolute'
                width:'inherit'
                height:'inherit'
            }
        #@over.usemap = "#" + "cliclableNodes"
        @over.setAttribute 'usemap', '#cliclableNodes'

        # request on Teste60
        @maps = [
            new Map('./data/base.tmx')
        ]
        #@maps[0].renderizeMap()

        @plane.appendChild @maps[0].canvas
        @div.appendChild @plane
        @div.appendChild @over
        @plane.appendChild @map

        @ele = new Entity "Zé",0,0
        @map.appendChild @ele.ele

    iniStage: () =>
        console.log LoaderInfo.res
        @addEvent window.document, 'keydown', @keyDown
        @addEvent window.document, 'keyup', @keyUp
        @moveView()

    keyDown: (e) =>
        switch e.keyCode
            when 37
                @x = @tX
                @tX -= 4
            when 38
                @y = @tY
                @tY -= 4
            when 39
                @x = @tX
                @tX += 4
            when 40
                @y = @tY
                @tY += 4
        #console.log e.keyCode
        e.preventDefault()
        e.stopPropagation()
        false

    keyUp: (e) =>
        e.preventDefault()
        e.stopPropagation()
        false

    moveView: () =>
        @x += (@tX - @x)*0.2
        @y += (@tY - @y)*0.2
        if @x!=@tX or @y!=@tY
            @plane.style.left = String(parseInt -@x) + "px"
            @plane.style.top = String(parseInt -@y) + "px"

        window.setTimeout @moveView, 50







stage = new Stage('tilespace')