/* Variables */

var posLeft = 500;
var posTop = 50;
var picWidth = 265;
var picHeight = 340;

var picOriginalHeight = 0;
var picOriginalWidth = 0;

Event.observe(window,'load',Page_Loaded)

/* Functions */

function Page_Loaded()
{
    Event.observe('btnApply','click',btnApply_Clicked);
    Event.observe('ibtnDownsizePortrait','click',ibtnDownsizePortrait_Clicked);
    Event.observe('ibtnUpsizePortrait','click',ibtnUpsizePortrait_Clicked);
    Event.observe('btnPreview','click',btnPreview_Clicked);
    Event.observe('btnCancelPreview','click',btnCancelPreview_Clicked);
    Event.observe('imgHelpILoveYou','mouseover',showCardDesignILoveYou);
    Event.observe('imgHelpILoveYou','mouseout',hideCardDesign);
    Event.observe('imgHelpStations','mouseover',showCardDesignStations);
    Event.observe('imgHelpStations','mouseout',hideCardDesign);
    Event.observe('imgHelpKeywords','mouseover',showCardDesignKeywords);
    Event.observe('imgHelpKeywords','mouseout',hideCardDesign);
    Event.observe('imgHelpRegioCardPlus','mouseover',showCardDesignRegioCardPlus);
    Event.observe('imgHelpRegioCardPlus','mouseout',hideCardDesign);
    
}

function showCardDesignStations()
{
    showCardDesign("Stations");
}

function showCardDesignKeywords()
{
    showCardDesign("Keywords");
}

function showCardDesignILoveYou()
{
    showCardDesign("ILoveU");

}

function showCardDesignRegioCardPlus()
{
    showCardDesign("RegioCardPlus");
}

function hideCardDesign()
{
    if($('CardDesign'))
    $('CardDesign').remove();

}

function showCardDesign(cardType)
{
    if($('CardDesign'))
    {
        $('CardDesign').remove();
    }
    var cardDesign = document.createElement("div");
    cardDesign.setAttribute("id","CardDesign");
    $('Page').appendChild(cardDesign);
    
    switch(cardType)
    {
        case "ILoveU":
            $('CardDesign').setStyle({backgroundImage:'url(img/card-iloveyou.gif)'});
            break;
            
        case "Stations":
            $('CardDesign').setStyle({backgroundImage:'url(img/card-ortschaften.gif)'});
            break;
            
        case "Keywords":
            $('CardDesign').setStyle({backgroundImage:'url(img/card-aktivitaeten.gif)'});
            break;
            
        case "RegioCardPlus":
            $('CardDesign').setStyle({backgroundImage:'url(img/card-regiocardplus.gif)'});
            break;
    }
    cardDesign.setStyle({backgroundRepeat:'no-repeat'});
    
    
    $('Page').appendChild(cardDesign);
    
    
}

function btnApply_Clicked()
{
    var gender = $('rblGenderFemale').checked ? "Female" : "Male";
    var gift = "NotSet"; //$('rblGiftCoop').checked ? "Coop" : $('rblGiftKino').checked ? "Kino" : "Wasserfallen";
    var card = $('cardILoveYou').checked ? "ILoveU" : $('cardKeywords').checked ? "Keywords" : $('cardRegioCardPlus').checked ? "RegioCardPlus" : "Stations";
    
    //var posX = ($('Portrait_PosX').value-posLeft)*(-1);
        var posX = 500-Element.cumulativeOffset($('imgPortrait')).left;
       if(posX < 3)
            posX = 0;
        
        //var posY = ($('Portrait_PosY').value-posTop)*(-1)
        var posY = 50-Element.cumulativeOffset($('imgPortrait')).top;
        if(posY < 3)
            posY = 0;
     
    new Ajax.Request('json/apply.aspx',{method:'get',parameters: 
    {
        firstname: $('txtFirstname').value,
        surname: $('txtSurname').value,
        street: $('txtStreet').value,
        zip: $('txtZip').value,
        city: $('txtCity').value,
        phone: $('txtPhone').value,
        birthdate: $('txtBirthdate').value,
        card: card,
        gift: gift,
        gender: gender,
        portraitId: $('PortraitId').value,
        email: $('txtEmail').value,
        posx: posX,
        posy: posY,
        width: $('Portrait_Width').value,
        height: $('Portrait_Height').value,
        resize: (picOriginalWidth/($('imgPortrait').getWidth()-10)),
        remarks: escape($('txtRemarks').value),
        subscription: (parseInt($RF($("Form1"), "subscriptionType1"))+parseInt($RF($("Form1"), "subscriptionType2")))
    },asynchronous:true,onComplete:function(transport)
    {
        if(transport.responseText == "ok")
        {
            $('PreviewFrame').remove();
            $('PreviewButtons').setStyle({display:'none'});
            var fields = $$('#DataForm input');
            $('imgPortrait').remove();
            for(var i = 0;i<fields.length;i++)
            {
                fields[i].value = '';
            }
            $('txtRemarks').value = '';
            showErrorMessage("Bestellung erfolgreich","Die Bestellung wurde erfolgreich versendet.");
        }
        else
            showErrorMessage("Fehler","Leider ist bei der Bestellung ein Fehler aufgetreten. Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.");
        
    }});
}

