// controls
var C = {
    // console wrapper
    debug: true, // global debug on|off
    quietDismiss: false, // may want to just drop, or alert instead
    log: function() {
        if (!C.debug) return false;

        if (typeof console == 'object' && typeof console.log != "undefined")
            console.log.apply(this, arguments);
        else
            if (!C.quietDismiss) {
                var result = "";
                for (var i = 0, l = arguments.length; i < l; i++)
                    result += arguments[i] + " ("+typeof arguments[i]+") ";

                alert(result);
            }
    }
} // end console wrapper.

var stacks;

var showControls = function(el) {
    if (stacks.length < 2)
        return false;

    if ($("stackControl"))
        $("stackControl").smartDispose();

    coords = el.getCoordinates();

    var stackControl = new Element("div", {
        id: "stackControl",
        "class": "hfloat"
    }).setStyles({
        position: "absolute",
        top: coords.bottom - 30,
        zIndex: 10000,
        visibility: "hidden"
    }).inject(document.body).setHTML(
        "<div id='nmore'>More &raquo;</div><div id='nleft'></div><div id='nmid'></div><div id='nright'>"
    );

    stacks.each(function(sel, done) {
        var className = (sel == el) ? "ncontrol cur ncontrolSelected" : "ncontrol cur";
        new Element("div", {
            "class": className
        }).setHTML(done+1).setProperty("rel", done).inject($("nmid")).addEvents({
            click: function() {
                if (this.hasClass("ncontrolSelected"))
                    return false;

                var currentSelection = $E(".ncontrolSelected").getProperty("rel");
                $clear(cycleReference);
                stacks[currentSelection].fade(1, 0, {reclaim: 0, remove: 0}).setStyles({
                    display: "none"
                });

                $$(".ncontrolSelected").removeClass("ncontrolSelected");
                this.addClass("ncontrolSelected");



                stacks[this.getProperty("rel")].setOpacity(0).setStyles({
                    display: "block"
                }).fade(0, 1, {reclaim: 0, remove: 0}).stacker();
            },
            mouseenter: function() {
                this.addClass("ncontrolOver");
            },
            mouseleave: function() {
                this.removeClass("ncontrolOver");
            }
        });
    });

    // C.log(stackControl.getStyle("width"));
    stackControl.setStyles({
        left: coords.right - stackControl.getStyle("width").toInt() - 10,
        visibility: "visible"
    });
}, nextClick = function(options) {
	// done loop.
	if (stacks.length > 1) {
		var currentEl = $("nmid").getElement(".ncontrolSelected").getProperty("rel").toInt(), nextEl = (currentEl === stacks.length - 1) ? 0 : currentEl+1;
		var nextElement = $("nmid").getElement(".ncontrol[rel="+nextEl+"]");

        if (!nextElement)
            nextElement = $E(".ncontrol");

		if (nextElement) {
			$clear(cyclePanes);

			cyclePanes = (function() {
			    if ($E("div.ncontrolOver")) {
					return false;
				}

				$clear(cyclePanes);
    			nextElement.fireEvent("click");
			}).periodical(options.delayBetweenProds * 1000);
		}
	}

}


