CompiledFile.coffee

Main base class for node transpiler for JS / Coffeescript / SASS / LESS with automatic sourcemapping and compression.

fs = require('fs')
_console = require('PrettyConsole')

module.exports = class CompiledFile

constructor: (conf) ->
    @route = conf.route
    @source = conf.source
    @debug = conf.debug
    @silent = conf.silent
    @tokens = conf.tokens
    @uglifyify = conf.uglifyify
    @secureProtocol = conf.secureProtocol
    @compiling = false
    @sourceFiles = []
    @hasBuildError = false
    @withWatchers = {}

@killed = false

@tearDownItems =
      intervals: []
      watchers: []

if conf.ttl and !@killed
      @tearDownItems.intervals.push(setInterval(=>
        @build()
      , conf.ttl))

for p in ['SIGINT', 'SIGTERM', 'SIGUSR1', 'SIGUSR2']
      process.on(p, @tearDown.bind(@))

setUp: () ->
    @

tearDown: ->
    @killed = true

if @tearDownItems.intervals.length
      _console.log(@route, "Clearing #{@tearDownItems.intervals.length} intervals")

while (i = @tearDownItems.intervals.shift()) != undefined
        clearInterval(i)

if @tearDownItems.watchers.length
      _console.log(@route, "Closing #{@tearDownItems.watchers.length} watchers")

while (i = @tearDownItems.watchers.shift()) != undefined
        i.close()

responder: (stringFile, req, res) ->
    if @compiling
      setTimeout(=>
        @responder(stringFile, req, res)
      , 250)
      
      return
    
    done = ()=>
      if @hasBuildError
        res.writeHead(424)
        res.end()
        return
      
      resOb = 
        'ETag': stringFile.etag
        'Content-Type': stringFile.contentType
        'Cache-Control': 'must-revalidate, post-check=0, pre-check=0'

if req.headers['if-none-match'] isnt undefined and req.headers['if-none-match'] is stringFile.etag
        res.writeHead(304, resOb)    
        res.end()    
      else
        res.writeHead(200, resOb)
        res.end(if req.method isnt 'HEAD' then stringFile.contents else "")
    
    if typeof @tokens is 'function'
      @build(=>
        done()
      )
    else
      done()

build: (cb=(->)) ->
    true

run: (cb) ->
    cb.call(@)

express: () ->
    (req, res, next)=>
      strippedQuery = req.originalUrl.replace(/(\?.+)?$/gi, '')

if (req.method is 'GET' or req.method is 'HEAD') and strippedQuery is @route
        @responder(@compiledStream, req, res)

else if (req.method is 'GET' or req.method is 'HEAD') and strippedQuery is @route + ".map" and @debug
        @responder(@compiledSourceMap, req, res)
        
      else
        next()

onBuildError: (msg) ->
    length = ('  ' + new Date().toUTCString()).length + 4
    padd = " "

while length--
      padd += " "

lines = msg.toString().split(/\n|\r|\r\n/).map((l, idx)->
      return padd + l if idx > 0
      return l
    ).join("\n")

_console.error(lines)
    @compiling = false

setUpWatchers: () ->
    return if @killed

for source in @sourceFiles when @withWatchers[source] is undefined
      @withWatchers[source] = true

@tearDownItems.watchers.push(fs.watch(source, {persistent: false}, ()=>
        if !@compiling and !@killed
          _console.log(@route, "Build triggered from #{source}")
        @build()
      ))

expressRouteEventSource.coffee

An express middleware router that manages a pool of JS eventsource connections and uses node events to push messages to clients in the pool.

express = require('express')
events = require('events')

pool = []

keepAliveTime = 5000

setInterval(->
  for p in pool when Date.now() - p.last > keepAliveTime
    p.res.emit("eventSourcePing")
, keepAliveTime)

Router = new express.Router()

Object.assign(Router, events::)

Object.assign(Router, {

poolSize: ->
    pool.length

})

Router.on("eventSourcePing", (res)->
  idx = pool.findIndex((p)-> p.res is res)
  if idx > -1
    pool[idx].last = Date.now()
)

Router.on("eventSourceNotify", (type="data", json, id)->
  idx = pool.length - 1

while idx >= 0
    if pool[idx].res.connection.destroyed
      pool.splice(idx, 1)
    else
      pool[idx].res.emit("eventSourceSend", type, json, id)
    idx--
)

Router.on("eventSourceRemove", (res)->
  idx = pool.findIndex((p)-> p.res is res)
  pool.splice(idx, 1) if idx > -1
)

Router.on("eventSourceAdd", (req, res)->
  unless pool.find((p)-> p.req is req)
    pool.push({
      req: req
      res: res
      last: Date.now()
    })
)

cleanEventSource = (res)->
  Router.emit("eventSourceRemove", res)
  res.removeAllListeners("eventSourceSubscribe")
  res.removeAllListeners("eventSourceSend")
  res.removeAllListeners("eventSourceUnsubscribe")
  res.removeAllListeners("eventSourcePing")

Router.use((req, res, next)->
  if (req.get("accept") or "").toLowerCase() isnt "text/event-stream" and !req.xhr
    return global.globalStatusCodes.status400(req, res)

if !req.appSession?.user?.userId
    return global.globalStatusCodes.status401(req, res)

res.on("eventSourceSend", (type="data", json, id)->
    res.write("event: #{type}\n")
    res.write("retry: 5000\n")
    res.write("id: #{id or Date.now()}\n")
    res.write("data: #{JSON.stringify(json)}\n\n")
    Router.emit("eventSourcePing", res)
  )

res.on("eventSourcePing", ->
    res.write("\n\n")
    Router.emit("eventSourcePing", res)
  )

res.once("eventSourceSubscribe", ->
    Router.emit("eventSourceAdd", req, res)

req.on("close", ->
      cleanEventSource(res)
    )

res.writeHead(200, {
      'Connection': 'keep-alive'
      'Content-Type': 'text/event-stream'
      'Cache-Control': 'no-cache'
    })

Router.emit("eventSourcePing", res)
  )

res.once("eventSourceUnsubscribe", ->
    cleanEventSource(res)
  )

next()
)

Router

module.exports = ->
  Router

mithrilExtension.coffee

Custom helper extension for Mithril JS to add various features and shared data.

isNode = typeof window is 'undefined' and typeof module isnt 'undefined'

headersToJson = (str)->
  ob = {}

for ref in str.split("\n")
    ob[ref.substring(0, ref.indexOf(":")).trim()] = ref.substring(ref.indexOf(":") + 1).trim()

formatAjaxRequest = (ob)->
  ob.method = "GET" unless ob.method
  ob.method = ob.method.toUpperCase()

unless typeof ob.complete is 'function'
    ob.complete = m.cache.noop

ob.background = true

ob.cache = true if ob.cache is undefined

ob.timeout = ob.timeout or (1000 * 180)
  ob.raw = ob.raw or false

unless ob.cache
    ob.url += (ob.url.indexOf("?") > -1 ? "&" : "?") + "cb=" + (new Date().getTime())

dummyNode = m('')

objectPropertyTypes = require("./objectPropertyTypes.coffee")

measureCanvas = document.createElement('canvas')

module.exports = ->

###
  
    CUSTOMIZE MITHRIL
  
  ###

m.route.prefix("#")

###
  
    END CUSTOMIZE MITHRIL
  
  ###

Object.defineProperties(m, {

ajax: objectPropertyTypes.secured((conf)->
      requestOptions = formatAjaxRequest(conf)
      transport = null
      timeoutCheck = null

requestOptions.extract = (xhr, xhrOptions)->
        if xhr.status is 0
          return if xhr.statusText.length then xhr.statusText else {message: 'aborted', status: null}

if xhr.status >= 400
          msg = ""

try
            msg = JSON.parse(xhr.responseText or xhr.statusText)
          catch _error
            msg = xhr.responseText or xhr.statusText

mm = {message: "", status: xhr.status}

mm.code = msg.code if msg?.code

while typeof msg is 'object' and msg?.message
            msg = msg.message

mm.message = msg

return mm

return headersToJson(xhr.getAllResponseHeaders()) if xhrOptions.method is 'HEAD'

if requestOptions.raw then xhr.responseText else JSON.parse(xhr.responseText)

requestOptions.config = (xhr)->
        transport = xhr
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')

timeoutCheck = setTimeout(->
          m.cache.debugString("AJAX timeout")
          setTimeout(->
            conf.complete({message: "Timeout"}, null, transport)
            m.redraw()
          , 5)
          return xhr.abort()
        , requestOptions.timeout)

xhr

m.request(requestOptions).then((resp)->
        clearTimeout(timeoutCheck)

if transport.status >= 400 or transport.status is 0
          conf.complete(resp, null, transport)
        else
          conf.complete(null, resp, transport)
        m.redraw()
      )

transport
    )

cache: objectPropertyTypes.writable({})

setTimeout: objectPropertyTypes.secured((f, t)->
      setTimeout(->
        f()
        m.redraw()
      , t)
    )

isMithrilNode: objectPropertyTypes.secured((ob)->
      return false unless typeof ob is 'object'
      Object.getPrototypeOf(ob) is Object.getPrototypeOf(dummyNode)
    )

})

Object.defineProperty(m.cache, 'debounce', objectPropertyTypes.secured((func, wait, immediate=false, dontRedraw=false) ->
    timeout = undefined
    ->
      context = this
      args = arguments

later = ->
        timeout = null
        if !immediate
          func.apply context, args
        return

callNow = immediate and !timeout
      clearTimeout timeout
      timeout = if dontRedraw then setTimeout(later, wait) else m.setTimeout(later, wait)
      if callNow
        func.apply context, args
      return
  ))

Object.defineProperty(m.cache, 'import', objectPropertyTypes.secured((to, from)->
    for own kk,vv of from when to.hasOwnProperty(kk)
      to[kk] = from[kk]
  ))

Object.defineProperty(m.cache, 'invokableValueOrNot', objectPropertyTypes.secured((v, bindTo=null)->
    if typeof v is 'function' then (if bindTo then v.call(bindTo) else v()) else v
  ))

Object.defineProperty(m.cache, 'extend', objectPropertyTypes.secured((args...) ->
    last = args[ args.length - 1 ]
    deep = if typeof last is 'boolean' then last else false
    first = args[0]

i = 1
    while i < args.length

for own kk, vv of args[i]

if typeof vv is 'object' and vv isnt null and typeof first[kk] is 'object' and first[kk] isnt null and deep
          m.cache.extend(first[kk], vv)
        else
          first[kk] = vv

i++

first
  ))

