var Page = Class.create();

Page.prototype = 
{
    // Constructor taking the name of the requested WebPage
    initialize : function()
    {        
        this.image;
        this.images;
        
        this.textHolder;
        this.textHolderOverlay;
        
        this.textTitle;
        this.textIntro;
        this.textMain;
        
        this.CollectContentItems();
        
        this.mode = 'default';
        
        this.GetImageList();
    },
    
    CollectContentItems : function()
    {       
        this.image = $('photo');
        
        this.textHolder = $('contentbereich');
        
        this.textTitle = $('textTitle');
        this.textIntro = $('textIntro');
        this.textMain = $('textMain');
        
        this.textHolderOverlay = Builder.node('div', { id: 'contentbereich_overlay' });
        $('frame').appendChild(this.textHolderOverlay);
        this.textHolderOverlay.style.height = this.textHolder.getHeight() + 'px';
                
        new Effect.Fade(this.image, { to: 0.5, duration: 0.4 });
        new Effect.Fade(this.textHolderOverlay, { to: 0.7, duration: 0.4 });
        
        Event.observe(this.image, 'mouseover', this.ImageOver.bindAsEventListener(this));
        Event.observe(this.image, 'mouseout', this.ImageOut.bindAsEventListener(this));
        Event.observe(this.image, 'click', this.ShowImageSelection.bindAsEventListener(this));
        
        Event.observe(this.textHolderOverlay, 'mouseover', this.TextOver.bindAsEventListener(this));
        Event.observe(this.textHolderOverlay, 'mouseout', this.TextOut.bindAsEventListener(this));
        Event.observe(this.textHolderOverlay, 'click', this.EditText.bindAsEventListener(this));
    },
    
    ImageOver : function(Evt)
    {
        if(this.mode != 'default')
        {
            return
        }
        
        new Effect.Fade(this.image, { to: 1.0, duration: 0.4 });
    },
    
    ImageOut : function(Evt)
    {
        if(this.mode != 'default')
        {
            return
        }
        
        new Effect.Fade(this.image, { to: 0.5, duration: 0.4 });
    },
    
    TextOver : function(Evt)
    {
        if(this.mode != 'default')
        {
            return
        }
        
        new Effect.Fade(this.textHolderOverlay, { to: 0.1, duration: 0.4 });
    },
    
    TextOut : function(Evt)
    {
        if(this.mode != 'default')
        {
            return
        }
        
        new Effect.Fade(this.textHolderOverlay, { to: 0.7, duration: 0.4 });
    },
    
    EditText : function()
    {
        if(this.mode != 'default')
        {
            return;
        }
        
        this.mode = 'edittext';
        
        var textWorkspace = Builder.node('div', { id: 'textWorkspace' });
        $('frame').appendChild(textWorkspace);
        
        var titleLabel = Builder.node('label', { id: 'labelTitle' });
        titleLabel.innerHTML = 'Title:';
        var titleInput = Builder.node('div', { id: 'et_inputTitle' });
        var introLabel = Builder.node('label', { id: 'labelIntro' });
        introLabel.innerHTML = 'Intro:';
        var introInput = Builder.node('div', { id: 'et_inputIntro' });
        var textLabel = Builder.node('label', { id: 'labelText' });
        textLabel.innerHTML = 'Text:';
        var textInput = Builder.node('div', { id: 'et_inputText' });
        
        textWorkspace.appendChild(titleLabel);
        textWorkspace.appendChild(titleInput);
        textWorkspace.appendChild(Builder.node('br'));
        textWorkspace.appendChild(introLabel);
        textWorkspace.appendChild(introInput);
        textWorkspace.appendChild(Builder.node('br'));
        textWorkspace.appendChild(textLabel);
        textWorkspace.appendChild(textInput);
        textWorkspace.appendChild(Builder.node('br'));
        
        var title_fck = new FCKeditor("et_inputTitle");
        title_fck.ToolbarSet = "Title";
        title_fck.Height = 80;
        title_fck.Value = this.textTitle.innerHTML;
        title_fck.BasePath = "Resource/Script/Editor/";
        titleInput.innerHTML = title_fck.CreateHtml();
        
        var intro_fck = new FCKeditor("et_inputIntro");
        intro_fck.ToolbarSet = "Title";
        intro_fck.Height = 80;
        intro_fck.Value = this.textIntro.innerHTML;
        intro_fck.BasePath = "Resource/Script/Editor/";
        introInput.innerHTML = intro_fck.CreateHtml();
        
        var text_fck = new FCKeditor("et_inputText");
        text_fck.ToolbarSet = "Basic";
        text_fck.Value = this.textMain.innerHTML;
        text_fck.BasePath = "Resource/Script/Editor/";
        textInput.innerHTML = text_fck.CreateHtml();
        
        var message = Builder.node('p', { id: 'saveTextMessage', style: 'width:100%;height:11px;font-size:11px;font-family:Verdana;text-align:center;' });
        textWorkspace.appendChild(message);
        textWorkspace.appendChild(Builder.node('br'));
        
        var saveBtn = Builder.node('input', { type: 'button', style: 'margin:0 10px 0 100px' });
        saveBtn.value = 'Speichern';
        textWorkspace.appendChild(saveBtn);
        Event.observe(saveBtn, 'click', this.SaveText.bindAsEventListener(this));
        
        var cancelBtn = Builder.node('input', { type: 'button' });
        cancelBtn.value = 'Abbrechen';
        textWorkspace.appendChild(cancelBtn);
        Event.observe(cancelBtn, 'click', this.CancelEditText.bindAsEventListener(this));
    },
    
    CancelEditText : function()
    {
        new Effect.Fade('textWorkspace', { to: 0.0 });
        window.setTimeout(function(){ $('textWorkspace').parentNode.removeChild($('textWorkspace')); }, 1000);
        this.mode = 'default';
        this.TextOut();
    },
    
    SaveText : function()
    {
        var titleValue = FCKeditorAPI.GetInstance('et_inputTitle').GetXHTML(true);
        var introValue = FCKeditorAPI.GetInstance('et_inputIntro').GetXHTML(true);
        var textValue = FCKeditorAPI.GetInstance('et_inputText').GetXHTML(true);
        
        // Create input parameters for the webservice method
        var params=$H( {Title : titleValue, Intro: introValue, Text: textValue } ).toQueryString();
        // Create new Ajax request
        new Ajax.Request("AdminService.asmx/SaveText", { method : "post", parameters : params, requestHeaders : ['Pragma', 'no-cache', 'Cache-Control', 'no-store, no-cache, max-age=0, must-revalidate'], onSuccess : this.OnSaveTextResponse.bind(this) });
    },
    
    OnSaveTextResponse : function(transport)
    {
        // Set local variable holding the xml data
        var responseXml = new XmlDocument(transport.responseXML);
        // Check if update was successful
        var response = responseXml.SelectSingleNode("XML_RESPONSE/SUCCESS").text
        
        var message = $('saveTextMessage');
        
        if(response.toLowerCase() == 'true')
        {
            message.style.color = '#A4C34C';
            message.innerHTML = 'Speichern erfolgreich!';
            
            var titleValue = FCKeditorAPI.GetInstance('et_inputTitle').GetXHTML(true);
            var introValue = FCKeditorAPI.GetInstance('et_inputIntro').GetXHTML(true);
            var textValue = FCKeditorAPI.GetInstance('et_inputText').GetXHTML(true);
            
            this.textTitle.innerHTML = titleValue;
            this.textIntro.innerHTML = introValue;
            this.textMain.innerHTML = textValue;
            
            new Effect.Fade('textWorkspace', { to: 0.0 });
            window.setTimeout(function(){ $('textWorkspace').parentNode.removeChild($('textWorkspace')); }, 1000);
            this.mode = 'default';
            this.TextOut();
        }
        else if((response.toLowerCase() == 'false') || (response == null))
        {
            message.style.color = 'red';
            message.innerHTML = 'Beim Speichern ist ein Fehler aufgetreten';
        }
    },
    
    GetImageList : function()
    {
        new Ajax.Request("AdminService.asmx/GetImageList", { method : "post", parameters : null, requestHeaders : ['Pragma', 'no-cache', 'Cache-Control', 'no-store, no-cache, max-age=0, must-revalidate'], onSuccess : this.OnGetImageListResponse.bind(this) });
    },
    
    OnGetImageListResponse : function(transport)
    {
        // Set local variable holding the xml data
        var responseXml = new XmlDocument(transport.responseXML);
        // Check if update was successful
        var images = responseXml.SelectNodes("XML_RESPONSE/IMAGE");
        
        this.images = new Array();
        
        for(var i = 0; i < images.length; i++)
        {
            this.images.push(images[i].text);
        }
    },
    
    ShowImageSelection : function()
    {
        if(this.mode != 'default')
        {
            return;
        }
        
        this.mode = 'select_image';
        
        var imageHolder = Builder.node('div', {id: 'imageSelection', style:'top:80px;left:50%;width:220px;height:550px;padding:10px;position:absolute;border:2px solid #A4C34C;margin-left:-120px;display:none;overflow:auto;background-color:#FFFFFF;z-index:300'});
        
        var closeButton = Builder.node('p', { style: 'cursor:pointer;font-size:12px;color:#A4C34C;' });
        closeButton.innerHTML = 'schliessen';
        imageHolder.appendChild(closeButton);
        Event.observe(closeButton, 'click', this.HideImageSelection.bindAsEventListener(this));
        
        for(var i = 0; i < this.images.length; i++)
        {
            var currentImage = Builder.node("img", { alt: '', style: 'width:200px;margin:0 0 10px 0;', src: 'Content/Image/' + this.images[i] });
            imageHolder.appendChild(currentImage);
	        Event.observe(currentImage, 'click', this.SaveImage.bindAsEventListener(this));
        }
        
        document.body.appendChild(imageHolder);
        new Effect.Appear(imageHolder);
    },
    
    HideImageSelection : function()
    {
        var imageHolder = $('imageSelection');
        if(imageHolder != null)
        {
            new Effect.Fade(imageHolder, { to: 0.0, duration: 0.5 });
            window.setTimeout(function(){ $('imageSelection').parentNode.removeChild($('imageSelection')); }, 500);
        }
        
        this.mode = 'default';
        this.ImageOut();
    },
    
    SaveImage : function(Evt)
    {
        var imageElemt = Event.findElement(Evt, 'img');
        if(imageElemt != null)
        { 
            // Create input parameters for the webservice method
            var params=$H( {FileName : imageElemt.src } ).toQueryString();
            // Create new Ajax request
            new Ajax.Request("AdminService.asmx/SaveImage", { method : "post", parameters : params, requestHeaders : ['Pragma', 'no-cache', 'Cache-Control', 'no-store, no-cache, max-age=0, must-revalidate'], onSuccess : this.OnSaveImageResponse.bind(this) });
        }
    },
    
    OnSaveImageResponse : function(transport)
    {
        // Set local variable holding the xml data
        var responseXml = new XmlDocument(transport.responseXML);
        // Check if update was successful
        var success = responseXml.SelectSingleNode("XML_RESPONSE/SUCCESS").text;
        if(success.toLowerCase() == 'true')
        {
            var imageFileName = responseXml.SelectSingleNode("XML_RESPONSE/IMAGE").text;
            this.image.src = 'Content/Image/' + imageFileName;
            
            this.HideImageSelection();
        }
    },
    
    Reset : function()
    {
        this.textHolderOverlay.parentNode.removeChild(this.textHolderOverlay);
        Element.setOpacity(this.image, 1.0);
        this.mode = 'reset';
    }
}