var RotatingFeature = function(baseUrl, outputElementId, height) {
    var mBaseUrl = baseUrl;
    var mHeight = height;


    var mOutputElement = $($get(outputElementId));

    var mImageContainerElement = null;
    var mToggleStripElement = null;

    var mImages = new Array();
    var mSelectedIndex = 0;
    var mSelectedImage = null;

    var mTickSpeed = 1000;
    var mRotateHandle = null;


    this.AddItem = function(imageUrl, navigateUrl, duration) {

     var img = $("<img title='" + duration + "' style='cursor:pointer;display:none;position:absolute;z-index:1;top:0px;left:0px;' src='" + mBaseUrl + imageUrl + "' />");
      
      // var img = $("<img title='" + duration + "' style='cursor:pointer;display:none;position:absolute;z-index:1;top:0px;left:0px;' src='" + mBaseUrl + imageUrl + "' />");
      
        img.click(
                function(e) {
                    document.location = mBaseUrl + navigateUrl;
                }
            );
        mImages[mImages.length] = img;
    };

    this.Render = function() {
       // mImageContainerElement = $("<div style='position:relative;margin-top:26px;height:" + mHeight + "px;' />").appendTo(mOutputElement);
        mImageContainerElement = $("<div style='position:relative;height:" + mHeight + "px;' />").appendTo(mOutputElement);
   
        mToggleStripElement = $("<div style='text-align:center;' />").appendTo(mOutputElement);

        for (i = 0; i < mImages.length; i++) {
            var img = null;

            if (i == mSelectedIndex) {
                img = $("<img src='" + mBaseUrl + "images/features/on.png' style='margin-right:4px' />").appendTo(mToggleStripElement);
            }
            else {
                img = $("<img src='" + mBaseUrl + "images/features/off.png' style='margin-right:4px;' />").appendTo(mToggleStripElement);
            }

            img.css("cursor", "pointer");
            img.data("index", i);
            img.click(
                        function(e) {
                            Show(e);
                        }
                    );

            mImages[i].appendTo(mImageContainerElement);
        }

        ShowImage(0);

        mRotateHandle = setInterval(Rotate, mTickSpeed);
    };


    function pause(milliseconds) {
        var dt = new Date();
        while ((new Date()) - dt <= milliseconds) { /* Do nothing */ }
    }


    function Rotate() {

        var newSelectedIndex;

        if (mSelectedIndex < mImages.length - 1) {
            newSelectedIndex = mSelectedIndex + 1;
        }
        else {
            newSelectedIndex = 0;
        }



        ShowImage(newSelectedIndex);
        UpdateToggleImages(newSelectedIndex);

        mSelectedIndex = newSelectedIndex;

        clearInterval(mRotateHandle);
        mRotateHandle = setInterval(Rotate,mTickSpeed );

    }

    function Show(e) {
        //
        // clear the timer...user is now manually controlling the control
        clearInterval(mRotateHandle);

        var img = $(e.target);
        var index = img.data("index");

        if (index == mSelectedIndex) {
            return;
        }
        UpdateToggleImages(index);

        mSelectedIndex = index;
        ShowImage(index);



    };

    function ShowImage(index) {


        var img = mImages[index];

        mTickSpeed = img.attr("title");

        img.fadeIn(500);

        if (mSelectedImage != null) {
            
            mSelectedImage.fadeOut(500);
        }

        mSelectedImage = img;


        //setInterval(Rotate(), imgDuration);

    };





    function UpdateToggleImages(newSelectedIndex) {
        var oldImage = $(mToggleStripElement.children()[mSelectedIndex]);
        oldImage.attr("src", mBaseUrl + "images/features/off.png");

        var newImage = $(mToggleStripElement.children()[newSelectedIndex]);
        newImage.attr("src", mBaseUrl + "images/features/on.png");
    };
};