Object.defineProperty(m.cache, 'safeFullLink', objectPropertyTypes.secured((s)->
    s = s.trim()
    return s if m.cache.regexps.url(s)
    s = "http://#{s}"
    return if m.cache.regexps.url(s) then s else "#"
  ))

Object.defineProperty(m.cache, 'stringWordCount', objectPropertyTypes.secured((s)->
    s = s.trim().replace(/\s+/gm, ' ')
    return 0 unless s
    s.split(" ").length
  ))

Object.defineProperty(m.cache, 'selectYearsList', objectPropertyTypes.secured(->
    d = new Date().getFullYear()
    e = d - 100
    a = [{value: 0, text: "Year...", identity: 0}]
    while d >= e
      a.push({value: d, text: d, identity: d})
      d--
    a
  ))

Object.defineProperty(m.cache, 'selectStatesList', objectPropertyTypes.secured(->
    [{value: "", text: "State...", identity: "none"}].concat(m.cache.statesList.map((n)->
      {value: n.short, text: n.long, identity: n.short.toLowerCase()}
    ))
  ))

Object.defineProperty(m.cache, 'selectMonthsList', objectPropertyTypes.secured((stringValue=false, emptyValue=0)->
    [{value: (if stringValue then String(emptyValue) else emptyValue), text: "Month...", identity: 0}].concat(m.cache.monthsList.map((m, x)->
      {value: (if stringValue then String(x+1) else x+1), text: m, identity: x+1}
    ))
  ))

Object.defineProperty(m.cache, 'parseUrl', objectPropertyTypes.secured((s)->
    s = s.trim()
    return null unless m.cache.regexps.url(s)
    anchor = document.createElement('a')
    anchor.href = s.toLowerCase()

hostname = anchor.hostname
    hostname = hostname.replace(/^www\./i, '')

naked = hostname.replace(m.cache.regexps.tld, '')

if naked.indexOf(".") > -1
      naked = naked.substr(naked.lastIndexOf(".") + 1)

naked += hostname.match(m.cache.regexps.tld)[0] if hostname.match(m.cache.regexps.tld)

{
      protocol: anchor.protocol
      hostname: hostname
      nakedHostname: naked
      pathname: anchor.pathname
      search: anchor.search
      hash: anchor.hash
    }
  ))

Object.defineProperty(m.cache, 'elementPosition', objectPropertyTypes.secured((el)->
    return null if isNode
    return null unless el

rect = el.getBoundingClientRect()
    bodyRect = document.body.getBoundingClientRect()
    {top: rect.top - bodyRect.top, left: rect.left - bodyRect.left}
  ))

Object.defineProperty(m.cache, 'guid', objectPropertyTypes.secured(->
    s4 = ->
      Math.floor((1 + Math.random()) * 0x10000).toString(16).substring 1

s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4()
  ))

Object.defineProperty(m.cache, 'camelToHuman', objectPropertyTypes.secured((str)->
    return str unless str?.length
    str = str.charAt(0).toUpperCase() + str.slice(1)
    str.replace(/[a-z][A-Z]/g, (match)->
      ss = match.split("")
      ss[0] + " " + ss[1]
    )
  ))

Object.defineProperty(m.cache, 'humanToCamel', objectPropertyTypes.secured((str)->
    return str unless str?.length
    str[0] + str.slice(1).replace(/\s(.)/g, (fullMatch, bracket1)->
      bracket1.toUpperCase()
    )
  ))

