function ShowEduTask4(id)
{
    TaskId = id;
    MakeDataRequest(Handler4, 4);
}

function Handler4(data)
{
	//window.document.body.children.Maindv.children.workdv.children
    // javascript:x=document.body.innerHTML.replace(/</g,'&lt;').replace(/\n/g,'<br>');%20document.body.innerHTML%20=%20x;
    
    var sRussianLetters = "уеыаоэяию";
	
    var oAnswersDiv = ShowContent(data, ButtonHandler4);
    
    /*
    alert(data.getAttribute('content'));
    oAnswersDiv.innerHTML = data.getAttribute('content');
    alert(oAnswersDiv.innerHTML);
    
    Two alerts are not the same in IE if the first tag is <w>
    alert1: <w>blablbla</w> blablablablabla...
    alert2: blablabla</w> blablablablabla...
    */
    
    
    var sContentHtml = data.getAttribute('content');
    sContentHtml = sContentHtml.replace(/<w>(.*?)<\/w>/ig, '<span class="WordSpan">$1</span>');
    
    oAnswersDiv.innerHTML = sContentHtml;
    
    var aSpans = oAnswersDiv.getElementsByTagName('span');
    var aWords = new Array();
    for( var i = 0; i < aSpans.length; i++ )
    {
        if( aSpans[i].className == 'WordSpan' )
        {
            aWords.push( aSpans[i] );
        }
    }
    
    oAnswersDiv.words = aWords;
    
    var iWordId = 1;
    for( var i = 0; i < aWords.length; i++ )
    {
    	var oCurWord = aWords[i];
        
        oCurWord.innerHTML = oCurWord.innerHTML.replace(/([уеыаоэяию])/gi, '<span wordId="' + iWordId + '" class="letter">$1<span>\'</span></span>');
    	
        var aSpans = oCurWord.getElementsByTagName('span');
        
        var aLetters = new Array();
        for( var j = 0; j < aSpans.length; j++ )
        {
            if( aSpans[j].className == 'letter' )
            {
                aLetters.push( aSpans[j] );
            }
        }

        for( var j = 0; j < aLetters.length; j++ )
        {
            var oCurLetter = aLetters[j];
            oCurLetter.setAttribute('value', j + 1);
            oCurLetter.onmouseover = function() { addCssClass(this, 'active'); }
            oCurLetter.onmouseout = function() { deleteCssClass(this, 'active'); }
            oCurLetter.letters = aLetters;
            oCurLetter.letterNum = j;
            oCurLetter.onclick = function() { 
            
                if( this.onmouseover == null )
                {
                    this.onmouseover = function() { addCssClass(this, 'active'); }
                    this.onmouseout = function() { deleteCssClass(this, 'active'); }
                    deleteCssClass(this, 'active');
                }
                else
                {
                    this.onmouseover = null;
                    this.onmouseout = null;
                    for( var i = 0; i < this.letters.length; i++ )
                    {
                        if( i == this.letterNum )
                        {
                            continue;
                        }
                        deleteCssClass(this.letters[i], 'active');
                        this.letters[i].onmouseover = function() { addCssClass(this, 'active'); }
                        this.letters[i].onmouseout = function() { deleteCssClass(this, 'active'); }
                    }
                }
            }
        }
    	iWordId++;
    }
}

function ButtonHandler4()
{

    var aWords = document.getElementById('VariantDiv').words;
    
    var aAnswer = new Array();
    
    for( var i = 0; i < aWords.length; i++ )
    {
        aAnswer[i] = "0";
        var oCurWord = aWords[i];
        
        var aSpans = oCurWord.getElementsByTagName('span');
        
        var aLetters = new Array();
        for( var j = 0; j < aSpans.length; j++ )
        {
            if( isCssClassExists(aSpans[j], 'letter') && isCssClassExists(aSpans[j], 'active') )
            {
                aAnswer[i] = aSpans[j].getAttribute('value');
            }
        }
    }
    
    if( aAnswer.indexOf("0") == -1 )
    {
        var sAnswer = aAnswer.join(',');
        SendReply(sAnswer);
    }
    else
    {
        alert('Отметьте, пожалуйста, все слова');
    }
}