Element.extend({
    stacker: function(options) {
        var options = $merge({
            subProdOpacity: .85,
            delayBetweenProds: 3 // seconds
        }, options);

        if (this.getProperty("data-delay"))
            options.delayBetweenProds = this.getProperty("data-delay");


        var prods = this.getElements("div.stackProd"), coords = this.getCoordinates();



        var cycleProducts = function(nextProd) {
            $clear(cycleReference);

            if (prods.length < 2) {
            	nextClick(options);
                return false;
            }

            cycleReference = (function() {
                prods.each(function(el, index) {
                    if (el.getStyle("display") == "block") {
                        el.fade(options.subProdOpacity, 0, {reclaim: 0, remove: 0});
                        // find next...
                        nextProd = (index < prods.length - 1) ? (index + 1) : 0;
                        (function() {
                            el.setStyles({
                                display: "none"
                            }).setOpacity(0);
                        }).delay(500);
                    }
                });

                if (nextProd == prods.length -1 && stacks.length > 1) {
                    $clear(cycleReference);
                	nextClick(options);
                }
                prods[nextProd].setOpacity(0).setStyles({
                    display: "block"
                }).fade(0, options.subProdOpacity, {reclaim: 0, remove: 0});
            }).periodical(options.delayBetweenProds * 1000);
        };

        prods.each(function(el, done) {
            el.addClass("hfloat").setStyles({
                position: "absolute",
                left: coords.left + 14,
                top: coords.top + 12,
                display: (done < 1) ? "block" : "none"
            }).setOpacity(options.subProdOpacity).addEvents({
                mouseenter: function() {
                    this.setOpacity(1);
                    $clear(cycleReference);
                    $clear(cyclePanes);
                },
                mouseleave: function() {
                    this.setOpacity(options.subProdOpacity);
                    cycleProducts();
                }
            });

        });

        this.addEvents({
            mouseenter: function() {
                $clear(cyclePanes);
                $clear(cycleReference);
            },
            mouseleave: function() {
                cycleProducts();
            }
        });

        showControls(this);
        cycleProducts();
        return this;
    }
});

var cycleReference, cyclePanes, dealTimer, coords, load_method = (window.ie ? 'load' : 'domready');
window.addEvent(load_method, function() {
    stacks = $$(".stackHolder");

    stacks.each(function(el, done) {
        if (done > 0) {
            el.setStyles({
                display: "none"
            }).setOpacity(0);
        }
        else {
            el.setStyles({
                display: "block"
            }).stacker();
        }
    });

    // deals
    var deals = $("shopDeals").getElements("div.ndeal");
    deals.each(function(el) {
        var dealLink = el.getFirst();
        var elOverlay = new Element("div", {
            "class": "dealOverlay"
        }).setOpacity(0).setStyles({
            position: "relative",
            top: el.getSize().size.y - 26,
            height: 16,
            background: "#ddd",
            padding: 2,
            textAlign: "center"
        }).inject(el).fade(0, .7, {remove:0,reclaim:0}).adopt(dealLink.setStyles({
            "display": "inline",
            color: "#000",
            fontWeight: "bold",
            textDecoration: "none",
            background: "url(/img/nhp/arrowy-thing.gif) no-repeat center right",
            "padding-right": 14
        })).addEvents({
            click: function() {
                toggleModal("#fff");
                window.location.href = dealLink.getProperty("href");
            }
        }).addClass("cur");

        el.addEvents({
            click: function() {
                toggleModal("#fff");
                window.location.href = dealLink.getProperty("href");
            },
            mouseenter: function() {
                $clear(dealTimer);
                new Fx.Styles(elOverlay.setOpacity(1).setStyles({
                    background: "#ebebeb url(/img/nhp/deal-highlight.gif) no-repeat bottom center"
                }), {
                    duration: 200,
                    transition: Fx.Transitions.Sine.easeOut
                }).start({
                    height: 22
                });

                elOverlay.getFirst().setStyle("color", "#c91b22");
            },
            mouseleave: function() {
                new Fx.Styles(elOverlay.fade(1,.7, {reclaim:0,remove:0}), {
                    duration: 200,
                    transition: Fx.Transitions.Sine.easeOut
                }).start({
                    height: 16,
                    backgroundColor: "#dddddd"
                }).chain(function() {
                    elOverlay.setStyles({
                        backgroundImage: "none"
                    });
                    elOverlay.getFirst().setStyle("color", "#000");
                });
            }
        }).addClass("cur");
    });

}).addEvent("resize", function() {

    var currentIndex = $E("div.ncontrolSelected").getProperty("rel"), currentProds = stacks[currentIndex].getElements("div.stackProd"), coords = $("stackHolder").getCoordinates();

    if (currentProds.length) {
        currentProds.setStyles({
            left: coords.left + 14,
            top: coords.top + 12
        });
    }

    showControls(stacks[currentIndex]);


});