$.fn.ClackerTicker = function (COMFX, noChars) {
    return this.each(function () {
        var el = $(this),
            theOldValue = 0,
            backDiv = $("<div class=\"clBack\"/>"),
            frontDiv = $("<div class=\"clFront\"/>"),
            upper = $("<div class=\"clUpper\"/>"),
            lower = $("<div class=\"clLower\"/>"),
            holder = $("<div class=\"clHolder\"/>");

        holder.append(upper);
        holder.append(lower);

        for (var i = 1; i < noChars; i++) {
            var cln = holder.clone();
            cln.addClass("clb" + i);
            backDiv.append(cln);
            var fcln = holder.clone();
            fcln.addClass("clf" + i);
            frontDiv.append(fcln);
        }

        el.append(backDiv);
        el.append(frontDiv);

        for (var i = 0; i < 10; i++) {
            var img = $("<img  class=\"clImgTop" + i + "\" src=\"img/top/" + i + ".png\"/>");
            img.css("display", "none");
            el.append(img);
        }

        for (var i = 0; i < 10; i++) {
            var img = $("<img class=\"clImgBot" + i + "\" src=\"img/bot/" + i + ".png\"/>");
            img.css("display", "none");
            el.append(img);
        }

        var img = $("<img src=\"img/bot/0.png\"/>");
        $(".clLower").append(img);
        img = $("<img src=\"img/top/0.png\"/>");
        $(".clUpper").append(img);
        //        var pnt = $("<div class=\"decPoint\"></div>");
        //        el.append(pnt);

        var pnt = $("<div class=\"clStatus\"></div>");
        el.append(pnt);

        getNextValue();
        function getNextValue() {
            $.post("__dta/__Pd.ashx", { SM: COMFX }, function (xml) {
                if ($("Result", xml).text() == "true") {
                    updateValue($("Mid", xml).text());
                }
                else {
                    // alert the user that the price is not working
                    var alertDiv = $("<div class=\"clOverLay\"/>");

                    var divTrans = $("<div class=\"clTransparent\"/>");
                    divTrans.width(el.width() + 3).height(44).css("opacity", "0");
                    alertDiv.append(divTrans);
                    el.append(alertDiv);
                    $(".clTransparent", el).animate({ "opacity": "0.8" }, 1000, function () {
                        alertDiv.append("<h4 class=\"clh3\">Please refresh<br/>the page</h4>");
                    });
                }
            });
        }
        function updateValue(thisValue) {

            //try {
            //            thisValue = roundNumber(thisValue, 2);
            //            thisValue = thisValue.toFixed(2);

            thisValue = roundNumber(thisValue, 0);
            thisValue = thisValue.toFixed(0);

            if (thisValue != theOldValue) {

                var strValue = "" + thisValue;
                strValue = strValue.replace(".", "");

                var offset = (noChars - 1) - strValue.length;

                for (var j = strValue.length; j > 0; j--) {
                    //alert(j);
                    var thisVal = strValue.substring(j - 1, j);
                    var oldVal = 0;
                    var elmt = $(".clf" + (j+offset) + " .clUpper img", el);
                    oldVal = parseInt(elmt.attr("src").substring(8, 9));
                    //alert(strValue + " " + j + " " + thisVal);
                    if (oldVal != thisVal) {
                        flipCounter((j + offset), thisVal);
                    }

                }

                theOldValue = thisValue;

            }
            // make the button glow
            $(".clStatus", el).css("background-color", "#00ff00").animate({ backgroundColor: "#999" }, 2000);

            //}
            //catch (err) {
            //Handle errors here
            //}


            setTimeout(function () { getNextValue(); }, 5000);

        };

        function roundNumber(num, dec) {
            var result = Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
            return result;
        }

        function flipCounter(elemtID, newValue) {

            // add the two new images
            var topImage = $(".clImgTop" + newValue).clone();
            var botImage = $(".clImgBot" + newValue).clone();

            topImage.removeClass("clImgTop" + newValue).css({ "height": "20px", "width": "22px", "display": "block" });
            botImage.removeClass("clImgBot" + newValue).css({ "height": "0px", "width": "22px", "display": "block" });

            $(".clb" + elemtID + " .clUpper", el).append(topImage);
            $(".clf" + elemtID + " .clLower", el).append(botImage);

            // flip down the top
            $(".clf" + elemtID + " .clUpper img", el).animate({ "height": "0px", "width": "22px", "top": "20px" }, 100, function () {
                // flip down the bot
                $(".clf" + elemtID + " .clLower img", el).animate({ "height": "20px", "width": "22px", "top": "0px" }, 100, function () {
                    // swap all the images to the new ones


                    $(".clf" + elemtID + " .clUpper img", el).remove();
                    $(".clf" + elemtID + " .clUpper", el).append(topImage);
                    $(".clb" + elemtID + " .clUpper img", el).remove();


                    $(".clb" + elemtID + " .clLower img", el).remove();
                    $(".clb" + elemtID + " .clLower", el).append(botImage);
                    $(".clf" + elemtID + " .clLower img", el).remove();

                });

            });


        }
    });
};