// call overlay

function CallOverlay(url){
	var api = $j("#overlay").overlay({
		api: true
	});
	api.getOverlay().bind("onBeforeLoad", function () {
		api.getOverlay().find(".contentWrap").html("");
		var wrap = api.getOverlay().find(".contentWrap");
		wrap.load(url);
		api.getOverlay().unbind("onBeforeLoad");
	});
	api.load();
	$j('#overlay').removeClass();
	$j('#overlay').addClass("overlay");
};

function renderOverlay(url) {
	var api = $j("#overlay").overlay({
		mask: {
			color: '#000',
			opacity: 0.54
		},
		api: true
	});
	api.getOverlay().bind("onBeforeLoad", function () {
		api.getOverlay().find(".contentWrap").html("");
		var wrap = api.getOverlay().find(".contentWrap");
		wrap.load(url);
		api.getOverlay().unbind("onBeforeLoad");
	});
	api.load();
	$j('#overlay').removeClass();
	$j('#overlay').addClass("overlay dialog");
};

// call spot overlay
function CallSpotOverlay(url) {
	var api = $j("#overlay").overlay({
		api: true
	});
	api.getOverlay().bind("onBeforeLoad", function () {
		api.getOverlay().find(".contentWrap").html("");
		var wrap = api.getOverlay().find(".contentWrap");
		wrap.load(url);
		api.getOverlay().unbind("onBeforeLoad");
	});
	api.load();
	$j('#overlay').removeClass();
	$j('#overlay').addClass("overlay OverlaySpotOverlay");
};

$j(function () {
    // initiate spotoverlay
    $j("a.SpotOverlay").overlay({
        expose: "#000000",
        target: "#overlay",
        fixed: false,
        onBeforeLoad: function () {
            this.getOverlay().find(".contentWrap").html("");
            $j('#overlay').addClass("OverlaySpotOverlay");
            //this.getOverlay().append("<div class=\"SpotContent\"></div>");
            var wrap = this.getOverlay().find(".contentWrap");
            wrap.load(this.getTrigger().attr("href"));
        },
        onClose: function () {
            $j('#overlay').removeClass("SpotOverlay");
        }
    });
});

$j('#checkout a#logo').live('click', function (e) {
    var targetUrl = $j(this).attr("href");

    e.preventDefault();
    $j(this).overlay({
        mask: {
            color: '#000',
            opacity: 0.54
        },
        target: '#overlay',
        onBeforeLoad: function () {
            var wrap = this.getOverlay().find(".contentWrap");
            wrap.html("");
            $j('#overlay').removeClass().addClass("dialog overlay");
            var wrap = this.getOverlay().find(".contentWrap");
            wrap.load('/sitecore/content/Data/Overlays/OrderFlow/LeaveShop.aspx');

        }
    });
});


// initiate PacketOverlay
$j("a.PackageOverlay").overlay({
	mask: {
		color: '#000',
		opacity: 0.54
	},
	target: '#overlay',
	onBeforeLoad: function () {
		var wrap = this.getOverlay().find(".contentWrap");
		wrap.html("");
		$j('#overlay').removeClass();
		$j('#overlay').addClass("overlay");
		var wrap = this.getOverlay().find(".contentWrap");
		wrap.load(this.getTrigger().attr("href"));
	}
});