function validateForm()
{
    
    return false;
}

function ValidatePicture(sender, args)
{
    if($('Portrait').childElements().length > 0)
    {
        args.IsValid = true;
    }
    else
    {
        args.IsValid = false;
    }
}

function btnPreview_Clicked()
{
    Page_ClientValidate();
    if(Page_IsValid)
    {
    
    
        var previewFrame = document.createElement("div");
        previewFrame.setAttribute("id","PreviewFrame");
        
        $('Page').appendChild(previewFrame);
        
        var selectedCardType = "ILoveYou";
        
        if(! ($('cardKeywords').checked || $('cardStations').checked || $('cardRegioCardPlus').checked  ))
        {
            $('PreviewFrame').setStyle({backgroundImage:'url(img/bg-card.gif)'});
        }
        else if($('cardRegioCardPlus').checked)
        {
        $('PreviewFrame').setStyle({backgroundImage:'url(img/bg-card-regio.gif)'});
        }
        else
        {
            $('PreviewFrame').setStyle({backgroundImage:'url(img/bg-card-white.gif)'});
        }
        
       var previewPic = document.createElement("img");
       
       //var posX = ($('Portrait_PosX').value-posLeft)*(-1);
       var posX = 500-Element.cumulativeOffset($('imgPortrait')).left;
       if(posX < 3)
            posX = 0;
        
        //var posY = ($('Portrait_PosY').value-posTop)*(-1)
        var posY = 50-Element.cumulativeOffset($('imgPortrait')).top;
        if(posY < 3)
            posY = 0;
        
        
       
       previewPic.setAttribute("src","previewPicture.aspx?portraitId=" + $('PortraitId').value + "&posx=" + posX + "&posy=" + posY + "&width=" + $('Portrait_Width').value + "&height=" + $('Portrait_Height').value + "&resize=" + (picOriginalWidth/$('imgPortrait').getWidth()) );
       previewPic.setAttribute("width","200");
       previewPic.setAttribute("height","272");
       previewPic.setAttribute("alt","");
       
       previewFrame.appendChild(previewPic);
       
       var previewTNWNr = document.createElement("div");
       previewTNWNr.setAttribute("id","TNWNr");
       previewTNWNr.innerHTML = "1234567890";
       previewFrame.appendChild(previewTNWNr);
       
       var previewFirstname = document.createElement("div");
       previewFirstname.setAttribute("id","Firstname");
       previewFirstname.innerHTML = $('txtFirstname').value;
       previewFrame.appendChild(previewFirstname);
       
       var previewSurname = document.createElement("div");
       previewSurname.setAttribute("id","Surname");
       previewSurname.innerHTML = $('txtSurname').value;
       previewFrame.appendChild(previewSurname);
       
       var previewBirthdate = document.createElement("div");
       previewBirthdate.setAttribute("id","Birthdate");
       previewBirthdate.innerHTML = $('txtBirthdate').value;
       previewFrame.appendChild(previewBirthdate);   
       
       $('PreviewButtons').setStyle({display:'block'});
   }
   else
   {
        showErrorMessage("Eingaben fehlerhaft / unvollständig","Bitte überprüfen Sie Ihre Eingaben und stellen Sie sicher, dass Sie alle Felder korrekt ausgefüllt haben<br /><br />Fehlerhafte oder nicht ausgefüllt Felder sind mit einem <span style='color:#ff0000'>*</span> markiert<br /><br />");
   }
}

