(function() {
    // state received from initial widget.js request
    var global_context = {"global": true};

    // local handle to jquery (loaded on demand)
    var jQuery;

    if (window.jQuery === undefined) {
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type","text/javascript");
        script_tag.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js");
        if (script_tag.readyState) {
          script_tag.onreadystatechange = function () { // For old versions of IE
              if (this.readyState == 'complete' || this.readyState == 'loaded') {
                  on_jquery_loaded();
              }
          };
        } else {
          script_tag.onload = on_jquery_loaded;
        }
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    } else {
        jQuery = window.jQuery;
        load_widget();
    }

    function on_jquery_loaded() {
        jQuery = window.jQuery.noConflict(true);
        load_widget();
    }

    function __mm_call($widget_obj, methodName, args, scriptObjectHandle, onSuccess, onFailure) {
        if ($widget_obj) $widget_obj.find(".loader").slideDown();

        try {
            var url = "http://www.massematics.com/_api/widget/1/" + methodName + "?_csrf_token=wapi";
            jQuery.ajax({
              url:       url,
              data:      args,
              dataType:  "jsonp",
              contentType: "application/json",
              success: function(ret) {
                if ($widget_obj)
                    $widget_obj.find(".loader").slideUp();

                if (ret.Error) {
                    // handle user facing error
                    if ($widget_obj) {
                        var $error_obj = $widget_obj.find(".widget_error");
                        $error_obj.text(ret.Error).slideDown();

                        // auto hide it
                        setTimeout(function() {
                            $error_obj.slideUp();
                        }, 3000);
                    }
                } else {
                    // .result object has the parameter(s) to return
                    onSuccess(ret.result, scriptObjectHandle);
                }
              },
              error: function(e) {
                if ($widget_obj)
                    $widget_obj.find(".loader").slideUp();
                console.log(e);
              }
            });
        }
        catch (x)  {
            if (onFailure) {
                onFailure("Failed to contact server. Error: " + x.message,methodName);
            }
            if ($widget_obj)
                $widget_obj.find(".loader").slideUp();
        }
    }

    // main widget skeleton
    var html_template = [
        "<div class='massematics'>",
            "<div class='poll_title'>!!title",
            "<div class='loader'><img src='http://www.massematics.com/v1/default/images/widget/loader.gif'/></div></div>",
            "<div class='poll_options clearfix'>",
                "<span class='poll_option_mid'>vs</span>",
                "<div class='poll_option_a poll_vote_option' data-vote='A'>!!option_a</div>",
                "<div class='poll_option_b poll_vote_option' data-vote='B'>!!option_b</div>",
            "</div>",
            "<div class='widget_error'></div>",
            "<div class='img_body'>",
                "<div class='js-requires-vote result_screen'></div>",
                "<div class='js-requires-vote result_screen_content'></div>",
                "<img src='!!image' class='poll_pic' />",
            "</div>",
            "<div class='widget_footer'>",
                "<div class='poll_browse'><a href='javascript:void(0);' title='Next'>Next</a></div>",
                "<a href='http://www.massematics.com' target='_blank'><img src='http://www.massematics.com/v5/default/images/logo-horiz.png'></a>",
                "<div class='scroll_container'>",
                    "<span class='scroll prev'><a href='javascript:void(0);'>&lt;&lt; Prev</a></span>",
                    "<span class='scroll next'><a href='javascript:void(0)'>Next &gt;&gt;</a></span>",
                "</div>",
            "</div>",
        "</div>"
    ].join("\n");

    // UI shown after voting (this will be rendered within div.result_screen_content)
    var result_screen_template = [
        "<div class='vote_bars'><div class='vote_bar vote_bar_a' style='height: !!vote_pct_normalized_a%;'>!!vote_text_a !!vote_pct_a%</div><div class='vote_bar vote_bar_b' style='height: !!vote_pct_normalized_b%;'>!!vote_text_b !!vote_pct_b%</div></div>",
        "<div class='poll_detail'><a href='!!poll_url' target='_blank'>View more about this</a></div>",
        "<hr/><div class='poll_share'>",
            "<div class='poll_share_title'>'!!poll_question? I think !!curr_vote_text'</div><a href='http://www.facebook.com/sharer.php?u=!!poll_url' target='_blank'><img src='http://www.massematics.com/v1/default/images/social_fb.png'><span>Share</span></a><a href='https://twitter.com/share?url=!!poll_url&text=!!poll_question? I think !!curr_vote_text' target='_blank'><img src='http://www.massematics.com/v1/default/images/social_tw.png'><span>Tweet</span></a></div>"
    ].join("\n");

    var data_bind_template = function(template_html, data_map) {
        jQuery.each(data_map, function(k,v) {
            var k_re = new RegExp("\!\!" + k, 'g');
            template_html = template_html.replace(k_re, v);
        });
        return template_html;
    };

    function load_widget_from_json($, result, script_obj) {
        if (result.Error) {
            if (console && console.log) {
                console.log("Error while loading widget: " + result.Error);
            };
            return;
        }

        // get handle to the poll model
        var data = result.poll_info;

        var poll_url_key = data.url;
        var poll_url = "http://www.massematics.com/q/" + poll_url_key;

        // render the widget skeleton
        var widget_map = {"title": data.question, "option_a": data.optionA, "option_b": data.optionB, "image": data.image_key};
        var widget_html = data_bind_template(html_template, widget_map);

        // place it in the dom
        $(widget_html).insertAfter(script_obj);

        // get a handle to the new element
        var $widget_obj = script_obj.next();

        // color overrides
        var txt_color = script_obj.attr('data-color_text');
        if (txt_color) {
            $widget_obj.find(".poll_title").css("color", txt_color);
            $widget_obj.find(".poll_vote_option").css("color", txt_color);
        }

        var bg_color = script_obj.attr('data-color_bg');
        if (bg_color) {
            $widget_obj.css("background-color", bg_color);
            $widget_obj.find(".poll_title").css("background-color", bg_color);
            $widget_obj.find(".widget_footer").css("background-color", bg_color);
        }

        var opt_a_color = script_obj.attr('data-color_opta');
        if (opt_a_color) {
            $widget_obj.find(".poll_option_a").css("background-color", opt_a_color);
        }

        var opt_b_color = script_obj.attr('data-color_optb');
        if (opt_b_color) {
            $widget_obj.find(".poll_option_b").css("background-color", opt_b_color);
        }

        // setup click handling for votes
        $widget_obj.find(".poll_vote_option").click(function() {
            var $vote_elem = $(this);
            var vote_data = {
                poll : script_obj.attr('poll'),
                vote_value : $vote_elem.attr('data-vote')
            };

            __mm_call($widget_obj, "Vote", vote_data, null, function(vote_result) {
                if (vote_result) {
                    // clear any existing vote states in this widget
                    $widget_obj.find(".current_vote").removeClass("current_vote");

                    // set current vote selection
                    $vote_elem.addClass("current_vote");

                    // adjust original vote totals (note: this assumes the user is a new voter and not switching votes)
                    if (vote_data.vote_value == 'A') {
                        data.voteTotalA += 1;
                    } else {
                        data.voteTotalB += 1;
                    }

                    // setup some render variables
                    var vote_total = parseFloat(data.voteTotalA) + parseFloat(data.voteTotalB);
                    var vote_pct_a = vote_total > 0 ? Math.round(1000.0*parseFloat(data.voteTotalA)/vote_total)/10 : 0;
                    var vote_pct_b = vote_total > 0 ? Math.round(10.0*parseFloat(100.0-vote_pct_a))/10 : 0;

                    // re-map the percentages to 100.0
                    var vote_pct_100_a = 0;
                    var vote_pct_100_b = 0;
                    if (vote_pct_a >= vote_pct_b) {
                        vote_pct_100_b = vote_pct_b * (100.0 / vote_pct_a);
                        vote_pct_100_a = 100.0;
                    } else {
                        vote_pct_100_a = vote_pct_a * (100.0 / vote_pct_b);
                        vote_pct_100_b = 100.0;
                    }

                    // render post-vote ui
                    var results_map = {
                        "vote_pct_a": vote_pct_a,
                        "vote_pct_b": vote_pct_b,
                        "vote_pct_normalized_a": vote_pct_100_a,
                        "vote_pct_normalized_b": vote_pct_100_b,
                        "vote_text_a": data.optionA,
                        "vote_text_b": data.optionB,
                        "vote_count_a": data.voteTotalA,
                        "vote_count_b": data.voteTotalB,
                        "poll_url": poll_url,
                        "poll_question": data.question,
                        "curr_vote_text": vote_data.vote_value == "A" ? data.optionA : data.optionB,
                        "curr_vote_pct": vote_data.vote_value == "A" ? vote_pct_a : vote_pct_b,
                    };
                    var results_screen_html = data_bind_template(result_screen_template, results_map);
                    $widget_obj.find(".result_screen_content").html(results_screen_html);

                    // show post-vote ui
                    $widget_obj.find(".js-requires-vote").show();
                }
            });
        });

        // setup click handling for getting next poll in sequence
        $widget_obj.find(".poll_browse").click(function() {
            __mm_call(null, "GetNextWidget", {poll:poll_url_key, sequence:"market"}, script_obj, function(result, script_obj) {
                // remove the previous instance of the widget
                script_obj.next().remove();
                if (result && result.poll_info) {
                    // update script object attribute state to point to new poll
                    script_obj.attr('poll', result.poll_info.url);
                }
                // load the next one
                load_widget_from_json($, result, script_obj);
            });
        });
    }

    function load_widget() {
        jQuery(document).ready(function($) {
            if (window.widget_loaded) {
                // in case of multiple widgets, ignore duplicate document loads, the first one would've done all the work
                return;
            }
            window.widget_loaded = true;

            var css_link = $("<link>", {
                rel: "stylesheet",
                type: "text/css",
                href: "http://www.massematics.com/v2/default/css/widget.css"
            });
            css_link.appendTo('head');

            var script_objs = $("script[poll]");

            for (var i=0; i<script_objs.size(); ++i) {
                var script_object = $(script_objs[i]);

                var poll_url_key = script_object.attr('poll');
                var poll_url = "http://www.massematics.com/q/" + poll_url_key;

                __mm_call(null, "GetWidget", {poll:poll_url_key}, script_object, function(result, script_obj) {
                    load_widget_from_json($, result, script_obj);
                });
            }
        });
    }
})();