/*
*
* MitDR JavaScript functions to create, edit and delete user defined pages.
* Talks to the backend via AJAX calls to /mitdr/pageAction/<action> which is a route
* to actions in the PageController.
*
* Uses DR.Modal to show a modal window overlay and DR.SSO.build to construct its content.
*
*/


/*
* Display modal window containing error message
*/
function errorMessage(msg) {
  	var contentModal = DR.SSO.build({
		header: "Fejl",
		elements: [{html: "<p>" + msg + "</p>"}],
		buttons: [
		    {
		        text: "OK",
		        "class": "approve",
		        click: function() {
		            //Show process indicator
		            $$(".drdkSSOProcess").setStyle("display", "none");
		            
		            //remove all modal windows except the first
		            var modals = document.getElements("div.drdkModalContent > div");
		            for(var i = 1; i < modals.length; i++) {
                        modals[i].destroy();
                    }
		            
		            //show first modal window
		            modals[0].removeClass("hide");
		            return false;
		        }
		    }
        ]
	});
    
    //Hide existing modal windows  
    document.getElements("div.drdkModalContent > div").addClass("hide");
    
    //Show error message
    var containerModal = document.getElement("div.drdkModalContent");
    contentModal.inject(containerModal);
    
    return false;
}

/*
* Delete a page given its pageID. Is called by editPage()
*/
function deletePage(pageID) {
    var containerModal = document.getElement("div.drdkModalContent");

    //Create modal window that asks the user to confirm the delete
    var confirmModal = DR.SSO.build({
        header: "Bekr&#230;ft sletning",
        process: true,
        elements: [{ html: "<p>Er du sikker p&#229; at du vil slette siden?</p>"}],
        buttons: [
		    {
		        text: "Annuller",
		        "class": "cancel",
		        click: function() {
		            //If cancelled, confirm window is removed and the
		            //window below is shown again
		            var modals = containerModal.getElements("div");
		            modals[1].destroy();
		            modals[2].destroy();
		            //modals[3].destroy();
		            modals[0].toggleClass("hide");
		            return false;
		        }
		    },
			{
			    text: "Slet",
			    "class": "action",
			    click: function() {
			        //Show process indicator
			        $$(".drdkSSOProcess").setStyle("display", "block");

			        new Request.JSON({
			            method: "get",
			            url: "/mitdr/pageAction/Delete/" + pageID,

			            onComplete: function(response) {
			                //If page was successfully deleted, redirect to main page
			                if (response.responseCode == "ok") {
			                    document.location.href = "/mitdr/";
			                    //Else, show returned error message
			                } else {
			                    errorMessage(response.responseMsg);
			                }
			            }
			        }).send();
			    }
			}
		]
    });
    
    //Hide current modal window and inject confirm window
    containerModal.getElement("div").toggleClass("hide");
    confirmModal.inject(containerModal);
    return false;
}


/*
* Show modal window to edit a page, which at the moment means
* changing its title or deleting it
*/
function editPage(pageID, pageName) {
    var modal = new DR.Modal({
        "class": "mitDR",
		content: DR.SSO.build({
					header: "Rediger side",
					process: true,
					/* elements: [{text: "Ny sidetitel", id: "mitDRPageName", "value": pageName, "name": "pageName"},
					           {html: "<input type='checkbox' id='mitDRDeletePage' unchecked value='true' class='check' /><label for='mitDRDeletePage' id='mitDRDeleteBox'>Slet side</label>"}],*/
					elements: [{text: "Ny sidetitel", id: "mitDRPageName", "value": pageName, "name": "pageName",
					            events:{
							            'keydown' : function(k) {
									        if (k.key == 'enter') {
										        if ( $('mitDRPageName').get('value') != '') {												
											        $('page').getElement('button[class=approve]').fireEvent("click");
										        }
									        }
									
									        if (k.key == 'esc') modal.close();
								        },
							
							            'domready':function(){
								            (function(){if ($('mitDRPageName')) $('mitDRPageName').focus()}).delay(1000)
							            }
						            }
					            }
					        ],
					buttons: [
					    {
                          	text: "Slet side",
                          	"class": "action",
                          	click: function(){
                                  deletePage(pageID);
                                  return false;}},                                                     
				        {
					        text: "Annuller",
					        data: "close",
					        "class": "cancel"},
						{
							text: "OK", 
							"class": "approve",
							click: function(){
							    //Show process indicator
								$$(".drdkSSOProcess").setStyle("display", "block");
								
								new Request.JSON({
								    url: "/mitdr/pageAction/Edit/" + pageID,
								    data: {"pageName": $("mitDRPageName").value},
								    onComplete: function(response) {
								        //If edit was successfull, redirect to new page url,
								        //which is sent from server in the response object
						                if(response.responseCode == "ok") {
						                    document.location.href = "/mitdr/" + response.responseMsg;
					                    } else {
					                        errorMessage(response.responseMsg);
					                    }           
								    }
								}).send();
							}
						}
					]
			})
    });
}