Object.defineProperty(m.cache, 'numberOrdinalEnding', objectPrope...

PDFGen.coffee

Module function to generate a report PDF in the browser, using various pieces of client data, as either a blob or URI string

module.exports =

EPReport: (profile, EPSites, fileName, asBlob=false)->

pendingSites = []
    sitesPercentage = 100
    violations = 0
    displayName = do->
      if profile?.fullProfile?.names?[0]?.name
        n = profile.fullProfile.names[0].name
        return m.cache.multitrim("#{n.prefix} #{n.firstName} #{n.middleName} #{n.lastName} #{n.suffix}")
      profile.name

if profile.driversLicenseProvided

removedSites = EPSites.map((e)-> e.domain)

else

removedSites = EPSites.filter((e)-> !e.requiresDriversLicense).map((e)-> e.domain)
      pendingSites = EPSites.filter((e)-> !!e.requiresDriversLicense).map((e)-> e.domain)
      violations = pendingSites.length
      sitesPercentage = Math.ceil((removedSites.length / EPSites.length) * 100)

addresses = profile.fullProfile.addresses.map((a)->
      "#{a.address.address1} #{a.address.address2}, #{a.address.addressCity}, #{a.address.addressState} #{a.address.addressZip}".replace(/\s{2,}/g, ' ')
    )

phones = profile.fullProfile.phones.map((a)->
      a.phone
    )

emails = profile.fullProfile.emails.map((a)->
      a.email
    )

rowY = 129

gutterText = (text, y)->
      doc.setFontSize(m.cache.PDF.sizes.mediumFont)

doc.text(text, m.cache.PDF.sizes.leftGutter, y, m.cache.PDF.defaultTextConf({maxWidth: m.cache.PDF.sizes.leftGutterWidth}))

doc.setFontSize(m.cache.PDF.sizes.smallFont)

pairs = (rr, conf)->
      doc.setTextColor(rr[2] or m.cache.PDF.colors.darkGray)

doc.setFontStyle("bold")

doc.text(rr[0], m.cache.PDF.sizes.leftJustify, rowY, m.cache.PDF.defaultTextConf({maxWidth: m.cache.PDF.sizes.leftKeyWidth}))

doc.setFontStyle("normal")

conf = m.cache.PDF.defaultTextConf({maxWidth: m.cache.PDF.sizes.rightKeyWidth})

for line in doc.splitTextToSize(rr[1], conf.maxWidth, conf)
        doc.text(line, m.cache.PDF.sizes.leftJustify + m.cache.PDF.sizes.leftBuffer, rowY, conf)
        rowY = (doc.autoPaginationLine(line, doc.lastPos.y, conf) or m.cache.PDF.sizes.emptyDocTop)

doc.moveDown()
      rowY = (doc.autoPaginationLine("O", doc.lastPos.y, conf) or m.cache.PDF.sizes.emptyDocTop)

sitesList = (list)->
      conf = m.cache.PDF.defaultTextConf({maxWidth: m.cache.PDF.sizes.halfColumn})

if list.length

half = Math.ceil(list.length / 2)

for r, x in list.slice(0, half)
          for line in doc.splitTextToSize(r, conf.maxWidth, conf)
            doc.text(line, m.cache.PDF.sizes.leftJustify, rowY, conf)
          if list[x + half]
            for line in doc.splitTextToSize(list[x + half], conf.maxWidth, conf)
              doc.text(line, m.cache.PDF.sizes.rightColumnJustify, rowY, conf)
          rowY = (doc.autoPaginationLine(line, doc.lastPos.y, conf) or m.cache.PDF.sizes.emptyDocTop)

else

doc.setFontStyle("italic")
        doc.text("No sites currently", m.cache.PDF.sizes.leftJustify, rowY, conf)
        doc.setFontStyle("normal")
        rowY = (doc.autoPaginationLine("O", doc.lastPos.y, conf) or m.cache.PDF.sizes.emptyDocTop)

doc = m.cache.PDF.newJSPDF()
    m.cache.PDF.JSPDFCoverImage(doc, "/images/pdf/PrivacyReportTemplate.png")

doc.setProperties({title: fileName})

doc.setFontSize(m.cache.PDF.sizes.extraLargeFont)

centerLine = m.cache.PDF.sizes.leftJustify + (m.cache.PDF.sizes.bodyWidthFromLeftJustify / 2)

doc.centerText(displayName, centerLine, 42)

doc.setFontSize(m.cache.PDF.sizes.largeFont)

doc.centerText("Privacy Report", centerLine, doc.lastPos.y)

doc.setTextColor(m.cache.PDF.colors.darkGray)
    gutterText("Engagement Overview", rowY)

for rr in [
      ["Report Date", do ->
        split = fileName.split("-")

hash = 
          Q1: "First Quarter"
          Q2: "Second Quarter"
          Q3: "Third Quarter"
          Q4: "Fourth Quarter"
          Jan: "January"
          Feb: "February"
          Mar: "March"
          Apr: "April"
          May: "May"
          Jun: "June"
          Jul: "July"
          Aug: "August"
          Sep: "September"
          Oct: "October"
          Nov: "November"
          Dec: "December"

"#{hash[split[0]]}, #{split[1]}"
      ]
      ["Name", displayName]
      ["Personal Information Being Removed", "Mailing / Home Addresses\nPhone Numbers\nEmail addresses\nNames of relatives\nDate of birth"]
      ["Package ID", profile.packageId, "#ffffff"]
    ]
      pairs(rr)

doc.setTextColor(m.cache.PDF.colors.darkGray)

rowY = (doc.autoPaginationLine("", doc.lastPos.y, {}) or m.cache.PDF.sizes.emptyDocTop)

gutterText("Key Takeaways", rowY)

for rr in [
      ["Databases Found", "#{removedSites.length} sites have been searched for your personal information\nOngoing scanning for additional sources"]
      ["Removals", "#{sitesPercentage}% of sources have been requested for removal or are cleared to date"]
      ["Compliance", "#{violations} instances of compliance violations found"]
    ]
      pairs(rr)

doc.moveDown(2)

rowY = (doc.autoPaginationLine("", doc.lastPos.y, {}) or m.cache.PDF.sizes.emptyDocTop)

gutterText("Methodology", rowY)

for li, xx in [
      "We contact data brokers and website owners using both automated APIs and manual requests."
      "Removals are generally processed within a few weeks, although some sites take up to two-three months, due to requiring mail-ins and extensive follow-up."
      "Sites will try to find a way to re-add your information even following a removal request. To prevent this, we scan for compliance on a continuous basis."
      "You receive progress reports detailing the results of our privacy protection actions throughout the course of the term."
    ]
      conf = m.cache.PDF.defaultTextConf({maxWidth: m.cache.PDF.sizes.bodyWidthFromLeftJustify})
      doc.text(String(xx+1)+".", m.cache.PDF.sizes.leftJustify, rowY, conf)
      conf = m.cache.PDF.defaultTextConf({maxWidth: m.cache.PDF.sizes.bodyWidthFromLeftJustify - m.cache.PDF.sizes.listItemMargin})

for line in doc.splitTextToSize(li, conf.maxWidth, conf)
        doc.text(line, m.cache.PDF.sizes.leftJustify + m.cache.PDF.sizes.listItemMargin, rowY, conf)
        rowY = (doc.autoPaginationLine(line, doc.lastPos.y, conf) or m.cache.PDF.sizes.emptyDocTop)

if xx is 0
        doc.setFontStyle("italic")
        doc.text("(Note: If you log into your Privacy dashboard, you will see only the automated removals listed.)", m.cache.PDF.sizes.leftJustify + m.cache.PDF.sizes.listItemMargin, rowY, conf)
        doc.setFontStyle("normal")

doc.moveDown()
      rowY = (doc.autoPaginationLine("", doc.lastPos.y, conf) or m.cache.PDF.sizes.emptyDocTop)

conf = m.cache.PDF.defaultTextConf({maxWidth: m.cache.PDF.sizes.bodyWidthFromLeftJustify})

doc.setFontStyle("italic")

for line in doc.splitTextToSize("Please Note: This service does not include social media monitoring; however, it is suggested you review your social networking sites, along with your family members’ sites, to adjust privacy settings and remove posted content as you see fit.", conf.maxWidth, conf)
      doc.text(line, m.cache.PDF.sizes.leftJustify, rowY, conf)
      rowY = (doc.autoPaginationLine(line, doc.lastPos.y, conf) or m.cache.PDF.sizes.emptyDocTop)

doc.setFontStyle("normal")

doc.moveDown(2)
    rowY = (doc.autoPaginationLine("", doc.lastPos.y, conf) or m.cache.PDF.sizes.emptyDocTop)

gutterText("Sites Removed", rowY)

sitesList(...

HTML.php

A static class for use in managing and spawning instances from the HTMLObject / related classes. Including a static object pool to keep track of every HTML object spawned, to help with global searching and collection management and generic utilities.

<?php
/*
 * HTML spawner
 */

abstract class HTML{
    
    public static $stack = array();
    
    public static function getAll(){
        return new HTMLObjectCollection(self::$stack);
    }
    
    public static function clearAll(){
        self::$stack = array();
    }
    
    public static function getTop(){
        $arr = array();
        foreach(self::$stack as $item){
            if(!(bool)$item->parent()){
                $arr[]=$item;
            }
        }
        return new HTMLObjectCollection($arr);
    }
    
    public static function obj($str='',$add=true){
        return new HTMLObject($str,$add);
    }
    public static function css(){
        return new StyleBlockObject();
    }
    public static function stack(array $arr=array()){
        return new HTMLObjectCollection($arr);
    }    
    public static function scriptFile($src){
       return self::obj('<script></script>')->setAttr(array('src'=>$src,'type'=>'text/javascript'));
    }
    
    public static function inlineScript($content){
        return self::obj('<script></script>')->setAttr('type','text/javascript')->appendNode($content);
    }
    
    public static function cssFile($src,$media='all'){
       return self::obj('<link/>')->setAttr(array('media'=>$media,'href'=>$src,'type'=>'text/css','rel'=>'stylesheet'));
    }
}

/*
 * Helper methods
 */

abstract class UTIL{
    public static function arrayExtend(array $a,array $b){
        $merged = $a;
    
        foreach ( $b as $key => &$value ){
          if ( is_array ( $value ) && isset ( $merged [$key] ) && is_array ( $merged [$key] ) ){
            $merged [$key] = self::arrayExtend( $merged [$key], $value );
          }
          else{
            $merged [$key] = $value;
          }
        }
      
        return $merged;
    }
    
    public static function PHPCodeHighlight($str,array $configs = array()){
        $c = UTIL::arrayExtend(array(
            'vars'=>'#E32B78',
            'return'=>'#0e66b9',
            'int'=>'#fc4622',
            'operators'=>'#426647',
            'comments'=>'#FF6A00'
        ),$configs);        
        
        $pre = preg_split( '/\r\n|\r|\n/', preg_replace(
            array('/<\?php(\s|\r|\n)+/ims',
            '/(\s|\r|\n)+\?>/ims'),
            array('',''),
            $str)
        );
            
        $indents = 0;
        $keys = array_keys($pre);
        $size = sizeOf($keys);
        for($i=0;$i<$size;$i++){
            $line = $pre[$keys[$i]];
            $strip = preg_replace('/\t{1,}|\s{3,}/im','',$line);

if(strpos($line,'(') === false && strpos($line,'{') === false && strpos($line,')') === false && strpos($line,'}') === false){
                $pre[$keys[$i]] = str_pad('',$indents,"\t",STR_PAD_LEFT).$strip;
            }else{
                $more = substr_count($line,'{') + substr_count($line,'(');
                $less = substr_count($line,'}') + substr_count($line,')');
                
                if($more > $less){
                    $pre[$keys[$i]] = str_pad('',$indents,"\t",STR_PAD_LEFT).$strip;
                    $indents = $indents + $more - $less;
                }else{
                    $indents = $indents + $more - $less;
                    $pre[$keys[$i]] = str_pad('',$indents,"\t",STR_PAD_LEFT).$strip;
                }
            }
        }

$pre = implode("\r",$pre);
        $pre = highlight_string('<?php'.$pre.'?>',true);

$pre = preg_replace(
            array(
                '/<code>(.*)<\/code>/ims',
                '/<\?php(.*)\?>/ims'
            ),
            array(
                '$1',
                '$1'
            ),
            $pre  
        );
        $pre = str_ireplace(array(
            '<span style="color: #007700">',
            '<span style="color: #0000BB">$',
            '<span style="color: #FF8000">'
        ),array(
            '<span style="color: '.$c['operators'].'">',
            '<span style="color: '.$c['vars'].'">$',
            '<span style="color: '.$c['comments'].'">'
        ),$pre);

$inComment = false;
        $lines = preg_split('/\r\n|\r|\n/', $pre);
        foreach($lines as &$line){
            if(strpos($line,'/*') !== false){
                $inComment = true;
            }
            if(strpos($line,'//') === false && !$inComment){
                $line = preg_replace(
                    array(
                        '/(^|\s+|\t+|\r+|\n+|>|;)(\d+)($|\s+|\t+|\r+|\n+|<|&)/ims',
                        '/(\s|\r|\n|\t)+(true|false|integer|string|object|return|array|function|new|case|break|public|private|protected)(\r|\n|:|;|\(|\s| |<|<)/ims'
                    ),
                    array(
                        '$1<span style="color:'.$c['int'].'">$2</span>$3',
                        '$1<span style="color:'.$c['return'].'">$2</span>$3'
                    ),
                    $line  
                );
            }
            if(strpos($line,'*/') !== false){
                $inComment = false;
            }            
        }

return preg_replace(array(
            '/<span style="color: #0000BB">(\d)+<\/span>/ims',
            '/^<span style="color: #000000"><br\/>(.*)/ims',
            '/(.*)<br\/>$/ims'
        ),array(
            '<span style="color:'.$c['int'].'">$1</span>',
            '<span style="color: #000000">$1',
            '$1'
        ),implode("<br/>",$lines));
    }
}

HTMLBase.php

The base class for HTML objects and style block objects to share common interface features.

<?php
abstract class HTMLBase{
    protected function renderable($o){
        return ($o instanceof HTMLObject || $o instanceof StyleBlockObject);
    }
    
    protected function sanitizeMovedNode($node,$newParent,$remove=true){
        if($this->renderable($node)){
            if($node->parent() && $remove){
                $node->parent()->removeChild($node);
            }
            $node->setParent($newParent);
        }
        return $this;
    }
    
    public function append($node,$remove=true){
        $node = $this->equalizeNodes($node);      
        foreach($node as $newNode){
            $this->sanitizeMovedNode($newNode,$this,$remove);
            $this->children[] = $newNode;
        }
        return $this;
    }
    
    public function appendTo(HTMLObject $obj,$remove=true){
        if($this->parent && $remove){
            $this->parent->removeChild($this);
        }
        
        $this->setParent($obj);
        $obj->append($this);
        return $this;
    }
    
    public function prependTo(HTMLObject $obj,$remove=true){
        if($this->parent && $remove){
            $this->parent->removeChild($this);
        }      
        
        $this->setParent($obj);
        $obj->prepend($this); 
        return $this;
    }
    
    public function prepend($node,$remove=true){
        $node = $this->equalizeNodes($node);
        foreach($node as $newNode){
            $this->sanitizeMovedNode($newNode,$this,$remove);
            array_unshift($this->children,$newNode);
        }
        return $this;
    }
    
    public function before($node,$remove=true){
        $node = array_reverse($this->equalizeNodes($node));
        $par = $this->parent;
        if($par){
            $insert = $par->findChildObjectIndex($this);
            foreach($node as $newNode){
                $this->sanitizeMovedNode($newNode,$par,$remove);
                $par->addChildAtIndex($insert,$newNode);
            }
        }else{
            HTMLError::uninserted();
        }
        return $this;
    }
    
    public function after($node,$remove=true){
        $node = array_reverse($this->equalizeNodes($node));
        $par = $this->parent;
        if($par){
            $insert = $par->findChildObjectIndex($this)+1;
            foreach($node as $newNode){
                $this->sanitizeMovedNode($newNode,$par,$remove);
                $par->addChildAtIndex($insert,$newNode);
            }
        }else{
            HTMLError::uninserted();
        }
        return $this;
    }
    
    public function setData($key,$val=false){        
        if(!is_array($key)){
            $this->data[$key] = $val;
        }else{
            foreach($key as $subkey=>$subval){
                $this->data[$subkey] = $subval;
            }
        }
        return $this;
    }
    
    public function getData($key){
        return isset($this->data[$key]) ? $this->data[$key] : false;
    }
    
    public function unsetData($key){
        if(isset($this->data[$key])){
            unset($this->data[$key]);
        }
        return $this;
    }
    
    public function setParent($obj){
        $this->parent = $obj;
    }
    
    public function parent(){
        return $this->parent;
    }
}

HTMLObject.php

The root class for interacting with HTMLObjects including nested HTMLObjects

<?php
/*
 * HTMLObject
 */

class HTMLObject extends HTMLBase implements HTMLTemplate{
   
    public $strObj;
    protected $openingTag;
    protected $closingTag;
    protected $hasLayout;
    protected $attrs;
    protected $templates;
    protected $data;
    protected $children;
    protected $onRealize;
    protected $parent;
   
    public function __construct($strObj,$add=true){
        $this->strObj = $strObj;
        $this->openingTag = $this->closingTag = $this->hasLayout = $this->parent = $this->onRealize = false;
        $this->children = $this->attrs = $this->templates = $this->data = array();
        
        $this->assignOpeningTag();
        $this->assignClosingTag();
        if($add){
            HTML::$stack[] = $this;
        }
    }
    
    public function __clone(){
        $this->parent = $this->data = false;
    }

public function clean($cleanAttrs=true){
        $this->children = $this->templates = $this->data = array();
        if($cleanAttrs){
            $this->attrs = array();
        }
        return $this;
    }
    
    public function remove(){
        $this->strObj = '';
        $this->hasLayout = false;
        $this->clean();
        return $this;
    }
    
    public function hasLayout(){
        return $this->hasLayout;
    }
    
    public function templates(){
        return $this->templates;
    }
    
    public function getTemplateCount(){
        return count($this->templates);
    }
    
    public function hasTemplate($k){
        return isset($this->templates[$k]);
    }
    
    public function addTemplate($key,HTMLObject $obj=null){
        if(is_array($key)){
            foreach($key as $subkey=>$subobj){
                if($subobj instanceof HTMLObject){
                    $this->templates[$subkey] = $subobj;
                }
            }
        }else{
            $this->templates[$key] = $obj;
        }
        return $this;
    }
    
    private function setClonesChildren($clone,$children){
        if(!empty($children)){            
            foreach($children as $child){
                if($this->renderable($child)){
                    $clone->append($this->getClones($child));
                }else{
                    $clone->appendNode($child);
                }
            }
        }
        return $clone;
    }
    
    private function setClonesTemplates($clone,array $temps){
        if(!empty($temps)){
            foreach($temps as $key=>$temp){
                if(is_object($temp)){
                    $clone->addTemplate($key,$this->getClones($temp));
                }
            }
        }
        return $clone;
    }
    
    private function getClones($o,$args=array()){
        $clone = clone $o;
        if($clone instanceof HTMLObject){
            $children = $clone->children();
            $temps = $clone->templates();
            
            if(!empty($children) || !empty($temps)){
                $clone->clean(false);
            }
            
            if($clone->onRealize()){
                $this->callInContext($clone->onRealize(),$clone,$args);     
            }
            
            $clone = $this->setClonesChildren($clone,$children);
            $clone = $this->setClonesTemplates($clone,$temps);
        }
        return $clone;
    }
    
    public function getClone(){
        return $this->getClones($this);
    }
    
    /*
     * shouldnt be public, but is for unit test access
     */
    public function realizeTemplate(){
        $args = func_get_args();
        $key = $args[0];
        $params = array_slice($args,1);       
        return $this->getClones($this->templates[$key],$params);
    }

private function assignOpeningTag(){
        if(!empty($this->strObj)){
            if(preg_match('/<(.)+>/is', $this->strObj)){
                $this->openingTag = preg_replace('/(<)(\s)*([A-Za-z0-9]+)(\s)*(\/|.)*(>.*)/is', '$3', $this->strObj);
                $this->hasLayout = true;
            }else{
                $this->openingTag = '';
            }
        }else{
            $this->openingTag = '';
        }
    }
    
    public function getTag(){
        return $this->strObj;
    }
    
    private function assignClosingTag(){
        if(!empty($this->strObj)){
            if(strpos($this->strObj,'><') !== false){
                $this->closingTag = $this->openingTag;
            }
        }else{
            $this->closingTag = '';
        }
    }

public function findChildObjectIndex($o){
        $remove = false;
        foreach($this->children as $i=>$child){
            if($child === $o){
                $remove = $i;
                break;
            }
        }
        return $remove;
    }
    
    public function removeChild($o){
        if($this->renderable($o)){
            $index = $this->findChildObjectIndex($o);
            if($index !== false){
                unset($this->children[$index]);
            }
        }else if(is_int($o) && isset($this->children[$o])){
            unset($this->children[$o]);
        }
        $this->children = array_values($this->children);
        return $this;
    }
    
    public function find($selector){
        $find = new HTMLObjectSearch($this,$selector);
        return $find->results();
    }
    
    private function tagToFullTag($t){
        if($t == '#text'){return $t;}
        if(in_array($t,array('img','hr','link','br'))){
            return '<'.$t.'/>';
        }
        return '<'.$t.'></'.$t.'>';
    }
    
    private function parseDOM($item){
        $arr = array(
            'tag'=>$this->tagToFullTag(strtolower($item->nodeName)),
            'text'=>'',
            'type'=>$item->nodeType,
            'attr'=>array(),
            'children'=>array()
        );

if($item->hasAttributes()){
            foreach ($item->attributes as $index=>$attr){
                 $arr['attr'][$attr->name] = $attr->value;
             } 
        }

if($item->hasChildNodes()){
            foreach($item->childNodes as $i){
                $arr['children'][]= $this->parseDOM($i);
            }
        }
        
        if($item->nodeType === XML_TEXT_NODE){
            $arr['text']=$item->nodeValue;
        }
        
        return $arr;
    }
    
    private function htmlExplode($str){
        $indexReplaces = array(
            '/(\r|\n)+/is'=>'',
            '/(>\s+<)/is'=>'><',
            '/<(\s)+/is'=>'<',
            '/"\s+\//is'=>'"/',
            '/(\s)+>/is'=>'>',
            '/<\s+\//is'=>'</',
            '/\/\s+/is'=>'/',
            '/>\s+/is'=>'>',
            '/\s+</is'=>'<'
        );

$str = preg_replace(array_keys($indexReplaces),array_values($indexReplaces),$str);
        $doc = new DOMDocument();
        $doc->loadHTML($str);
        $body = $doc->getElementsByTagName('body')->item(0);
        $list = array();
        foreach ($body->childNodes as $item){
            $list[] = $this->parseDOM($item);
        }
        return $this->htmlListToObjects($list);
    }
    
    private function htmlListToObjects(array $list){
        $nodeList = array();

foreach($list as $item){
            if($item['type'] !== XML_TEXT_NODE){
                $i = HTML::obj($item['tag']);
                if(!empty($item['attr'])){
                    $i->setAttr($item['attr']);
                }
                if(!empty($item['children'])){                    
                    $children = $this->htmlListToObjects($item['children']);
                    foreach...

SessionManager.php

A class for managing the session data for users logged into CMS portals, with built in forgery detection.

<?php

class SessionManager{
	private $session;
	private $level;
	const token = 'VALID_SERVER';

public function __construct(){
		session_start();		
		$this->session = $_SESSION;		
		$this->level = isset($_SESSION['USER_LEVEL']) ? $_SESSION['USER_LEVEL'] : 'none';
	}
	
	public function getLevel(){
		return $this->level;
	}
	
	public function get($k){
		return isset($this->session[$k]) ? $this->session[$k] : false;
	}
	
	public function setLevel($l){
		$this->level = $l;
		$this->invalidateSession();
		$this->startNewSession();
		$this->level = $l;
		$_SESSION['USER_LEVEL'] = $l;
		return $this;
	}
	
	public function init(){
		if(!isset($this->session[self::token]) || !isset($_COOKIE['sid']) || !$this->userCheck()){
			$this->invalidateSession();
			$this->startNewSession();
		}else{
			$_SESSION['USER_LAST'] = time();
		}
	}
	
	private function userCheck(){
		return
		(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
		||
		(
		($_COOKIE['sid'] == session_id())
		&&
		($this->session['USER_AGENT'] == $this->safeServer('HTTP_USER_AGENT'))
		&&
		($this->session['USER_ACCEPT'] == $this->safeServer('HTTP_ACCEPT'))
		&&
		($this->session['USER_ACCEPT_ENCODING'] == $this->safeServer('HTTP_ACCEPT_ENCODING'))
		&&
		($this->session['USER_ACCEPT_LANG'] == $this->safeServer('HTTP_ACCEPT_LANGUAGE'))
		&&
		($this->session['USER_ACCEPT_CHAR'] == $this->safeServer('HTTP_ACCEPT_CHARSET'))
		&&
		($this->session['USER_IP'] == long2ip(ip2long($this->safeServer('REMOTE_ADDR'))& ip2long("255.255.0.0")))
		&&
		($this->session['USER_START'] > strtotime("-1 hour"))
		&&
		($this->session['USER_LAST'] > strtotime('-20 mins'))
		);
	}
	
	private function safeServer($k){
		return isset($_SERVER[$k]) ? $_SERVER[$k] : false;
	}
	
	private function setUser(){
		$_SESSION['USER_AGENT'] = $this->safeServer('HTTP_USER_AGENT');
		$_SESSION['USER_ACCEPT'] = $this->safeServer('HTTP_ACCEPT');
		$_SESSION['USER_ACCEPT_ENCODING'] = $this->safeServer('HTTP_ACCEPT_ENCODING');
		$_SESSION['USER_ACCEPT_LANG'] = $this->safeServer('HTTP_ACCEPT_LANGUAGE');
		$_SESSION['USER_ACCEPT_CHAR'] = $this->safeServer('HTTP_ACCEPT_CHARSET');
		$_SESSION['USER_IP'] = long2ip(ip2long($this->safeServer('REMOTE_ADDR'))& ip2long("255.255.0.0"));
		$_SESSION['USER_START'] = time();
		$_SESSION['USER_LAST'] = time();
	}
	
	private function invalidateSession(){
		setcookie('sid',"",1);
		if(!session_id()){
			session_start();
		}
		session_regenerate_id(true);	
		session_unset();
		if(session_id()){
			session_destroy();
		}
	}
	
	public static function hash($str){
		return hash('sha512',$str);
	}
	
	public static function salt(){
		$size = mcrypt_get_iv_size(MCRYPT_CAST_128, MCRYPT_MODE_CFB);
		$iv = mcrypt_create_iv($size, MCRYPT_DEV_RANDOM);
		return $iv;
	}
	
	private function startNewSession(){
		$id = self::hash(time());
		session_id($id);
		session_start();
		$_SESSION[self::token] =  true;
		setcookie('sid',$id,strtotime('+1 hour'));
		$this->setUser();
		$this->level = 'none';
	}
}

ballistic.js

An experimental physics program using real-world physical force calculations to simulate rocket trajectories and flight paths calculated in real-time second intervals, using Google Maps as a display engine.

$(function(){
$.maths = {
        crossSection:function(d){
            //ft
            return 3.141592653589793 * Math.pow((d/2),2);
        },
        gravity:function(){
            return new $.vector({v:-32.1740});
        },
        drag:function(c){
            var d = {
                p:false,
                v:0
            },
            e = $.extend(d,c),
            dd = 0.5 * $.maths.massDensity(e.p.altitude) * Math.pow(Math.abs(e.v),2) * e.p.cd * e.p.area(e.p.getTime()),
            dd = dd * 32.14;
            dd = dd/e.p.mass(e.p.getTime()),
            dd = isNaN(dd) ? 0.000001 : dd;

if(e.v > 0){
                return 0-dd;
            }
            return dd;
        },
        angleToVector:function(a,f){
		    if(a == 0){
				var th = f,
				tv = 0;
			}else if(a == 90){
				var th = 0,
				tv = f;
			}else{
				var th = Math.cos(a.toRad())*f,
				tv = Math.sin(a.toRad())*f;
			}
            return new $.vector({h:th,v:tv});  
        },
        applyForces:function(o,t){
            var h = o.vector.h,
            v = o.vector.v;
            for(var f=0;f<o.forces.length;f++){
                if(o.forces[f].apply()){
                    var tf = ((o.forces[f].f(t))*32.14)/o.mass(o.getTime());					
                    h += $.maths.angleToVector(o.forces[f].a(t,o.target),tf).h,
                    v += $.maths.angleToVector(o.forces[f].a(t,o.target),tf).v;                    
                    o.forces[f].decrease();
                }
                o.setVector(new $.vector({h:h,v:v}));
            }
            return o;
        },
        applyDrags:function(o){
            var h = o.vector.h,
            v = o.vector.v,
            dh = $.maths.drag({p:o,v:h}),
            dv = $.maths.drag({p:o,v:v}),
            g = $.maths.gravity();
            o.setVector(new $.vector({h:(h+dh+g.h),v:(v+dv+g.v)}));
            return o;
        },
        massDensity:function(a){
            if(a>=278385.8){
                return 0;
            }else{
                var kms = a/3280.8,
                kv = kms*6.5,
                sp = Math.pow((1-(kv/288.15)),5.256)*101325,
                d = (sp *28.9644)/(1000*(288.15-kv)*8.31432);
                return d * 0.00194055;
            }
            //slugs/ft^3
        },
        processMove:function(o){
			$.maths.applyForces(o,o.getTime());  
			$.maths.applyDrags(o);
			$.maths.updateAltitude(o);            
			$.maths.updateGeo(o);
			o.updatePath();
			o.failCheck();
        },
        updateAltitude:function(o){
            var a = o.altitude;   
            var na = a+o.vector.v;
            o.setAltitude(((na>0) ? na : 0));
            return o;
        },
		windDrift:function(o){
			return o.heading.toRad();
			var or = o.heading,
			d = ($.maths.massDensity(o.altitude)*2000),
			diff = Math.floor(Math.random() * (d - (0-d) + 1)) + (0-d),
			diff = isNaN(diff) ? 0 : diff,
			ne = or + diff;
			return ne.toRad();
		},
		distanceFromGeo:function(start,heading,distance){
			var epsilon = 0.000001,
			R = 6371,
			distance = distance * 1.60934,
			lat1 = start.lat.toRad(),
			lon1 = start.long.toRad(),
            d = distance/R,
			h = heading.toRad(),
			dLat = d*Math.cos(h);
			
			if (Math.abs(dLat) < epsilon){
				dLat = 0;
			}
			
			var lat2 = lat1 + dLat,
			dPhi = Math.log(Math.tan(lat2/2+Math.PI/4)/Math.tan(lat1/2+Math.PI/4)),
			q = (isFinite(dLat/dPhi)) ? dLat/dPhi : Math.cos(lat1),
			dLon = d*Math.sin(h)/q;

if (Math.abs(lat2) > Math.PI/2) lat2 = lat2>0 ? Math.PI-lat2 : -Math.PI-lat2;
			var lon2 = (lon1+dLon+3*Math.PI)%(2*Math.PI) - Math.PI;
			
			return new $.geo({lat:lat2.toDeg(),long:lon2.toDeg()});
		},
        updateGeo:function(o){
            o.setGeo($.maths.distanceFromGeo(o.geo,o.heading,(o.vector.h/5280)));            
            return o;
        }
    };
    
    $.vector = function(c){
        var d = {
            h:0,
            v:0
        },o = this;
        
        $.each($.extend(d,c),function(i,v){
            o[i]=v;
        });
    };

$.geo = function(c){
        var d = {
            lat:0,
            long:0
        },o = this;
        
        $.each($.extend(d,c),function(i,v){
            o[i]=v;
        });
		
		return this;
    };
    
    $.force = function(c){
        var d = {
            f:0,
            a:90,
            t:0
        },o = this;
        
        $.each($.extend(d,c),function(i,v){
            o[i]=v;
        });

this.prevBurst = this.burst;
		this.burst = 0;
		
		this.clone=function(){
			this.poly = new google.maps.Polyline({
			  strokeColor: '#0A8A23',
			  strokeOpacity: 0.5,
			  strokeWeight: 3,
			  clickable:false,
			  draggable:false,
			  geodesic:true
			});
			
			this.innerCircle = new google.maps.Circle({
				clickable:false,
				draggable:false,
				fillColor:'#F72323',
				fillOpacity:0.5,
				strokeWeight: 0,
				radius:(this.minDistance*1609.34),
				visible:false
			});

this.outerCircle = new google.maps.Circle({
				clickable:false,
				draggable:false,
				fillColor:'#0A8A23',
				fillOpacity:0.5,
				strokeWeight: 0,
				radius:(this.maxDistance*1609.34),
				visible:false
			});
		};
		
		this.heading = 360 - this.heading;
		
		var curry = function(i){
            return function(t){
                return i;
            };
        };

this.updatePath=function(){
			if(this.altitude > this.prevBurst && this.burst != this.prevBurst){
				this.burst = this.prevBurst;
			}
		
			var path = this.poly.getPath();
			path.push(new google.maps.LatLng(this.geo.lat, this.geo.long));
		};
		
		this.failCheck=function(){
			if(this.willFail !== false && this.failureMessage === false){
				if(this.getTime() >= this.willFail){
					var fails = [
						function(){
							this.forces[0].f=function(){return 0;};
							this.failureMessage = 'Engine failure';
						},
						function(){
							this.hasExploded=true;
							this.failureMessage = 'Airframe failure';
						},
						function(){
							this.forces[0].a=function(t,target){
								return t-(Math.random() * (80 - 1) + 1)
						    };
						    this.heading = 360 - (Math.random() * (360 - 1) + 1);
							this.failureMessage = 'Guidance failure';
						}
					];
					var called = fails[Math.floor(Math.random() * fails.length)];
					called.call(this);
				}
			}
		};
		
		this.launch=function(){
	...

bp.ui.elements.js

Part of a custom CMS system called Blueprint, this file allowed for uniform creation of specific form elements and other user interactive DOM items. Allowing for consistent styling and event binding for the entire CMS.

$(function(){
    "use strict";

$.blueprint.ui.elements = {
        dropDown : function(kvs,onChange,customSort){
            if(customSort !== false){
                kvs.sort(function(a,b){
                    return (a.k < b.k) ? -1 : (a.k > b.k ? 1 : 0);
                });
            }
            if(customSort == 'DESC'){
                kvs.reverse();
            }
            var root = $('<div class="bpFormElementWrap"></div>')
            .bind('setValue',function(e,v){
                var _el = $(this);
                _el.find('.dropDown > div > div').each(function(){
                   if($(this).data('value') == v){                           
                       _el.data('value',v).find('.selection').removeClass('selection');
                       $(this).addClass('selection');                           
                       _el.find('.dropDown > span').html($(this).html());
                       return;
                   } 
                });
            })
            .data({
                'elementType':'dropDown',
                'value':kvs[0].v
            })
            .append('<div class="downArrow"></div>')
            .append($('<div class="dropDown"></div>')                
                .append('<span>'+kvs[0].k+'</span>')
                .append(function(){
                    var divs = $('<div class="bpDropDownOptions"></div>');
                    
                    for(var ki=0;ki<kvs.length;ki++){
                        divs.append($('<div>'+kvs[ki].k+'</div>').addClass((ki == 0 ? 'selection' : '')).data('value',kvs[ki].v));
                    }
                    
                    return divs;
                }())
            )
            .bind('click',function(){
                $('.bpDropDownOptions').not($(this).find('.dropDown > div')).hide();
                if($(this).find('.dropDown > div').is(':visible')){
                    $(this).find('.dropDown > div').hide();
                }else{
                    $(this).find('.dropDown > div').show();
                }
            })
            .on('mouseenter','.dropDown > div > div',function(){
                $(this).addClass('hover');
            })
            .on('mouseleave','.dropDown > div > div',function(){
                $(this).removeClass('hover');
            })
            .on('click','.dropDown > div > div',function(e){
                e.stopPropagation();
                root.data('value',$(this).data('value'));
                $(this).parent().hide().parent().find('span').html($(this).html());
                $(this).parent().find('.selection').removeClass('selection');
                $(this).addClass('selection');
                onChange.call(root);
            });
            
            return root;
        },
        accordian : function(kvs){
            var a = $('<div></div>'), i;
            
            for(i=0;i<kvs.length;i++){
                a
                .append('<div class="bpAccordianTab'+(i === 0 ? ' selection' : '')+'"><div>'+kvs[i].k+'</div></div>')
                .append($('<div class="bpAccordianContent'+(i === 0 ? ' selection' : '')+'"></div>').append(kvs[i].v));
            }

a.on('click','.bpAccordianTab:not(.selection)',function(){
                a.find('.selection').removeClass('selection');
                $(this).addClass('selection');
                a.find('.bpAccordianContent:eq('+a.find('.bpAccordianTab').index($(this))+')').addClass('selection');
            });
            
            return a;  
        },
        alert : function(m){
            return $.blueprint.ui.elements.modalWindow({
                content:$('<div class="alertMsg"><p>'+m+'</p></div>').append(
                    $.blueprint.ui.elements.formButton('OK',function(){
                        $.blueprint.ui.elements.closeModalWindow();
                    })
                ),
                height:105
            }).find('.close').hide().end();
        },
        confirm : function(m,c){
            return $.blueprint.ui.elements.modalWindow({
                content:$('<div class="alertMsg"><p>'+m+'</p></div>').append(
                    $.blueprint.ui.elements.formButton('OK',function(){                        
                        $.blueprint.ui.elements.closeModalWindow();
                        c();
                    }).css({
                        'margin-right':'20px',
                        'margin-left':'-10px'
                    })
                )
                .append(
                    $.blueprint.ui.elements.formButton('Cancel',function(){
                        $.blueprint.ui.elements.closeModalWindow();
                    })
                ),
                height:105
            }).find('.close').hide().end();
        },
        prompt : function(m,d,c){
            var i = $.blueprint.ui.elements.textInput(d,function(){}),
            p = $.blueprint.ui.elements.modalWindow({
                content:$('<div class="alertMsg"><p>'+m+'</p></div>').append(
                    $.blueprint.ui.elements.formButton('OK',function(){
                        $.blueprint.ui.elements.closeModalWindow();
                        c(i.getValue());                        
                    }).css({
                        'margin-right':'20px',
                        'margin-left':'-10px'
                    })
                )
                .append(
                    $.blueprint.ui.elements.formButton('Cancel',function(){
                        $.blueprint.ui.elements.closeModalWindow();
                    })
                ),
                height:125
            }).find('.close').hide().end()
            
            p.find('.alertMsg p:first')
            .after(i)
            .after('<Br/>');
            
            return p;
        },
        toggleButtons : function(kvs,onChange){
            var root = $('<div class="bpToggleWrap"></div>')
            .data({
                'elementType':'toggleButtons',
                'value':kvs[0].v
            })
            .bind('setValue',function(e,v){
                var _el = $(this);
                _el.find('.toggleCell').each(function(){
                    if($(this).data('value') == v){                           
                       $(this).trigger('click');
                       return;
                   }
                });
            })
            .on('click','.toggleCell:not(.selection)',function(){
                root.data('value',$(this).data('value'));
                $(this).parent().find('.selection').removeClass('selection');
                $(this).addClass('selection');                
                onChange.call(root);
            }),
            i,tot=0;
            
            for(i=0;i<kvs.length;i++){
                tot += kvs[i].k.length;
            }
            
            for(i=0;i<kvs.length;i++){
                root.append($('<div class="toggleCell'+(i>0 ? '' : ' selection')+'" style="width:'+(kvs[i].k.length/tot * 100)+'%;"></div>').html('<div>'+kvs[i].k+'</div>').data('value',kvs[i].v));
            }
            
            root.append('<div class="clear"></div>');
            
            return root;
        },
        textArea : function(val,onChange){
            var root = $('<textarea class="bpFormElementWrap">

') .bind('setValue',function(e,v){ $(this).data('value',v).val(v); }) .data({ ...

bp.core.js

Also part of the Blueprint CMS showing a custom templating engine I wrote that behaves similar to SPRINTF in PHP, but accept jQuery items to be inserted in place of tokens, including any associated event handlers.

$(function(){
    "use strict";
    $.blueprint.core = {
        pool : {},
        swaps : {},
        randomString: function(length){
           var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
           var result = '';
           for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
           return result;
        },
        importTemplate:function(path,callback){
            $.ajax({
                success:function(data){
                    callback.apply(this,[data]);  
                },
                dataType:'text',
                type:'GET',
                url:path
            });
        },
        insert:function(template,tokens){
            var recurse = function(o){
                o.add(o.children()).contents().each(function(){
                    var target = $(this), mod = false;
                    
                    if(this.nodeType == 3){
                        for(var t in tokens){
                            if(tokens.hasOwnProperty(t) && typeof tokens[t] == 'object'){
                                var reg = new RegExp('{{'+t+'}}','gm');
                                if(this.nodeValue.match(reg)){
                                    var rn = $.blueprint.ui.core.randomString(10);
                                    this.nodeValue = this.nodeValue.replace(reg,'<span data-replace="'+rn+'"></span>');
    
                                    $.blueprint.ui.core.swaps[rn] = {k:t,o:tokens[t].clone(true,true)};
                                    mod = true;
                                }
                            }
                        }
                        if(mod){
                            $(this).replaceWith($.parseHTML(this.nodeValue));                            
                        }
                    }else{
                        recurse($(this).children());
                    }
                }); 
            };
            
            for(var t in tokens){
                if(tokens.hasOwnProperty(t) && (typeof tokens[t] == 'string' || typeof tokens[t] == 'number')){
                    var reg = new RegExp('{{'+t+'}}','gm');
                    template = template.replace(reg,tokens[t]);
                }
            }
    
            var temp = $(template);
            recurse(temp);
    
            setTimeout(function(){
                for(var s in $.blueprint.ui.core.swaps){
                    if($.blueprint.ui.core.swaps.hasOwnProperty(s)){
                        $('[data-replace="'+s+'"]').each(function(){
                            var c = $.blueprint.ui.core.swaps[s].o.clone(true,true);
                            if($.blueprint.ui.core.pool[$.blueprint.ui.core.swaps[s].k]){
                                $.blueprint.ui.core.pool[$.blueprint.ui.core.swaps[s].k].push(c);
                            }else{
                                $.blueprint.ui.core.pool[$.blueprint.ui.core.swaps[s].k] = [c];
                            }
                            $(this).replaceWith(c);
                        });
                    }
                    delete $.blueprint.ui.core.swaps[s];
                }
            },0);            
            
            return temp;
        }
    };
});

jamboo.js

The core library for the Jamboo unit testing engine I wrote for testing javascript code that relies on a browser in order to function and be tested properly. Similar to other unit testing frameworks it allows for the creation of custom test suites and sub-test that allow the user to define what a passing test would consist of, but also define if that test should be different from one browser to another.

if ( !Date.prototype.toISOString ) {
  ( function() {
    
    function pad(number) {
      if ( number < 10 ) {
        return '0' + number;
      }
      return number;
    }
 
    Date.prototype.toISOString = function() {
      return this.getUTCFullYear() +
        '-' + pad( this.getUTCMonth() + 1 ) +
        '-' + pad( this.getUTCDate() ) +
        'T' + pad( this.getUTCHours() ) +
        ':' + pad( this.getUTCMinutes() ) +
        ':' + pad( this.getUTCSeconds() ) +
        '.' + (this.getUTCMilliseconds() / 1000).toFixed(3).slice( 2, 5 ) +
        'Z';
    };
  
  }() );
}

if (!String.prototype.format) {
  String.prototype.format = function() {
    var args = arguments;
    return this.replace(/{(\d+)}/g, function(match, number) { 
      return typeof args[number] != 'undefined'
        ? args[number]
        : match
      ;
    });
  };
}

if (!Array.prototype.filter){
  Array.prototype.filter = function(fun /*, thisp */)
  {
    "use strict";

if (this == null)
      throw new TypeError();

var t = Object(this);
    var len = t.length >>> 0;
    if (typeof fun != "function")
      throw new TypeError();

var res = [];
    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in t)
      {
        var val = t[i]; // in case fun mutates this
        if (fun.call(thisp, val, i, t))
          res.push(val);
      }
    }

return res;
  };
}

var jError = function(name,msg,ms){
    this.name = name || '';
    this.message = msg || '';
    this.ms = ms || 0;
};

var jSuccess = function(name,assertions,ms){
    this.name = name || '';
    this.assertions = assertions || '';
    this.ms = ms|| 0;
};

var jTest = function(name,test){
this.name = name || '';
    this.test = test || function(){};
};

var makeError = function(){
    try { throw Error('') } catch(err) { return err; }
};

var jNode = function(name,parent){
    this.results = [];
    this.name = name;
    this.parent = parent;

this.customFail = function(){return false;};
    this.customPass = function(){return false;};
    
    this.setCustomFailNote = function(m){
        this.customFail = m;
        return this;
    };
    
    this.setCustomPassNote = function(m){
        this.customPass = m;
        return this;
    };
    
    this.importAssertions = function(o){
        for(var oo in o){
            if(o.hasOwnProperty(oo)){
                this[oo] = o[oo];
            }
        }
    };
    
    this.assertTrue = function(a){
        this.assertEquals(a,true);
    };
      
    this.assertFalse = function(a){
        this.assertEquals(a,false);
    };
    
    var truncate = function(s){
        if(s.length > 50){
            return s.substr(0,50)+'...';
        }
        return s;
    };
    
    this.assertEquals = function(a,b){
        if(a === b){
            this.results.push({status:true,message:this.name+': '+truncate(a)+' equals '+truncate(b),note:this.customPass(this)});
        }else{
            this.results.push({status:false,message:getErrorMessage(makeError(),this.name+': '+a+' does not equal '+b+': '),note:this.customFail(this)});
        }            
    };
    
    this.assertGreater = function(a,b){
        if(a > b){
            this.results.push({status:true,message:this.name+': '+truncate(a)+' is greater than '+truncate(b),note:this.customPass(this)});
        }else{
            this.results.push({status:false,message:getErrorMessage(makeError(),this.name+': '+a+' is not greater than '+b+': '),note:this.customFail(this)});
        }
    };
    
    this.assertLess = function(a,b){
        if(a < b){
            this.results.push({status:true,message:this.name+': '+truncate(a)+' is less than '+truncate(b),note:this.customPass(this)});
        }else{
            this.results.push({status:false,message:getErrorMessage(makeError(),this.name+': '+a+' is not less than '+b+': '),note:this.customFail(this)});
        }
    };
    
    this.assertNotEquals = function(a,b){
        if(a !== b){
            this.results.push({status:true,message:this.name+': '+truncate(a)+' does not equal '+truncate(b),note:this.customPass(this)});
        }else{
            this.results.push({status:false,message:getErrorMessage(makeError(),this.name+': '+a+' equals '+b+': '),note:this.customFail(this)});
        }
    };
    
    this.pauseOnTest = function(){
        this.parent.pause();
        return this;
    };
    
    this.unPauseNow = function(){
        this.parent.unpause();
        return this;  
    };
};
 
var jamboo = function(suiteName){
    "use strict";
    var _jb = this;
    _jb.suiteName = suiteName || '';
    _jb.results = [];
    _jb.battery = [];
    _jb.resultsSuccesses = [];
    _jb.resultsPass = [];
    _jb.resultsFail = [];
    _jb.resultsErrors = [];
    _jb.totalTime = 0;
    _jb.startTime = false;
    _jb.runStart = false;

_jb.summerize = function(string){
        var o = {
            name : _jb.suiteName,
            totalTests : _jb.resultsSuccesses.length + _jb.resultsErrors.length ,
            testsSuccessfulCount : _jb.resultsSuccesses.length ,
            testsErrorCount : _jb.resultsErrors.length ,
            testsSuccessfulPercent : ((_jb.resultsSuccesses.length  / (_jb.resultsSuccesses.length  + _jb.resultsErrors.leng...

runner.php

The master run file for the Jamboo unit testing engine that collects all the test suites that are to be run for that specific browser, runs all of then, waits to hear the results back from each one, and then creates an aggregate test result.

<?php
    require_once 'test_configs.php';
    
    $args = getopt("b:");    
    
    $whitelist = array('Firefox','Chrome','Opera','IE8','IE9','IE10');
    
    $browser = $args['b'] ? $args['b'] :
        !empty($_GET['b']) ? $_GET['b'] : 'Firefox';
    $browser = in_array($browser,$whitelist) ? $browser : 'Firefox';
    
    $testFiles = array();
    
    foreach($BrowserTestConfigs as $testFile=>$conf){
        if(in_array($browser,$conf['browsers']) && file_exists($testFile.'.php')){
            $testFiles[$testFile.'.php']=$conf;
        }
    }

?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jamboo Test Runner</title>

kvs.append($('<div class="kv round" style="'+style+'"></div>').html(props[i]))

if((i+1)%4 === 0){
                    report.append('<div class="clear"></div>');
                }
            }
            
            report.prepend('<div class="clear"></div>').prepend(kvs).prepend('<h1>Test Suite Run - '+sum.startTime+'</h1>').appendTo('body').wrap('<div id="jamboo-testReportSummary"></div>');
            
            str = '<properties>';
            str += '<property name="Browser Name" value="'+sum.browserName+'"></property>';
            str += '<property name="Browser Version" value="'+sum.browserVersion+'"></property>';
            str += '<property name="User Agent" value="'+sum.userAgent+'"></property>';
            str += '<property name="Start Time" value="'+sum.startTime+'"></property>';
            str += '</properties>';
            xml.appendTo('body');
            xml.get(0).innerHTML = '<testsuites>'+str+xs.join('')+'</testsuites>';

};
        
        window.suiteReportComplete = function(){
            testsWaiting--;
            if(testsWaiting === 0){
                collect();
            }
        };
    
        $('iframe[rel]').each(function(){
            $(this).attr('src',$(this).attr('rel')+'?cb='+new Date().getTime());
        });
    });
</script>

</head>
<body>
    <?php
        foreach($testFiles as $testFile=>$conf){
            echo '<iframe rel="'.$testFile.'" src="about:blank"></iframe>';
        }
    ?>
</body>
</html>

creativeEditor.classes.js

The various class definitions used for the Creative Editor library

$(function(){
   "use strict";
   $.blueprint.canvasObjs={};
    
   $.blueprint.canvasObjs.objGeo = function(){
        this.w = 0;
        this.ow = 0;
        this.oh = 0;
        this.h = 0;
        this.x = 0;
        this.offsetx = 0;
        this.y = 0;
        this.offsety = 0;
        this.ar = 0;
        this.a = 0;
        this.bounds = [];
        this.rotatedBounds = [];
        
        this.importFrom = function(ob){
            ob = $.extend({
                w:0,
                ow:0,
                oh:0,
                h:0,
                x:0,
                offsetx:0,
                y:0,
                offsety:0,
                ar:0,
                a:0,
                bounds:[],
                rotatedBounds:[]
            },ob);
            this.offsetx = ob.offsetx;
            this.offsety = ob.offsety;
            this.w = ob.w;
            this.ow = ob.ow;
            this.oh = ob.oh;
            this.h = ob.h;
            this.x = ob.x;            
            this.y = ob.y;            
            this.ar = ob.ar;
            this.a = ob.a;
            this.bounds = ob.bounds;
            this.rotatedBounds = ob.rotatedBounds;
            this.calcAr();
            this.calculateBounds();
            return this;
        };
        
        this.packageUp = function(){
            return {
                w:this.w,
                ow:this.ow,
                oh:this.oh,
                h:this.h,
                x:this.x,
                offsetx:this.offsetx,
                y:this.y,
                offsety:this.offsety,
                ar:this.ar,
                a:this.a,
                bounds:this.bounds,
                rotatedBounds:this.rotatedBounds
            };  
        };
        
        this.getRads = function(){
            return $.blueprint.canvasUtils.degToRad(this.a);
        };
        
        this.update = function(oc){       
            var nc = this.getCentroid(),
            ang = this.getRads(),
            dcx = nc[0] - oc[0],
            dcy = nc[1] - oc[1],
            modx = (Math.cos(ang) - 1) * dcx - Math.sin(ang) * dcy,
            mody = Math.sin(ang) * dcx + (Math.cos(ang) - 1) * dcy;
           
            this.offsetx += modx;
            this.offsety += mody;
            this.calculateBounds();
        };
        
        this.getCentroid = function(){
            var x = 0, y = 0, c;
           
            for(c=0;c<this.bounds.length;c++){
                x += this.bounds[c][0];
                y += this.bounds[c][1];
            }
           
            return [(x/this.bounds.length),(y/this.bounds.length)];
        };
       
        this.getRotatedCentroid = function(){
            var x = 0, y = 0, c;
           
            for(c=0;c<this.rotatedBounds.length;c++){
                x += this.rotatedBounds[c][0];
                y += this.rotatedBounds[c][1];
            }
           
            return [(x/this.rotatedBounds.length),(y/this.rotatedBounds.length)];
        };
        
        this.calculateBounds = function(){
            this.bounds = [
                [this.x+this.offsetx,this.y+this.offsety],
                [this.x+this.w+this.offsetx,this.y+this.offsety],
                [this.x+this.w+this.offsetx,this.y+this.h+this.offsety],
                [this.x+this.offsetx,this.y+this.h+this.offsety]
            ];
            if(this.a === 0 || this.a === 360){
                this.rotatedBounds = this.bounds;
            }else{
                var cn = this.getCentroid(),
                coors = this.bounds,
                rad = this.getRads(),
                c;
                
                this.rotatedBounds = [];
                
                for(c=0;c<coors.length;c++){
                    this.rotatedBounds.push($.blueprint.canvasUtils.rotateCooridinateAroundCenter(coors[c],[cn[0],cn[1]],rad));
                }
            }
            return this;
        };
        
        this.calcAr = function(){
            if(this.w !== 0 && this.h !== 0){
                this.ar = this.w / this.h;
            }
        };
        
        this.setX = function(x){
            this.x = x;
            this.calculateBounds();         
            return this;
        };
        
        this.setOw = function(w){
            this.ow = w;
            return this;
        };
        
        this.setOh = function(h){
            this.oh = h;
            return this;
        };
        
        this.getWScale = function(){
            return this.w / this.ow;
        };
        
        this.getHScale = function(){
            return this.h / this.oh;
        };
        
        this.setY = function(y){
            this.y = y;
            this.calculateBounds();
            return this;
        };
        
        this.setA = function(a){
            this.a = a;
            this.calculateBounds();
            return this;
        };
        
        this.setW = function(w){
            this.w = w;
            this.calcAr();
            this.calculateBounds();
            return this;
        };
        
        this.setH = function(h){
            this.h = h;
            this.calcAr();
            this.calculateBounds();
            return this;
        };
        
        this.clone = function(){
            var ng = $.blueprint.canvasObjs.newGeo();
            
            ng.offsetx = this.offsetx;
            ng.offsety = this.offsety;
            ng.setX(this.x)
            .setY(this.y)
            .setW(this.w)
            .setH(this.h)
            .setA(this.a)
            .setOw(this.ow)
            .setOh(this.oh);
            
            return ng;
        };
    };
    
    $.blueprint.canvasObjs.newGeo = function(){
        return new $.blueprint.canvasObjs.objGeo();
    };
    
    
    $.blueprint.canvasObjs.objText = function(){
        this.size = 10;
        this.lineHeight = 10;
        this.family = 'Arial';
        this.style = 'normal';
        this.color = '#000000';
        this.text = '';
        this.justify = 'left';
        this.measuredWidth = 0;
        this.justifyOffset = 0;
        this.parent = false;
        
        this.setParent = function(p){
            this.parent = p;
            return this;
        };
        
        this.setMeasuredWidth = function(w){
            this.measuredWidth = w;
            return this;
        };
        
        this.setSize = function(s){
            this.size = s;
            this.parent.effectChanges = true;
            return this;
        };
        
        this.setFamily = function(f){
            this.family = f;
            this.parent.effectChanges = true;
            return this;
        };
        
        this.setLineHeight = function(l){
            this.lineHeight = l;
            this.parent.effectChanges = true;
            return this;
        };
        
        this.setStyle = function(s){
            this.style = s;
            this.parent.effectChanges = true;
            return this;
        };
        
        this.setColor = function(c){
            this.color = c;
            this.parent.effectChanges = true;
            return this;
        };
        
        this.setText = function(t){
            this.text = t;
            this.parent.effectChanges = true;
            return this;
        };
        
        this.setJustify = function(j){
            this.justify = j;
            this.parent.effectChanges = true;
            return this;
        };
        
    ...

creativeEditor.utilities.js

Helper methods and object prototypes to assist in some of the more common coordinate math problems and similar shared calculations

$(function(){
   "use strict";
      Array.prototype.move = function (old_index, new_index) {
        while (old_index < 0) {
            old_index += this.length;
        }
        while (new_index < 0) {
            new_index += this.length;
        }
        if (new_index >= this.length) {
            var k = new_index - this.length;
            while ((k--) + 1) {
                this.push(undefined);
            }
        }
        this.splice(new_index, 0, this.splice(old_index, 1)[0]);
        return this;
    };
   
    (function() {
        var lastTime = 0,
        vendors = ['webkit', 'moz'],
        x;
        
        for(x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
            window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
            window.cancelAnimationFrame =
              window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
        }

if (!window.requestAnimationFrame){
            window.requestAnimationFrame = function(callback) {
                var currTime = new Date().getTime(),
                timeToCall = Math.max(0, 16 - (currTime - lastTime)),
                id = window.setTimeout(function() { callback(currTime + timeToCall); },
                  timeToCall);
                lastTime = currTime + timeToCall;
                return id;
            };
        }

if (!window.cancelAnimationFrame){
            window.cancelAnimationFrame = function(id) {
                clearTimeout(id);
            };
        }
    }());
    
    $.blueprint.canvasUtils = {
        rotateCooridinateAroundCenter:function(orig,center,angle){
            return [
                center[0] + Math.cos(angle) * (orig[0] - center[0]) - Math.sin(angle) * (orig[1]-center[1]),
                center[1] + Math.sin(angle) * (orig[0] - center[0]) + Math.cos(angle) * (orig[1]-center[1])
            ];
        },
        degToRad:function(deg){
            return deg*Math.PI/180;
        },
        degToCursor:function(deg){
            var answer;
            
            if(deg < 0){
                deg = 360 + deg;
            }else if(deg > 360){
                deg = deg - 360;
            }

if(deg <= 67.5 && deg >= 22.5){
                answer = 'ne-resize';
            }else if(deg <= 112.5 && deg >= 67.6){
                answer = 'e-resize';
            }else if(deg <= 157.5 && deg >= 112.6){
                answer = 'se-resize';
            }else if(deg <= 202.5 && deg >= 157.6){
                answer = 's-resize';
            }else if(deg <= 247.5 && deg >= 202.6){
                answer = 'sw-resize';
            }else if(deg <= 292.5 && deg >= 247.6){
                answer = 'w-resize';
            }else if(deg <= 337.5 && deg >= 292.6){
                answer = 'nw-resize';
            }else{
                answer = 'n-resize';
            }
            
            return answer;
        },
        defaultImageLoader:function(ob,root,callback){
            var osrc = ob.src, src, img,
            blank = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
            
            if(ob.src.search(/^http(s)*:\/\//gi) !== -1){                
                src = 'proxy.php?f='+Base64.encode(ob.src);                
            }else{
                src = ob.src;
            }
            
            img = $('<img/>').bind('load',function(){
                var can = $.blueprint.canvasUtils.summon().attr({'width':ob.geo.w+'px','height':ob.geo.h+'px'}),
                that = $(this);
                
                setTimeout(function(){
                    can.get(0).getContext('2d').drawImage(img.get(0),0,0,ob.geo.w,ob.geo.h);
                    can.data('src',(osrc.indexOf('data:image') === 0 ? osrc : can.get(0).toDataURL()));                
                    callback.apply(that,[root,can]);
                    that.remove(); 
                },5);                
            });
            img.attr({'src':src,'width':ob.geo.w+'px','height':ob.geo.h+'px'}).hide().appendTo('body');
            if(img.get(0).complete || img.get(0).complete === undefined){
                var src = img.attr('src');
                img.attr('src',blank);
                img.attr('src',src);
            }
            img.get(0).loaded = 1;
        },
        rectangleFootprintWithRotatedSelf:function(rect,angle){
            var rect2 = [], i,
            center = [rect[1][0]/2,rect[2][1]/2];

for(i=0;i<rect.length;i++){
                rect2.push($.blueprint.canvasUtils.rotateCooridinateAroundCenter(rect[i],center,$.blueprint.canvasUtils.degToRad(angle)));
            }
            
            return $.blueprint.canvasUtils.twoRectangleFootprintCooridinates(rect,rect2);
        },
        twoRectangleFootprintCooridinates:function(rect1,rect2){
            var mnx = rect1[0][0], mxx =rect1[1][0], mny = rect1[0][1], mxy = rect1[2][1], i,
            pointCheck = function(p){
                if(p[0] <= mnx){
                    mnx = p[0];
                }
                if(p[0] >= mxx){
                    mxx = p[0];
                }
                if(p[1] <= mny){
                    mny = p[1];
                }
                if(p[1] >= mxy){
                    mxy = p[1];
                }
            };

for(i=0;i<rect1.length;i++){
                pointCheck(rect1[i]);
            }
            for(i=0;i<rect2.length;i++){
                pointCheck(rect2[i]);
            }
            
            return [[mnx,mny],[mxx,mny],[mxx,mxy],[mnx,mxy]];
        },
        scaleCooridinates:function(xs,ys,coors){
            return coors.map(function(p){
                return [p[0]*xs,p[1]*ys];
            });
        },
        arrayChunk : function(a,l){
           var chunks = [],
            i = 0,
            n = a.length,
            sub = a.subarray !== undefined;
        
            while (i < n) {
              chunks.push(sub ? a.subarray(i, i += l) : a.slice(i, i += l));
            }
            
            return chunks;
        },
        isArray : function(v){
            return Object.prototype.toString.call(v) === '[object Array]';
        },
        summon : function(){
            return $('<canvas class="ccc"></canvas>').hide();
        },
        distanceBetweenPoints : function(p1,p2){
            return Math.sqrt(Math.pow((p1[0]-p2[0]),2)+Math.pow((p1[1]-p2[1]),2));
        },
        between : function(v,n,x){
            if(v > x){
                return x;
            }
            if(v < n){
                return n;
            }
            return v;
        },
        getCoordinateMinX : function(cos){
            var a = [], i;
            
            for(i=0;i<cos.length;i++){
                a.push(cos[i][0]);
            }
            
            return Math.min.apply(Math,a);
        },        
        getCoordinateMaxX : function(cos){
            var a = [], i;
            
            for(i=0;i<cos.length;i++){
                a.push(cos[i][0]);
            }
            
            return Math.max.apply(Math,a);
        },        
        getCoordinateMinY : function(cos){
            var a = [], i;
            
            for(i=0;i<cos.length;i++){
                a.push(cos[i][1]);
            }
            
            return Math.min.apply(Math,a);
        },        
        getCoordinateMaxY : function(cos){
            var a = [], i;...

creativeEditor.core.js

The core of the Creative Editor system for managing user tool states, object manipulation based off user interaction, as well as direct pixel RGB modifications / effects.

$(function(){
   "use strict";
   
   if (!Object.create) {
      Object.create = (function(){
        function F(){}
        
        return function(o){
          if (arguments.length !== 1) {
              throw new Error('Object.create implementation only accepts one parameter.');
          }
          F.prototype = o;
          return new F();
        };
      }());
   }
   
   if (!Array.prototype.map) {
      Array.prototype.map = function(callback, thisArg) {
    
        var T, A, k, O, len,kValue, mappedValue;
    
        if (this === null) {
          throw new TypeError(" this is null or not defined");
        }
        
        O = Object.create(this);
        len = O.length >>> 0;
        
        if (typeof callback !== "function") {
          throw new TypeError(callback + " is not a function");
        }
        if (arguments.length > 1) {
          T = thisArg;
        }
        A = new Array(len);
        k = 0;
        while(k < len) {
          if (O[k] !== undefined) {
            kValue = O[ k ];
            mappedValue = callback.call(T, kValue, k, O);
    
            A[ k ] = mappedValue;
          }
          k++;
        }
        return A;
      };      
    }

Array.prototype.pushChain = function(arr){
        this.push(arr);
        return this;
    };

$.blueprint.canvasObjs.creativeEditor = function(){
        var _root = this;
        _root.container = $('');
        _root.renderState = false;
        _root.toolState = 'select';
        _root.previousToolState = 'select';
        _root.activeLayer = false;
        _root.workingPoint = false;
        _root.mouseSpot = {x:0,y:0};        
        _root.layerStack = [];
        _root.temp = {};
        _root.selection = false;
        _root.doRebase = false;
        _root.doSave = false;
        _root.history = new $.blueprint.canvasObjs.historyObj(25);
        _root.infoBar = $('<div class="canvasInfoBar"></div>');
        _root.topRuler = $('<div class="canvasTopRuler"></div>');
        _root.leftRuler = $('<div class="canvasLeftRuler"></div>');
        _root.allLoaded = function(){};
        _root.name = "Unsaved Document";
        _root.version = 1;
        _root.latestVersion = 1;
        _root.uiStorage = {};
        _root.fontList = [];
        _root.lastMouse = false;
        _root.isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
        _root.isFirefox = typeof InstallTrigger !== 'undefined';
        _root.isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
        _root.isChrome = !!window.chrome && !_root.isOpera;
        _root.isIE = /*@cc_on!@*/false || !!document.documentMode;
        
        _root.supported = function(){
            var elem = document.createElement('canvas');
            return !!(elem.getContext && elem.getContext('2d'));
        };
        
        _root.canvasEl = {
            ob:$('<canvas class="ccc"></canvas>').css({
                'display':'block',
                'margin':'0px auto'
            }),
            geo : $.blueprint.canvasObjs.newGeo(),
            ctx : false
        };
        
        _root.hotspots = {
            layer:false,
            n:false,
            nw:false,
            w:false,
            sw:false,
            s:false,
            se:false,
            e:false,
            ne:false,
            r:false
        };
        
        _root.prepareForExport = function(){
            _root.previousToolState = _root.toolState;
            _root.toolState = 'none';
            _root.renderStack(true);
        };
        
        _root.recoverFromExport = function(){
            _root.toolState = _root.previousToolState;
            _root.renderStack(true);
        };
        
        _root.getLayers = function(){
            return _root.layerStack;  
        };
        
        _root.goBack = function(){
            var st = _root.history.previous();
            if(st){
                _root.allLoaded = function(){
                    _root.renderStack(true);
                    $('#imageLoading').remove();
                    _root.container.trigger('onLayerModify');
                    _root.container.trigger('onLayerDeselect');
                    _root.allLoaded = function(){};
                };
                _root.loadDataStructure(st);
            }
        };
        
        _root.goForward = function(){
            var st = _root.history.next();
            if(st){
                _root.allLoaded = function(){
                    _root.renderStack(true);
                    $('#imageLoading').remove();
                    _root.container.trigger('onLayerModify');
                    _root.container.trigger('onLayerDeselect');
                    _root.allLoaded = function(){};
                };
                _root.loadDataStructure(st);
            }
        };
        
        _root.rebaseLayer = function(l){
            var xs = l.geo.getWScale(), ys = l.geo.getHScale(), nc;
            if(l && (l.geo.ow !== l.geo.w || l.geo.oh !== l.geo.h)){
                l.geo.ow = l.geo.w;
                l.geo.oh = l.geo.h;
                
                nc = $.blueprint.canvasUtils.summon()
                .attr({
                    width:(l.geo.w)+'px',
                    height:(l.geo.h)+'px'
                });
                
                if(l.type === 'shape'){
                    l.src.points = $.blueprint.canvasUtils.scaleCooridinates(xs,ys,l.src.points);
                    _root.shapeIntoCanvas(l,nc);
                }else{
                    nc.get(0).getContext('2d').drawImage(l.ghost.get(0),0,0,l.geo.w,l.geo.h);
                }
                nc.data('src',l.ghost.data('src'));
                l.setGhost(nc);
                nc.data('src',_root.toDataURL(nc));
                _root.container.trigger('onLayerModify');
                l.effectChanges = true;
            }
        };
        
        _root.deleteCurrentLayer = function(){
            _root.layerStack.splice(_root.layerStack.indexOf(_root.activeLayer),1);
            _root.pushSave();
            _root.container.trigger('onLayerModify');
            _root.container.trigger('onLayerDeselect');
            _root.activeLayer = false;
            _root.renderState = true;
        };
        
        _root.initialize = function(w,h){
            window.globalCanvasObj = _root;
            _root.container.append(_root.infoBar).append('<div class="canvasFillBar"></div>').append(_root.topRuler).append(_root.leftRuler).append(_root.canvasEl.ob);
            
            _root.applyCanvasSize((w === undefined ? 960 : w),(h === undefined ? 400 : h));
            
            _root.canvasEl.ctx = _root.canvasEl.ob.get(0).getContext('2d');
            _root.setCanvasBindings();
            
            _root.renderStack();
        };
        
        _root.applyCanvasSize = function(w,h){
            var lr,tr,
            trs = '',
            lrs = '';
            
            _root.canvasEl.geo.setW(w).setH(h).setX(_root.canvasEl.ob.offset().left).setY(_root.canvasEl.ob.offset().top);
            
            _root.canvasEl.ob.attr({
                'width':w+'px',
                'height':h+'px',
                'tabindex':'1'
            });

_root.infoBar.css({'width':Math.max((w-10),490)+'px'});
            _root.topRuler.css('width',w+'px');
            _root.leftRuler.css({'height':h+'px','margin-left':-(w/2)-16+'px'});
            
           ...