function showLoginPopup() {
	var querystring = decodeURI(location.search);
	if (!querystring) {
		return;
	}
	if (querystring.indexOf("loginpopup=true") > -1) {
		userinfo.showtooltip();
	}
}
$j(function () {
    showLoginPopup();
    // For dialogs
    $j(".button-ok").live("click", function () {
        $j(".close").click();
    });
    // overlay

    $j(".overlay").live('click', function (e) {
        e.preventDefault();

        $j(this).overlay({
            mask: {
                color: '#000',
                opacity: 0.54
            },
            target: '#overlay',
            onBeforeLoad: function () {
                // clean up
                var wrap = this.getOverlay().find(".contentWrap");
                wrap.html("");
                // pause evt videos playing
                $j("#ContainerFlowplayerMultiLoop").flowplayer().each(function () {
                    this.pause();
                });
                $j('#overlay').removeClass();
                $j('#overlay').addClass("dialog overlay");
                // grab wrapper element inside content 
                var wrap = this.getOverlay().find(".contentWrap");
                // load the page specified in the trigger 
                wrap.load(this.getTrigger().attr("href"));
            },
            onClose: function () {
                this.getOverlay().find("a.flowplayer").flowplayer().each(function (i) {
                    this.stop()
                })
            }
        });
    });

    $j("a.channeloverlay").live('click', function (e) {
        e.preventDefault();

        // load overlay
        $j(this).overlay({
            mask: {
                color: '#000',
                opacity: 0.54
            },
            expose: '#000000',
            target: '#overlay',
            api: true,
            load: true,
            onBeforeLoad: function () {

                var $trigger = this.getTrigger();

                //current buttonState
                var urlExtension = '';

                if ($trigger.parents('#ExtraChannels').length) {
                    var dataID = $trigger.parent('li').data('id');
                    var dataPrice = $trigger.parent('li').data('price');

                    var $parentElement = $trigger.parent('li');

                    if ($parentElement.hasClass('canterminate')) {
                        urlExtension = "terminate";
                    } else if ($parentElement.hasClass('terminating')) {
                        urlExtension = "terminating";
                    } else if ($parentElement.hasClass('selected')) {
                        urlExtension = "remove";
                    } else {
                        urlExtension = "add";
                    };

                    urlExtension = "?action=" + urlExtension;

                    urlExtension += '&triggerID=' + dataID + '&price=' + dataPrice;
                };
                $trigger.parent('li').addClass('trigger');

                var $overlay = $j("#overlay");
                var $wrap = $j(".contentWrap", $overlay);
                $wrap.empty();
                $wrap.html("<div class='dialogcontent' style='min-height:250px;width:510px; margin:0;z-index:-1;'>&nbsp;</div>");
                
                $overlay.removeClass();
                $overlay.css("width", 550);
                $overlay.css("min-height", 300);

                $overlay.activity();
                // pause evt videos playing
                $j("#ContainerFlowplayerMultiLoop").flowplayer().each(function () {
                    this.pause();
                });
                $overlay.addClass("dialog overlay");

                

                // load the page specified in the trimmed href in the trigger, add buttonState to url
                $wrap.load($trigger.attr("href").split('?')[0] + urlExtension, function (c) { $j("#overlay").activity(false); });

            },
            onLoad: function () {
                // $j("#overlay").activity(false);
            },
            onClose: function () {
                $j('.trigger').removeClass('trigger');
                this.getOverlay().find("a.flowplayer").flowplayer().each(function (i) {
                    this.stop();
                })
            }
        });
    });


    // split overlay
    $j(".SplitOverlay").overlay({
        expose: '#000000',
        target: '#overlay',
        onBeforeLoad: function () {
            this.getOverlay().find(".contentWrap").html("");
            $j('#overlay').removeClass();
            $j('#overlay').addClass("overlay SplitOverlay");
            // grab wrapper element inside content 
            var wrap = this.getOverlay().find(".contentWrap");
            // load the page specified in the trigger 
            wrap.load(this.getTrigger().attr("href"));
        },
        onClose: function () {
            this.getOverlay().find("a.flowplayer").flowplayer().each(function (i) {
                this.stop();
            });
            $j('#overlay').removeClass("SplitOverlay");
        }
    });
    // initiate ArticleVideoOverlay & ArticleFlashOverlay
    $j("a.ArticleVideoOverlay, a.ArticleFlashOverlay").overlay({
        expose: '#000000',
        target: '#overlay',
        top: 10,
        onBeforeLoad: function () {
            this.getOverlay().find(".contentWrap").html("");
            $j('#overlay').removeClass();
            $j('#overlay').addClass("VideoOverlay");
            // grab wrapper element inside content
            var wrap = this.getOverlay().find(".contentWrap");
            // load the page specified in the trigger - added callback to start video
            wrap.load(this.getTrigger().attr("href"), function () {
                var video = $j("#overlay .flowplayer").attr("id");
                $f(video).play();
            });
        },
        onClose: function () {
            this.getOverlay().find("a.flowplayer").flowplayer().each(function (i) {
                this.stop();
                this.unload();
            });
        }
    });
});


function Login(data) {
	//Write new markup for userinfo area
	$j('#userinfo').html('<a href="/tools/logout.ashx">' + data.LogoutText + '</a><div id="username"></div>');
	var userName = data.DisplayText;
	if (userName.length > 34) { //if username is longer than 35 characters
		$j('#userinfo a').after('<span class="dots"> ...</span>'); //add spots
		$j('#username').addClass('shortened').attr('title', userName).html(userName.substr(0, 34)); //.. and shorten username, put real username in title attribute
	} else {
		$j('#username').html(userName);
	}
	var remember = '';

	if (data.PopupBox.DisplayRemember) {
		var checked = (data.PopupBox.Remember == true) ? ' checked="checked"' : '';
		remember = '<p><input type="checkbox" id="chkremember"' + checked + '><label for="chkremember">' + data.PopupBox.RememberMeText + '</label></p>';
	}
	//add markup for the usertooltip to mainarea, add text and position
	$j('#mainarea').append('<div id="usertooltip"><strong>' + data.PopupBox.Headline + '</strong><p>' + data.PopupBox.Text + '</p>' + remember + '<p><a href="/tools/logout.ashx">' + data.LogoutText + '</a></p></div>');
	$j('#usertooltip').css('left', $j('#header .wrapper').position().left + 690);
}