/*
* Show modal window to create a new page
*/
function addPage() {
    var modal = new DR.Modal({
        "class": "mitDR",
        content: DR.SSO.build({
            header: "Tilføj ny side",
            process: true,
            elements: [{ text: "Sidenavn", id: "mitDRPageName", "name": "pageName",
                events: {
                    'keydown': function(k) {
                        if (k.key == 'enter') {
                            if ($('mitDRPageName').get('value') != '') {
                                $('page').getElement('button[class=submit]').fireEvent("click");
                            }
                        }

                        if (k.key == 'esc') modal.close();
                    },

                    'domready': function() {
                        (function() { if ($('mitDRPageName')) $('mitDRPageName').focus() }).delay(1000)
                    }
                }
            },
					           { html: "<label for='mitDRAddContent'>Startindhold</label><select name='addContent' id='mitDRAddContent' /><option value=''>Intet</option><option value='Nyheder'>Nyhedspakken</option><option value='Sport'>Sportspakken</option><option value='Underholdning'>Underholdningspakken</option><option value='Familie'>Familiepakken</option><option value='Livsstil'>Livsstilspakken</option><option value='Drengeroev'>Drengerøvspakken</option><option value='Noerd'>Nørdpakken</option></select>"}],
            buttons: [
					    {
					        text: "Annuller",
					        data: "close",
					        "class": "cancel"
					    },
						{
						    text: "Opret",
						    "class": "submit",
						    click: function() {
						        $$(".drdkSSOProcess").setStyle("display", "block");

						        new Request.JSON({
						            url: "/mitdr/pageAction/Create",
						            data: { pageName: $("mitDRPageName").value, addContent: $("mitDRAddContent").value },
						            onComplete: function(response) {
						                if (response.responseCode == "ok") {
						                    //In case the new page needs to populated with widgets,
						                    //do a POST request, otherwise just redirect to the page.
						                    if ($("mitDRAddContent").value != "") {
						                        var form = new Element("form", { "action": "/mitdr/" + response.responseMsg, "method": "post" });
						                        new Element("input", { "type": "hidden", "name": "groupName", "value": $("mitDRAddContent").value }).inject(form);
						                        form.inject($("page"));
						                        form.submit();
						                    } else {
						                        document.location.href = "/mitdr/" + response.responseMsg;
						                    }
						                } else {
						                    errorMessage(response.responseMsg);
						                }
						            }
						        }).send();
						    }
						}
					]
        })
    });
}

/*
* Fade out and remove message box from DOM
*/
function closeMsgBox() {
   $("msgBox").fade('out').get('tween').chain(function(){$("msgBox").destroy()});

}

function deletePageRequest(pageID) {
    new Request.JSON({
        method: "get",
        url: "/mitdr/pageAction/Delete/" + pageID,
        onComplete: function(response) {
            if (response.responseCode == "ok") {
                document.location.href = "/mitdr/";
            } else {
                errorMessage(response.responseMsg);
            }
        }
    }).send();
}

window.addEvent('domready', function() {
    var WidgetTopbar = new Class({ Implements: Options, options: { parentElm: "localWrapper", mainElm: "localTop", subElm: "localTopSub" }, initialize: function(B) { if (B) { this.setOptions(B) } this.mainElm = $(this.options.mainElm); this.parentElm = $(this.options.parentElm); this.subElm = new Element("div").addClass("localTopSub").adopt(new Element("div", { id: this.options.subElm }).set("html", "...")).injectInside(this.parentElm); this.editStade = new Fx.Slide($(this.options.subElm), { duration: 800, transition: Fx.Transitions.Pow.easeOut, onStart: function() { if (Browser.Engine.gecko && false) { this.element.getElements(".listElement").each(function(C) { C.setStyle("overflow", "hidden") }) } }, onComplete: function() { if (Browser.Engine.gecko && false) { this.element.getElements(".listElement").each(function(C) { C.setStyle("overflow", "auto") }) } } }); this.editStade.hide(); for (var A in this.options.elements) { this.itm = new Element("div").addClass(this.options.elements[A].className).set("html", A).injectInside(this.mainElm); this.itm.options = { "path": this.options.elements[A].path, "className": this.options.elements[A].className, "subElm": $(this.options.subElm), "fnc": this.initContent, "fncReset": this.resetBtn, "mainElm": this.mainElm, "editStade": this.editStade, "_this": this }; this.itm.addEvent("click", function() { if (this.options._this.selected && this.options._this.selected == this.options.className && this.options.editStade.open == true) { this.options.editStade.slideOut(); this.options.fncReset(this.options) } else { this.options._this.selected = this.options.className; this.options.fncReset(this.options); this.setStyle("background-position", "0 -50px"); this.options.fnc(this.options) } }) } }, resetBtn: function(A) { A.mainElm.getElements("div").each(function(B) { B.setStyle("background-position", "0 0") }) }, initContent: function(A) { var B = new Request({ url: A.path, onComplete: function(C) { A.subElm.set("html", C); A.clBtn = new Element("div").addClass("close").adopt(new Element("a").set("html", "Luk igen")).inject(A.subElm); A.editStade.slideIn(); A.clBtn.addEvent("click", function() { A.editStade.slideOut(); A.fncReset(A) }, A) } }).get() } });
});

function MitDRtoggle(x, y) {
    if (!$(y).hasClass("active")) {
        $("navigation").getElements("a").each(function(item) {
            item.removeClass("active");
        });

        x = $(x);
        // Set the link to active
        $(y).addClass("active");

        // Show ul
        x.removeClass("hide");
        // Remove
        x.addClass("dividerOut");
        var newHeight = x.getSize().y;
        x.setStyle('height', '2px');
        var myEffect = new Fx.Morph(x, { duration: 150, transition: Fx.Transitions.Sine.easeOut });
        //The styles of myClassName will be applied to the target Element.
        myEffect.start({
            'height': [2, newHeight]
        });
    }
}