function HTextElement(data,parentContainer,globalData,comp, placeholder){
    this.textSpans = [];
    this.textPaths = [];
    this.currentBBox = {
        x:999999,
        y: -999999,
        h: 0,
        w: 0
    }
    this.renderType = 'svg';
    this.isMasked = false;
    this._parent.constructor.call(this,data,parentContainer,globalData,comp, placeholder);

}
createElement(HBaseElement, HTextElement);

HTextElement.prototype.init = ITextElement.prototype.init;
HTextElement.prototype.createPathShape = ITextElement.prototype.createPathShape;
HTextElement.prototype.prepareFrame = ITextElement.prototype.prepareFrame;
HTextElement.prototype.buildShapeString = ITextElement.prototype.buildShapeString;

HTextElement.prototype.createElements = function(){
    this.isMasked = this.checkMasks();
    var parent = document.createElement('div');
    styleDiv(parent);
    this.layerElement = parent;
    this.transformedElement = parent;
    if(this.isMasked){
        this.renderType = 'svg';
        var cont = document.createElementNS(svgNS,'svg');
        styleDiv(cont);
        this.cont = cont;
        this.compW = this.comp.data.w;
        this.compH = this.comp.data.h;
        cont.setAttribute('width',this.compW);
        cont.setAttribute('height',this.compH);
        var g = document.createElementNS(svgNS,'g');
        cont.appendChild(g);
        parent.appendChild(cont);
        this.maskedElement = g;
        this.innerElem = g;
    } else {
        this.renderType = 'html';
        this.innerElem = parent;
    }
    this.baseElement = parent;

    this.checkParenting();

};