function ibtnDownsizePortrait_Clicked()
{
    if($('Portrait').childElements().length == 0)
        return;
        
    var curWidth = $('imgPortrait').getWidth();
    var curHeight = $('imgPortrait').getHeight();
    
    if(picOriginalHeight==0)
    {
        picOriginalHeight = curHeight;
        picOriginalWidth = curWidth;
    }
    
    if(curWidth <= picWidth || curHeight <= picHeight)
        return;
        
    var newWidth = curWidth/4*3;
    var newHeight = curHeight/4*3;
    
    if(newWidth <= picWidth || newHeight <= picHeight)
    {
        var propWidth = curWidth/picWidth;
        var propHeight = curHeight/picHeight;
        
        if(propWidth > propHeight)
        {
            newWidth = curWidth/propHeight;
            newHeight = picHeight;
        }
        else
        {
            newWidth = picWidth;
            newHeight = curHeight/propWidth;
        }
    }
    
    $('imgPortrait').setStyle(
    {
        width: Math.round(newWidth) + 'px',
        height: Math.round(newHeight) + 'px'
    });
    
    $('Portrait_Width').value = Math.round(newWidth);
    $('Portrait_Height').value = Math.round(newHeight);
    
    var left = Element.cumulativeOffset($('imgPortrait')).left;
    var top = Element.cumulativeOffset($('imgPortrait')).top;
    
    if(left>posLeft)
    {
        $('imgPortrait').setStyle({left:'0px'});
    }
    
    if(posLeft>left+$('imgPortrait').getWidth()-picWidth)
    {
        $('imgPortrait').setStyle({left: picWidth-$('imgPortrait').getWidth() + 'px'});
    }
    
    if(top>posTop)
    {
        $('imgPortrait').setStyle({top:'0px'});
    }
    
    if(posTop>top+$('imgPortrait').getHeight()-picHeight)
    {
        $('imgPortrait').setStyle({top: picHeight-$('imgPortrait').getHeight() + 'px'});
    }
    
    $('Portrait_PosX').value = Element.cumulativeOffset($('imgPortrait')).left;
    if($('Portrait_PosX').value < 3)
        $('Portrait_PosX').value = 0
        
    $('Portrait_PosY').value = Element.cumulativeOffset($('imgPortrait')).top;
    if($('Portrait_PosY').value < 3)
        $('Portrait_PosY').value = 0
    
    
}

function ibtnUpsizePortrait_Clicked()
{
    
    if($('Portrait').childElements().length == 0)
        return;
        
    var curWidth = $('imgPortrait').getWidth();
    var curHeight = $('imgPortrait').getHeight();

    if(this.picOriginalHeight==0)
    {
        this.picOriginalHeight = curHeight;
        this.picOriginalWidth = curWidth;
    }
    
    if(picOriginalHeight <= curHeight|| picOriginalWidth <= curWidth)
    {
        showErrorMessage("Hinweis","Bitte beachten Sie, dass Sie das Bild nicht grösser als das Original machen können, um einen Qualitätsverlust zu vermeiden");
        return;
    }
    
    
    $('imgPortrait').setStyle(
    {
        width: curWidth*(4/3) + 'px',
        height: curHeight*(4/3) + 'px'
    });
    
    $('Portrait_PosX').value = Element.cumulativeOffset($('imgPortrait')).left;
    $('Portrait_PosY').value = Element.cumulativeOffset($('imgPortrait')).top;
    
    if($('Portrait_PosX').value < 3)
        $('Portrait_PosX').value = 0
        
    $('Portrait_PosY').value = Element.cumulativeOffset($('imgPortrait')).top;
    if($('Portrait_PosY').value < 3)
        $('Portrait_PosY').value = 0
}

function UploadPortrait_Error(errorMessage)
{
    showErrorMessage("Fehler beim hochladen des Bildes",errorMessage);
    $('PortraitUploadStatus').innerHTML = "";
}

