templates = {
    box: {
        post:              $('<div class="box empty box-post"><div class="box-inner">      <div class="activity-box activity-post"></div>        <div class="stage-box-tag tag-post">' + trans.postText + '</div></div></div>'),
        featured:     $('<div class="box empty box-featured"><div class="box-inner">  <div class="activity-box activity-featured"></div>    <div class="stage-box-tag tag-featured">' + trans.featuredText + '</div></div></div>'),
        event:        $('<div class="box empty box-event"><div class="box-inner">     <div class="activity-box activity-event"></div>       <div class="stage-box-tag tag-event">' + trans.eventText + '</div></div></div>'),
        solution:     $('<div class="box empty box-solution"><div class="box-inner">  <div class="activity-box activity-solution"></div>    <div class="stage-box-tag tag-solution">' + trans.solutionText + '</div></div></div>'),
        popular:      $('<div class="box empty box-popular"><div class="box-inner">   <div class="activity-box activity-popular"></div>     <div class="stage-box-tag tag-popular">' + trans.popularText + '</div></div></div>'),
        member:            $('<div class="box empty box-member"><div class="box-inner">    <div class="stage-box-tag tag-member">' + trans.memberText + '</div>        </div></div>'),
        thought_starter:   $('<div class="box empty" id="thought_starter"><div class="box-inner"><div id="thought-starter-banner"><div class="activity-box">&nbsp;</div></div></div></div>')
    },
    
    buildMap: function() {
        // this maps the template attr. in the col templates above to box templates
        this.map = [this.box.thought_starter, this.box.post, this.box.member, this.box.event, this.box.solution, this.box.featured, this.box.popular]
    },
    
    cols: new Array(
            $('<div class="boxCol" id="col_thought_starter" template="0"></div>'),                                        
            $('<div class="boxCol" template="412"></div>'),
            $('<div class="boxCol" template="116"></div>'),
            $('<div class="boxCol" template="3111"></div>'),
            $('<div class="boxCol" template="5111"></div>'),
            $('<div class="boxCol" template="611"></div>'),
            $('<div class="boxCol" template="211"></div>'),
            $('<div class="boxCol" template="1111"></div>'), 
            $('<div class="boxCol" template="1111"></div>'),
            $('<div class="boxCol" template="211"></div>'),
            $('<div class="boxCol" template="611"></div>'),
            $('<div class="boxCol" template="1111"></div>'),
            $('<div class="boxCol" template="1111"></div>'),
            $('<div class="boxCol" template="116"></div>'),
            $('<div class="boxCol" template="112"></div>')
        )
}

templates.buildMap()

// add reverse functionality to a jQuery selection
$.fn.reverse = [].reverse;