HTextElement.prototype.buildNewText = function(){
    var documentData = this.currentTextDocumentData;
    this.renderedLetters = Array.apply(null,{length:this.currentTextDocumentData.l ? this.currentTextDocumentData.l.length : 0});
    if(documentData.fc) {
        this.innerElem.style.color = this.innerElem.style.fill = 'rgb(' + Math.round(documentData.fc[0]*255) + ',' + Math.round(documentData.fc[1]*255) + ',' + Math.round(documentData.fc[2]*255) + ')';
        ////this.innerElem.setAttribute('fill', 'rgb(' + documentData.fc[0] + ',' + documentData.fc[1] + ',' + documentData.fc[2] + ')');
    }else{
        this.innerElem.style.color = this.innerElem.style.fill = 'rgba(0,0,0,0)';
        ////this.innerElem.setAttribute('fill', 'rgba(0,0,0,0)');
    }
    if(documentData.sc){
        ////this.innerElem.setAttribute('stroke', 'rgb(' + documentData.sc[0] + ',' + documentData.sc[1] + ',' + documentData.sc[2] + ')');
        this.innerElem.style.stroke = 'rgb(' + Math.round(documentData.sc[0]*255) + ',' + Math.round(documentData.sc[1]*255) + ',' + Math.round(documentData.sc[2]*255) + ')';
        ////this.innerElem.setAttribute('stroke-width', documentData.sw);
        this.innerElem.style.strokeWidth = documentData.sw+'px';
    }
    ////this.innerElem.setAttribute('font-size', documentData.s);
    var fontData = this.globalData.fontManager.getFontByName(documentData.f);
    if(!this.globalData.fontManager.chars){
        this.innerElem.style.fontSize = documentData.s+'px';
        this.innerElem.style.lineHeight = documentData.s+'px';
        if(fontData.fClass){
            this.innerElem.className = fontData.fClass;
        } else {
            ////this.innerElem.setAttribute('font-family', fontData.fFamily);
            this.innerElem.style.fontFamily = fontData.fFamily;
            var fWeight = documentData.fWeight, fStyle = documentData.fStyle;
            ////this.innerElem.setAttribute('font-style', fStyle);
            this.innerElem.style.fontStyle = fStyle;
            ////this.innerElem.setAttribute('font-weight', fWeight);
            this.innerElem.style.fontWeight = fWeight;
        }
    }
    var i, len;

    var letters = documentData.l;
    len = letters.length;
    var tSpan,tParent,tCont;
    var matrixHelper = this.mHelper;
    var shapes, shapeStr = '';
    var cnt = 0;
    for (i = 0;i < len ;i += 1) {
        if(this.globalData.fontManager.chars){
            if(!this.textPaths[cnt]){
                tSpan = document.createElementNS(svgNS,'path');
                tSpan.setAttribute('stroke-linecap', 'butt');
                tSpan.setAttribute('stroke-linejoin','round');
                tSpan.setAttribute('stroke-miterlimit','4');
            } else {
                tSpan = this.textPaths[cnt];
            }
            if(!this.isMasked){
                if(this.textSpans[cnt]){
                    tParent = this.textSpans[cnt];
                    tCont = tParent.children[0];
                } else {

                    tParent = document.createElement('div');
                    tCont = document.createElementNS(svgNS,'svg');
                    tCont.appendChild(tSpan);
                    styleDiv(tParent);
                }
            }
        }else{
            if(!this.isMasked){
                if(this.textSpans[cnt]){
                    tParent = this.textSpans[cnt];
                    tSpan = this.textPaths[cnt];
                } else {
                    tParent = document.createElement('span');
                    styleDiv(tParent);
                    tSpan = document.createElement('span');
                    styleDiv(tSpan);
                    tParent.appendChild(tSpan);
                }
            } else {
                tSpan = this.textPaths[cnt] ? this.textPaths[cnt] : document.createElementNS(svgNS,'text');
            }
        }
        //tSpan.setAttribute('visibility', 'hidden');
        if(this.globalData.fontManager.chars){
            var charData = this.globalData.fontManager.getCharData(documentData.t.charAt(i), fontData.fStyle, this.globalData.fontManager.getFontByName(documentData.f).fFamily);
            var shapeData;
            if(charData){
                shapeData = charData.data;
            } else {
                shapeData = null;
            }
            matrixHelper.reset();
            if(shapeData && shapeData.shapes){
                shapes = shapeData.shapes[0].it;
                matrixHelper.scale(documentData.s/100,documentData.s/100);
                shapeStr = this.createPathShape(matrixHelper,shapes);
                tSpan.setAttribute('d',shapeStr);
            }
            if(!this.isMasked){
                this.innerElem.appendChild(tParent);
                if(shapeData && shapeData.shapes){
                    document.body.appendChild(tCont);

                    var boundingBox = tCont.getBBox();
                    tCont.setAttribute('width',boundingBox.width + 2);
                    tCont.setAttribute('height',boundingBox.height + 2);
                    tCont.setAttribute('viewBox',(boundingBox.x-1)+' '+ (boundingBox.y-1)+' '+ (boundingBox.width+2)+' '+ (boundingBox.height+2));
                    tCont.style.transform = tCont.style.webkitTransform = 'translate(' + (boundingBox.x-1) + 'px,' + (boundingBox.y-1) + 'px)';

                    letters[i].yOffset = boundingBox.y-1;
                    tParent.appendChild(tCont);

                } else{
                    tCont.setAttribute('width',1);
                    tCont.setAttribute('height',1);
                }
            }else{
                this.innerElem.appendChild(tSpan);
            }
        }else{
            tSpan.textContent = letters[i].val;
            tSpan.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space","preserve");
            if(!this.isMasked){
                this.innerElem.appendChild(tParent);
                //
                tSpan.style.transform = tSpan.style.webkitTransform = 'translate3d(0,'+ -documentData.s/1.2+'px,0)';
            } else {
                this.innerElem.appendChild(tSpan);
            }
        }
        //
        if(!this.isMasked){
            this.textSpans[cnt] = tParent;
        }else{
            this.textSpans[cnt] = tSpan;
        }
        this.textSpans[cnt].style.display = 'block';
        this.textPaths[cnt] = tSpan;
        cnt += 1;
    }
    while(cnt < this.textSpans.length){
        this.textSpans[cnt].style.display = 'none';
        cnt += 1;
    }
}