function UploadPortrait_Begin()
{
    $('PortraitUploadStatus').innerHTML = "";
    $('Portrait').innerHTML = "";
    var loadingIcon = document.createElement("img");
    loadingIcon.setAttribute("src","img/spinner.gif");
    loadingIcon.setAttribute("alt","Bild wird hochgeladen");
    
    var loadingText = document.createElement("div");
    loadingText.innerHTML = "Bild wird geladen...";
    
    
    $('PortraitUploadStatus').appendChild(loadingIcon);
    
    $('PortraitUploadStatus').appendChild(loadingText);
}

function UploadPortrait_End(PortraitId)
{
    posLeft = 500;
    posTop = 50;
    picWidth = 265;
    picHeight = 340;

    picOriginalHeight = 0;
    picOriginalWidth = 0;

    $('PortraitId').value = PortraitId;
    var portraitPicture  = document.createElement("img");
    portraitPicture.setAttribute("src","Picture.aspx?" + PortraitId)
    portraitPicture.setAttribute("alt","");
    portraitPicture.setAttribute("id","imgPortrait");
    
    $('Portrait').appendChild(portraitPicture);
    $('PortraitUploadStatus').innerHTML = "";
    
    new Draggable('imgPortrait',
    {
        onEnd: function()
        {
            var left = Element.cumulativeOffset($('imgPortrait')).left;
            var top = Element.cumulativeOffset($('imgPortrait')).top;
            
            
            if(left>posLeft)
            {
                $('imgPortrait').setStyle({left:'0px'});
            }
            
            if(posLeft>left+$('imgPortrait').getWidth()-picWidth)
            {
                $('imgPortrait').setStyle({left: picWidth-$('imgPortrait').getWidth() + 'px'});
            }
            
            if(top>posTop)
            {
                $('imgPortrait').setStyle({top:'0px'});
            }
            
            if(posTop>top+$('imgPortrait').getHeight()-picHeight)
            {
                $('imgPortrait').setStyle({top: picHeight-$('imgPortrait').getHeight() + 'px'});
            }
            
            left = Element.cumulativeOffset($('imgPortrait')).left;
            top = Element.cumulativeOffset($('imgPortrait')).top;
            
            $('Portrait_PosX').value = left;
            $('Portrait_PosY').value = top;
            
            //alert(left);
            //$('Help').innerHTML = 500-left;
            
            if($('Portrait_PosX').value < 3)
                $('Portrait_PosX').value = 0
        
            if($('Portrait_PosY').value < 3)
                $('Portrait_PosY').value = 0
        }
    });
}

function btnCancelPreview_Clicked()
{
    $('PreviewFrame').remove();
    $('PreviewButtons').setStyle({display:'none'});
}

function showErrorMessage(title,errorMessage)
{
    if(title == "")
    {
        title = "Fehler";
    }
        
    var errorBg = document.createElement('div');
    errorBg.setAttribute("id","errorBg");
    
    document.body.appendChild(errorBg);


    var errorBox = document.createElement('div');
    errorBox.setAttribute("id","errorBox");
    
    var boxTitle = document.createElement("h1");
    boxTitle.appendChild(document.createTextNode(title));
    
    errorBox.appendChild(boxTitle);
    
    document.body.appendChild(errorBox);
    
    var errorMsg = document.createElement("div");
    errorMsg.innerHTML = errorMessage;
    //errorMsg.appendChild(document.createTextNode(errorMessage));
    
    errorBox.appendChild(errorMsg);
    
    var btnErrOk = document.createElement("input");
    btnErrOk.setAttribute("type","button");
    btnErrOk.setAttribute("value","OK");
    btnErrOk.onclick = function()
    {
        $('errorBg').remove();
        $('errorBox').remove();
    }
    
    errorBox.appendChild(btnErrOk);
    
}

/**
* Returns the value of the selected radio button in the radio group, null if
* none are selected, and false if the button group doesn't exist
*
* @param {radio Object} or {radio id} el
* OR
* @param {form Object} or {form id} el
* @param {radio group name} radioGroup
*/
function $RF(el, radioGroup) {
    var checked = $(el).getInputs('radio', radioGroup).find(
        function(re) {return re.checked;}
    );
    return (checked) ? $F(checked) : null;
}