(function($) {
    var transitionIsHappening = false,
    dummyRepl = '<li class="tile tile-short tile-dummy"></li>',
	trackingTag = '<img id="atlasTracking" height="1" width="1" src=""/>',
    hasFeaturedTile = false,
    duration = $('#ie6').length == 0 ? 750 : 0,
    fullWidth = 500,
    fullHeight = 425,
    smallWidth = 180,
    smallHeight = 120,
    isMoving = false;
    var last, lastMini, lastPos, prod;

    function expand(tile) {
        if ($(tile).attr("href") != null) {
            document.location = $(tile).attr("href");
            return;
        }
        isMoving = true;
        transitionIsHappening = true;
        if (last != null) {
            last.css({ "z-index": 0 });
            lastMini.parent().removeClass("detail" + prod);
            lastMini.fadeIn();

            if (prod == "product5" || prod == "product10" || prod == "product7800") {
                lastMini.css({ width: 380 , height: 120 , left: 0, top: 0, "z-index": 0 });
            }
            else
                lastMini.css({ width: 180, height: 120, left: 0, top: 0, "z-index": 0 });
                
            lastMini.removeClass("product22").addClass("product");

        }

        var ofset = $("#main").offset();
        var tofset = $(tile).offset();
        feature = $("#feature" + tile.id);


        $(tile).css({ top: tofset.top, left: tofset.left });
        $(tile).addClass("product22").removeClass("product");
        $(tile).css({ "z-index": 2 });
        $('html, body').animate({ scrollTop: 0 }, duration);
        var myWidth;
        if (tile.id == "product5" || tile.id == "product10" || tile.id == "product7800")
            myWidth = 400;
        else
            myWidth = 200;
        $(tile).css({ top: tofset.top, left: tofset.left });
        $(tile).animate({ width: myWidth, height: 150, left: ofset.left, top: ofset.top }, duration, function() {
            //feature.addClass("detailShow2");
            feature.addClass("detailShow").removeClass("detail").addClass("feature" + tile.id);
            feature.addClass("detailShow").css({ top: ofset.top, left: ofset.left, "z-index": 3, width: 200, height: 150 });
            feature.animate({ width: 520, height: 425, top: ofset.top, left: ofset.left }, duration, function() {
                isMoving = false;
                transitionIsHappening = false;
                if (last != null) last.hide();
                last = feature;
                lastMini = $(tile);
                lastPos = tofset;
                prod = tile.id;


            });

            $(tile).css({ top: -15, left: 0 });
            $(tile).addClass("product").removeClass("product22").addClass(tile.id).removeClass("detail" + tile.id);


        });
    };

    function grow(tile) {
        if (!isMoving) {

            var css, myid = tile.id;

            if (tile.id == "product5" || tile.id == "product10" || tile.id == "product7800")
                css = { width: 400, height: 150, top: -15, left: 0 };
            else
                css = { width: 200, height: 150, top: -12, left: 0 };

				

            var tile = $(tile);
            tile.removeClass(myid).addClass("detail" + myid);
            if (transitionIsHappening || isMoving || tile.data('expanded')) return;

            if (duration > 0 && !isMoving) {
                tile.stop().animate(css, 200);

            }
            else {
                tile.css(css);
            }

        }
    };


    function shrink(tile) {
        if (!isMoving) {
            var css, myid = tile.id;

            if (tile.id == "product5" || tile.id == "product10" || tile.id == "product7800")
                css = { width: 370, height: 120, top: 0, left: 0 };
            else
                css = { width: 160, height: 120, top: 0, left: 0 };

            var tile = $(tile);
            if (tile.data('expanded')) return;

            tile.removeClass("detail" + myid).addClass(myid);
            //        var css = { width: 180, height: 120, top: 0, left: 0 };
            if (duration > 0) {
                tile.stop().animate(css, 200);
            }
            else {
                tile.css(css);
            }
            //        tile.parent().css('z-index', 0);
        }
    };



    function initTile(node) {

        var $node = $(node);
        $node.mouseover(function() {
            if ($node.data('expanded')) return;
            grow(this);
        }).mouseout(function() {
            if ($node.data('expanded')) return;
            shrink(this);
        }).click(function() {
            var tile = $(this);
            if (transitionIsHappening || tile.data('expanded')) return false;
            expand(this);

        });



    };



    $(function() {
        $('html, body').animate({ scrollTop: 0 }, duration);

    });


    $(document).ready(function() {


        $('div.product').each(function() {
            if ($(this).attr("id") == "product100") {
                alert("Hi");
            }
            else {
                initTile(this);
            }
        });

    });

})(jQuery);


//Closes the active Silverlight Feature
function closeFeature(id)
{
    $('#silverlight-' + id).trigger('close');
}

//Shows the moreInfo tile for the Silverlight Feature
function moreInfo(id) {
    $('#silverlight-' + id).trigger('moreInfo');
}