HTextElement.prototype.hide = SVGTextElement.prototype.hide;

HTextElement.prototype.renderFrame = function(parentMatrix){

    var renderParent = this._parent.renderFrame.call(this,parentMatrix);
    if(renderParent===false){
        this.hide();
        return;
    }
    if(this.hidden){
        this.hidden = false;
        this.innerElem.style.display = 'block';
        this.layerElement.style.display = 'block';
    }

    if(this.data.singleShape){
        if(!this.firstFrame && !this.lettersChangedFlag){
            return;
        } else {
            // Todo Benchmark if using this is better than getBBox
             if(this.isMasked && this.finalTransform.matMdf){
                 this.cont.setAttribute('viewBox',-this.finalTransform.mProp.p.v[0]+' '+ -this.finalTransform.mProp.p.v[1]+' '+this.compW+' '+this.compH);
                this.cont.style.transform = this.cont.style.webkitTransform = 'translate(' + -this.finalTransform.mProp.p.v[0] + 'px,' + -this.finalTransform.mProp.p.v[1] + 'px)';
             }
        }
    }

    this.textAnimator.getMeasures(this.currentTextDocumentData, this.lettersChangedFlag);
    if(!this.lettersChangedFlag && !this.textAnimator.lettersChangedFlag){
        return;
    }
    var  i,len, count = 0;
    var renderedLetters = this.textAnimator.renderedLetters;

    var letters = this.currentTextDocumentData.l;

    len = letters.length;
    var renderedLetter;
    for(i=0;i<len;i+=1){
        if(letters[i].n){
            continue;
        }
        renderedLetter = renderedLetters[count];
        count += 1;
        if(!this.isMasked){
            this.textSpans[i].style.transform = this.textSpans[i].style.webkitTransform = renderedLetter.m;
        }else{
            this.textSpans[i].setAttribute('transform',renderedLetter.m);
        }
        ////this.textSpans[i].setAttribute('opacity',renderedLetter.o);
        this.textSpans[i].style.opacity = renderedLetter.o;
        if(renderedLetter.sw){
            this.textPaths[i].setAttribute('stroke-width',renderedLetter.sw);
        }
        if(renderedLetter.sc){
            this.textPaths[i].setAttribute('stroke',renderedLetter.sc);
        }
        if(renderedLetter.fc){
            this.textPaths[i].setAttribute('fill',renderedLetter.fc);
            this.textPaths[i].style.color = renderedLetter.fc;
        }
    }
    if(this.isVisible && (this.elemMdf || this.firstFrame)){
        if(this.innerElem.getBBox){
            var boundingBox = this.innerElem.getBBox();

            if(this.currentBBox.w !== boundingBox.width){
                this.currentBBox.w = boundingBox.width;
                this.cont.setAttribute('width',boundingBox.width);
            }
            if(this.currentBBox.h !== boundingBox.height){
                this.currentBBox.h = boundingBox.height;
                this.cont.setAttribute('height',boundingBox.height);
            }

            var margin = 1;
            if(this.currentBBox.w !== (boundingBox.width + margin*2) || this.currentBBox.h !== (boundingBox.height + margin*2)  || this.currentBBox.x !== (boundingBox.x - margin)  || this.currentBBox.y !== (boundingBox.y - margin)){
                this.currentBBox.w = boundingBox.width + margin*2;
                this.currentBBox.h = boundingBox.height + margin*2;
                this.currentBBox.x = boundingBox.x - margin;
                this.currentBBox.y = boundingBox.y - margin;

                this.cont.setAttribute('viewBox',this.currentBBox.x+' '+this.currentBBox.y+' '+this.currentBBox.w+' '+this.currentBBox.h);
                this.cont.style.transform = this.cont.style.webkitTransform = 'translate(' + this.currentBBox.x + 'px,' + this.currentBBox.y + 'px)';
            }
        }
    }
    if(this.firstFrame){
        this.firstFrame = false;
    }
}


HTextElement.prototype.destroy = SVGTextElement.prototype.destroy;