$(function() {
    
	var body = $('body')
    var stage = $('#stage')    
    // var content = $('#content')
    var primaryCol = $('#primaryCol')
    var col
    
    var s3_url = 'http://s3.amazonaws.com/ib1'
    
    var mouseX
    var stageX
    var mouseOffset
    var newPos
    var curBox
    var boxCol
    var div
    
    var no_content = false
    
    function populateBox(div, article) {
        for (var x in article) {
            div.children('.box-inner').append('<div class="headline">' + article[x].title + '</div><div class="byline">' + trans.postbyText + '<em>' + article[x].author.name + '</em></div>')
			if (article[x].meta.activity_total == ''){
				div.children('.box-inner').children('.activity-box:first').remove()
			}else{
				div.children('.box-inner').children('.activity-box:first').html(article[x].meta.activity_total)
			}
            div.removeClass('empty')
        }
        return div
    }
    
    function buildOverlay(div, article) {
        if(article.meta.post_type != 'members_only' || article.meta.authenticated === 'true') {
            if (article.comments[0]) {
                var comment = article.comments[0]
                var c = comment.comment

                var moreLink = (parseInt(comment.total_comments) > 1 ? '<div class="overlay-morelink"><a href="' + article.permalink + '#comments-list">' + trans.viewAllText + ' ' + comment.total_comments + ' ' + trans.commentsText + '</a></div>' : '')    

                c = '<div class="overlay-comment-body">' + comment.comment + '</div><div class="overlay-comment-byline"><img class="overlay-author-thumb" src="' + comment.author.thumbnail + '"/> ' + trans.commentText + ' ' + trans.byText + ' ' + comment.author.name  + '<br/>' + trans.postedText + ' ' + comment.date_published + '<br/>' + moreLink + '</div>'
            } else {
                c = "<div class='overlay-comment-body'><a href='" + article.permalink + "#articleComments'>" + trans.noCommentText + "</a></div>"
            }            
        } else {
            var c = "<div class='overlay-comment-body'>" + trans.membersOnlyText + "<a href='/login?next=/'> " + trans.signInText + '<a/> ' + trans.orText + ' <a href="/register?next=/">' + trans.createAccountText + "</a></div>"
        }
        
        div.append('<div class="overlay-content"><div class="overlay-top"><div class="overlay-meta"><span>' + article.meta.activity_comments + '</span> ' + trans.commentsText + ' | <span>' + article.meta.activity_favs + '</span> ' + trans.favsText + ' | <span>' + article.meta.activity_shares + '</span> ' + trans.sharesText + '</div></div><div class="overlay-left"><a title="'+article.title+'" class="article-title" href="' + article.permalink + '">' + article.title + '</a><div class="article-byline"><img class="overlay-author-thumb" src="' + article.author.mugshot + '"/> ' + trans.postbyText + ' <a title="' + article.author.name + '" href="' + article.author.permalink + '">' + article.author.name + '</a><br/>' + trans.postedText + ' ' + article.date_published + '</div><div class="overlay-article-tease">' + article.meta.tease + '<br/><a href="' + article.permalink + '">' + trans.readMoreText + '</a></div></div><div class="overlay-right">' + c + '</div></div>')
        div.children('.overlay-content').children('.overlay-top').append(div.children('.box-inner').children('.stage-box-tag').clone())
        
        return div
    }
    
    function buildMemberOverlay(div, member) {
		if (user_is_authed){
			///relationships/follow/ebrill/
			var follow_html = '<a class="stage_follow" href="/relationships/follow/'+member.meta.username+'/"><img src="/media/css/images/overlay-follow-icon.png"/> ' + trans.followText + '</a>'
		}else{
			var follow_html = '<a href="/register?next='+redirect_url+'"><img src="/media/css/images/overlay-follow-icon.png"/> ' + trans.followText + '</a>'
		}
        div.append('<div class="overlay-content"><div class="overlay-top"></div><div class="overlay-member-thumb-container"><img class="overlay-member-thumb" src="' + member.mugshot + '"/></div><div class="overlay-member"><div class="overlay-member-name"><a href="' + member.permalink + '">' + member.name + '</a></div><div class="overlay-member-bio">' + member.bio + '</div><div class="overlay-member-nav">'+follow_html+' | <a href="' + member.permalink + '">' + member.meta.follower_count + ' ' + trans.followersText + '</a></div></div></div>')
        div.children('.overlay-content').children('.overlay-top').append(div.children('.box-inner').children('.stage-box-tag').clone())
        return div
    }
    
    function populateStage() {
        // we need (a minimum) of 1 article to show on the stage.
        if(content.ts.objects == null && content.posts.objects == null && content.events.objects == null && content.solutions.objects == null && content.featured.objects == null && content.people.objects == null && content.popular.objects == null) {
            no_content = true
            return;
        } else {
            stage.html('')
        }

        // populate stage w/empty columns!
        var tmpl
        for(var x in templates.cols) {            
            tmpl = (templates.cols[x].attr('template')).split('')
            div = templates.cols[x].clone()
            for(var y in tmpl)
                div.append(templates.map[tmpl[y]].clone())
                    
            div.attr('order', x)
    
            stage.prepend(div)
        }

        if(content.events.objects != null) {
            div = populateBox($('.box-event'), content.events.objects)
            for (var i in content.events.objects) div = buildOverlay(div, content.events.objects[i])
        } else { 
            $('.box-event').removeClass('box-event').addClass('box-post')
            $('.activity-event').removeClass('activity-event').addClass('activity-post')
            $('.tag-event').removeClass('tag-event').addClass('tag-post').text(trans.postText)
        }
    
        if(content.solutions.objects != null) {
            div = populateBox($('.box-solution'), content.solutions.objects)
            for (var i in content.solutions.objects) div = buildOverlay(div, content.solutions.objects[i])
        } else { 
            $('.box-solution').removeClass('box-solution').addClass('box-post')
            $('.tag-solution').removeClass('tag-solution').addClass('tag-post').text(trans.postText)
            $('.activity-solution').removeClass('activity-solution').addClass('activity-post')
        }
    
        if(content.featured.objects != null) {
            div = populateBox($('.box-featured'), content.featured.objects)
            for (var i in content.featured.objects) div = buildOverlay(div, content.featured.objects[i])
        } else { 
            $('.box-featured').removeClass('box-featured').addClass('box-post') 
            $('.tag-featured').removeClass('tag-featured').addClass('tag-post').text(trans.postText)
            $('.activity-featured').removeClass('activity-featured').addClass('activity-post')
        }
        
        var post_boxes = $('.box-post').reverse()
        var member_boxes = $('.box-member').reverse()
        var popular_boxes = $('.box-popular').reverse()
    
        // ZOMG THOUGHT STARTER!
        if(content.ts.objects != null) {
            div = $('#thought_starter')
            div.removeClass('empty')
            
            var thought_starter = content.ts.objects
            
            for (var x in thought_starter) {
                $('#thought-starter-banner').append('<div class="headline">' + thought_starter[x].title + "</div><div class='byline'>" + trans.postbyText + " <em>" + thought_starter[x].author.name + "</em></div>")
                $('#thought-starter-banner').addClass('box-thought_starter')
				if (thought_starter[x].meta.activity_total == ''){
					$('#thought_starter .activity-box').remove()
				}else{
					$('#thought_starter .activity-box').text(thought_starter[x].meta.activity_total)
				}
                if(thought_starter[x].meta.activity_total >= 3) {
                    $('#thought-starter-banner').addClass('box-thought_starter-activity')
                    $('#thought_starter .activity-box').addClass('activity-popular')
                } else {
                    $('#thought_starter .activity-box').addClass('activity-post')
                    $('#thought-starter-banner').addClass('box-thought_starter-no_activity')
                }
                
                if(thought_starter[x].image == 'false') {
                   thought_starter[x].image = 'http://www.ryerson.ca/tedrogersschool/news/General_Public/images/Business_Building002.jpg'
                } else {
                   thought_starter[x].image = 'http://s3.amazonaws.com/ib1/' + thought_starter[x].image
                }

                div.children('.box-inner').append('<img src="' + thought_starter[x].image + '"/>')
                div = buildOverlay(div, thought_starter[x])
            }            
        }
        
        // MEMBERS BOXES
        if(content.people.objects != null) {
            var profile_box_counter = 0
            for(var x in content.people.objects) {
                var profile
                try {
                    div = $(member_boxes[profile_box_counter])
                    div.removeClass('empty')
                    
                    profile = content.people.objects[x]
                                        
                    div.prepend('<img class="member-thumb" src="' + profile.mugshot + '"/>')
                    div.children('.box-inner').append('<div class="member-name">' + profile.name + '</div><div class="member-meta">' + profile.meta.post_count + ' posts | ' + profile.meta.comment_count + ' ' + trans.commentsText + '</div><div class="member-since">' + trans.memberSinceText + ' ' + profile.meta.member_since + '</div>')
                    if(profile.logo) {
                        div.children('.box-inner').prepend('<img class="member-logo" title="http://ib1.s3.amazonaws.com/logo%2Fibm1.jpeg" src="' + profile.logo + '" />')
                    }
                    div = buildMemberOverlay(div, profile)
                } catch(err) {
                    continue
                }
                profile_box_counter++
            }
        }

        // NORMAL POSTS
        var article_count = 0
        if(content.posts.objects != null) {
            var article
            for(var x in content.posts.objects) {
                article = content.posts.objects[x]
                
                div = $(post_boxes[article_count])
                article_count++
				
                div.children('.box-inner').append('<div class="headline">' + article.title + '</div><div class="byline">' + trans.postbyText + ' <em>' + article.author.name + '</em></div>')
				if(article.meta.activity_total == ''){
					div.children('.box-inner').children('.activity-box:first').remove()
				}else{
					div.children('.box-inner').children('.activity-box:first').html(article.meta.activity_total)
				}
				if (article.meta.real_post_type == '3'){
					div.children('.box-inner').children('.stage-box-tag').empty().html(trans.videoText);
				}
				div = buildOverlay(div, article)
                div.removeClass('empty')
            }
        }
        
        // POPULAR STUFF
        article_count = 0
        if(content.popular.objects != null) {
            for(var x in content.popular.objects) {
                article = content.popular.objects[x]
                
                div = $(popular_boxes[article_count])
                article_count++

                div.children('.box-inner').append('<div class="headline">' + article.title + '</div><div class="byline">' + trans.postbyText + ' <em>' + article.author.name + '</em></div>')
				if(article.meta.activity_total == ''){
					div.children('.box-inner').children('.activity-box:first').remove()
				}else{
					div.children('.box-inner').children('.activity-box:first').html(article.meta.activity_total)
				}
                div = buildOverlay(div, article)
                
                div.removeClass('empty')
            }
        }
        
        // remove columns with empty boxes
        $('.empty').remove()
        $('img[src=""]').remove()

        // Prep the stage for a sassy entrance
        // $('.box').children().css('opacity', '.1')
     
        // Place all of our little dearies on the stage. THEY'RE PRECIOUS.
        var insertToggle = false
        var ts = $('#thought_starter').parent()
        
        $('.boxCol').each(function() {    
            if($(this).children('#thought_starter').length > 0) {
                return
            }
            
            if($(this).html() == '') {
                $(this).remove()
                return
            }
            
            if(insertToggle) {
                $(this).insertBefore(ts)
                insertToggle = false
            } else {
                $(this).insertAfter(ts)
                insertToggle = true
            }
            
        })
    }    
    
    // bring the sass
    function contentFadeIn() {
        $('.box').children().each(function() {
            $(this).fadeTo(Math.floor(Math.random()*1000), 1)
        })
        
        $('.profile-thumb').each(function() {
            $(this).fadeTo(Math.floor(Math.random()*2000), 1)
        })
    }
    
    // setTimeout(contentFadeIn, 0)
        
    stage.queue(populateStage()) 
    	
    if($('#thought_starter').length == 1) {
        var ts_left = $('#thought_starter').offset().left
        var ts_width = $('#thought_starter').width()
    } else {
        var ts_left = 0
        var ts_width = 0
    }
    
    function stageLocationCheck() {
        if (!monitor.dragging && monitor.target.offset().left == 0 && no_content == false) {
            var ts_x = monitor.ts.offset().left
            var x_1 = (monitor.body.width()/2 - monitor.ts.width()/2)
            var targetPos = (ts_x - x_1) * -1
            
            monitor.target.css('left', targetPos)
            monitor.targetX = targetPos
        }
    }
    
    monitor = {
        body: $('body'),
        target: $('#stage'),
        ts: $('#thought_starter'),
        mouseDownX: 0,
        mouseXChange: 0,
        lastMouseX: 0,
        mouseX: 0,
        mouseProp: .15, // dampen mouse's affect by 85%
        targetX: 0,
        offset: 0,
        rate: 0,
        maxLeft: false,
        maxRight: false,
        avg_mouse_rate: 0,
        rate_factor: 0,
        damp: .96, // this means that for every tick, the rate is reduced to 0.96 of its former glory (reduced by .01 on 8/9/10 - PK)
        dragging: false,
        ratePoll: new Array(0),
        override: false,
        overrideArrows: false,
        failed: false,
            
        init: function() {
            var ts_x = 0
            var x_1 = 0
            var targetPos = 0
            
            var stageW = 0;
            var failed = false;
            $(".boxCol").each(function () {
                if($(this).width() > 342) {
                    if($(this).attr("id") == "col_thought_starter") { 
                        stageW += 342;
                        failed = true
                    } else { 
                        stageW += 326;
                    }
                } else { 
                    stageW += $(this).width(); 
                }
            })
            
            this.target.width(stageW)
            
            if(this.ts.offset() != null) {
                ts_x = this.ts.offset().left
                if(failed) x_1 = (((this.body.width() + (this.ts.offset().left*2))/2) - this.ts.width()/2)
                else x_1 = (this.body.width()/2 - this.ts.width()/2)

                targetPos = (ts_x - x_1) * -1                
            } else {
                // no thought_starter!
                var targetWidth = 0
                var boxArr = $('.boxCol').toArray()
                for(i in boxArr) {                    
                    if($(boxArr[i]).width() > 326) {
                        targetWidth += 326
                        failed = true
                    } else {
                        targetWidth += $(boxArr[i]).width()
                    }
                }
                
                this.target.css('width', targetWidth)
                
                targetPos = this.body.width()/2 - this.target.width()/2
            }
        
            this.target.css('left', targetPos)
            this.targetX = targetPos
            
            setTimeout(stageLocationCheck, 500)
        }, 
        
        tick: function() {
            
            if(this.override == true || this.overrideArrows == true) {
                return false
            }
                        
            if(Math.abs(this.rate) > .1) {
                this.rate = this.rate * this.damp
            } else {
                this.rate = 0
            }
        
            this.mouseXChange = this.mouseX - this.mouseDownX 
                    
            // if I'm dragging, then increase or decrease the rate based on the mouse movement/mousemove
            if(this.dragging) {             
            
                // find avg mouse movement rate
                this.avg_mouse_rate = 0
                this.rate_factor = 0

                this.ratePoll.push(this.mouseXChange)
            
                if(this.ratePoll.length > 2) { this.ratePoll.shift() } //lets not go nuts
            
                for (x in this.ratePoll) {
                    this.avg_mouse_rate = this.avg_mouse_rate + parseInt(this.ratePoll[x])
                }
            
                this.avg_mouse_rate = Math.round(this.avg_mouse_rate / this.ratePoll.length, 2)
            
                // find the factor to the current rate
                if(this.rate == 0) {
                    this.rate = 1
                    this.rate_factor = 1
                } else {
                    this.rate_factor = (this.avg_mouse_rate * this.damp) / this.rate
                }
                                
                // adjust current rate
                this.rate = this.rate * this.rate_factor
                
                monitor.overlay.fadeOut('fast')
            
            } else { // if I'm not dragging, decrease the rate based on the rate * dampening
                this.rate = parseInt(this.rate * this.damp)
            }
        
            /** if someone tries to drag off-screen, then we should stop them... **/
        
            // establish if they're dragging the stage past it's left boundary
            if(this.targetX > 0 ) {
                this.maxLeft = true
            } else {
                this.maxLeft = false
            }
        
            // establish if they're dragging the stage past it's right boundary
            if((-1 * this.targetX) > (this.target.width() - $(window).width())) {
                this.maxRight = true
            } else {
                this.maxRight = false
            }
                
            // if we're blowing past the left boundary, then kill our rate & set the newPos to our left boundary
            if(this.maxLeft) {
                if(this.mouseXChange > 0) {
                    this.newPos = 0
                    this.rate = 0
                } else {
                    this.newPos = this.targetX + (this.mouseProp * this.rate)
                }
            // if we're blowing past the RIGHT boundary, then do this:
            } else if(this.maxRight) { // if we're pushing past the right boundary, then set the pos to the right boundary, kill the rate
                if(this.mouseXChange < 0) {
                    this.newPos = this.body.width() - this.target.width()
                    this.rate = 0
                } else {
                    this.newPos = this.targetX + (this.mouseProp * this.rate)
                }
            } else { // if we're not exceeding boundaries, then normal friction applies
                this.newPos = this.targetX + (this.mouseProp * this.rate)
            }
            
            this.newPos = this.targetX + (this.mouseProp * this.rate)
                    
            // set the new location
            this.target.css('left', this.newPos)
            this.targetX = this.newPos
        },
    
        update: function(e) {
            this.lastMouseX = this.mouseX
            this.mouseX = e.pageX
            this.targetX = this.target.offset().left
            this.offset = this.mouseX - this.targetX
        }
    }
    
    $('#section').mousedown(function() {
        monitor.mouseDownX = monitor.mouseX
        monitor.dragging = true
        monitor.overrideArrows = false
    })
    
    $('#stage').mousedown(function() {
        monitor.mouseDownX = monitor.mouseX
        monitor.dragging = true
        monitor.overrideArrows = false
    })
    
    $(document).mouseup(function() {
        monitor.dragging = false
        monitor.ratePoll = new Array(0)
    })
    
    $(document).mousemove(function(e) {
        monitor.update(e)
    })
    
    $('.box-inner').mouseover(function() {
        $(this).stop().animate({opacity:.7, duration: 5})
    }).mouseout(function() {
        $(this).stop().animate({opacity: 1, duration: 5})
    })
    
    /** overlay functionality **/
    $('.box').click(function() {
        monitor.overlay.fadeOut('fast')
        
        if(monitor.target.width() > monitor.body.width()) {
            positionStage($(this))
        }
        
        showOverlay($(this))
    })
	
	$('.stage_follow').live('click', function() {
		$.ajax({    type: 'POST',
					dataType: 'json',
					cache: false,
					url: $(this).attr('href'),
					async: false,
					data: null,
					success: function(data) {
						monitor.overlay.fadeOut('fast')
					},
					error: function(data) {
					}
		});
        return false
	});
    
    function showOverlay(box) {
        monitor.overlay.css('top', monitor.body.height()/2 - monitor.target.offset().top + 60)
        monitor.overlay.css('left', monitor.body.width()/2 - monitor.overlay.width()/2)
        
        monitor.overlay.html(box.children('.overlay-content').html())
        
        monitor.overlay.prepend('<a class="overlay-close" href="#">x</a>')
        
        $('.overlay-close').click(function () {
            monitor.overlay.fadeOut('fast')
            return false
        })
        
        monitor.overlay.fadeIn('fast')
    }
    
    function positionStage(box) {
        if(monitor.override == true)
            return false
            
        targetBoxPos = (monitor.body.width() / 2) - (box.width() / 2)
        boxOffset = targetBoxPos - box.offset().left
        
        stageX = monitor.target.offset().left + boxOffset
        
        monitor.override = true
        monitor.overrideArrows = false
        
        monitor.target.animate({ 
            easing: 'jswing',
            left: stageX
        })
        
        monitor.targetX = stageX
        
        setTimeout('monitor.override = false', 500)
    }
    
    function scrollStage(direction) {
        if(monitor.override == true)
            return false
        
        var movement = monitor.body.width()/3
        var stageX = 0
        
        if (direction == 'left') {
            stageX = monitor.target.offset().left - movement
            // if (stageX < -(monitor.target.width()*2/3)) {
            //     stageX = -(monitor.target.width()*2/3) - 200
            // }
            if((-1 * stageX) > (monitor.target.width() - $(window).width())) {
                stageX = monitor.body.width() - monitor.target.width() - 100
            }
        } else {
            stageX = monitor.target.offset().left + movement
            
            if (stageX > 100) {
                stageX = 100
            }
        }
        
        monitor.override = true
        monitor.overrideArrows = true;
        monitor.target.animate({ 
            easing: 'easeOutCubic',
            duration: 400,
            left: stageX
        })
        
        monitor.targetX = stageX
        
        setTimeout('monitor.override = false;', 650)
    }
    
    $('#nav_arrow_left').click(function() { scrollStage('right') }).mouseover(function() { $(this).stop().animate({opacity: 1})}).mouseout(function() { $(this).stop().animate({opacity: .5})})
    $('#nav_arrow_right').click(function() { scrollStage('left') }).mouseover(function() { $(this).stop().animate({opacity: 1})}).mouseout(function() { $(this).stop().animate({opacity: .5})})
    
    monitor.overlay = $('<div id="overlay">&nbsp;</div')
    monitor.body.append(monitor.overlay)
    
    monitor.overlay.click(function() {
        $(this).hide()
        // stage.css('opacity', '1')
    })

    monitor.init()
    
    setInterval('monitor.tick()', 35)
    
    if(window.XMLHttpRequest && document.all) {
        $('.boxCol').each(function() {
            $(this).css('width', $(this).width() + 5)
        })
    }
    
    // Check for window resizing and reset the offsetRight
    $(window).resize(function() {
        monitor.offsetRight = $(window).width()
    })
    
    document.onselectstart = new Function ('return false')
})