function position(elem) {
	var element = elem[0];
	var p = {x: (element.offsetLeft) || 0, y:(element.offsetTop) || 0};
        /*while (element = element.offsetParent) {
            p.x += element.offsetLeft;
            p.y += element.offsetTop;
        }*/
        return p;
}


$(document).ready(function() {
	var path = window.location.pathname;
	/*if(path.indexOf("etusivu") != -1 || path.indexOf("frontpage") != -1) {
	if(path == "/test_place/fi_FI/test1/" || path == "/test_place/fi_FI/etusivu_test" || path == "/en/frontpage/en_GB/front_test") {*/
		$("img").each(function(i){
			var cl = $(this).attr('class');
			if(cl == 'iso_puff' || cl == 'iso_puff_vaalea') {
				var a = $(this).parent('a');
				var d = $('<div />');
                                $(this).before(d);
                                d.append($(this));
				var aElem = $('<div />');
				var container = $(this).parent();
				//var alt = $(this).attr('alt');
				var width = $(this).css('width');
				var w = width.split("p")[0];
				var img = $(this).clone();
				var alt = "";
				var alt2 = "";
				if(a.length == 1) {
					aElem = null;
					aElem = a.clone();
					aElem.empty();
					aElem.css('cursor','pointer');
					container = a.parent();
					alt = container.find('.u4-image-caption').text();
					alt2 = alt.replace("|","<br />");
					alt = alt.replace("|","");
				} else {
					var caption = container.siblings('.u4-image-caption');
                                        alt = caption.text();
					alt2 = alt.replace("|","<br />");
					alt = alt.replace("|","");
                                        caption.empty();
				}
				aElem.css({zIndex: '900',margin:'0',padding:'0',display:'block',position:'absolute',top:(img[0].height-60)+'px',height:'60px'});
				if(cl == 'iso_puff_vaalea') {
					aElem.append('<div class="opaq lighter" style="width:'+width+';"></div><h2 class="opaqText" style="width:'+(w-50)+'px;">'+alt2+'</h2>');
                                } else {
					aElem.append('<div class="opaq" style="width:'+width+';"></div><h2 class="opaqText" style="width:'+(w-50)+'px;">'+alt2+'</h2>');
				}
				container.empty();
				container.append(img);
				container.prepend(aElem);
				
				img.css('display','block');
				container.css('position','relative');
				container.css('clear','both');
				
				if(a.length == 1) {
					var e = container.find('.opaqText');
					e.css('background','transparent url(/stc/img/largePuffArrow.png) no-repeat scroll right 15px');
					e.css('padding-right','20px');
					e.css('width',''+(w-70)+'px');
				}
				var f = img.css('float');
                                if(f == 'right' || f == 'left') {
                                        img.css('margin','0 0 12px 0');
				}
				var val = position(img).x+'px';
				aElem.css({left:val,width:width});
				container.find('.opaqText').css('bottom',28-(container.find('.opaqText').height()/2)+'px');
				var f = img.css('float');
				if(f == 'left') {
					d.css('width',width);
				}
			} else if (cl == 'pieni_puff' || cl == 'pieni_puff_vaalea' || cl == 'pieni_puff_sininen') {
				var a = $(this).parent('a');
				var d = $('<div />');
				$(this).before(d);
				d.append($(this));
                                var aElem = $('<div />');
                                var container = $(this).parent();
                                //var alt = $(this).attr('alt');
                                var width = $(this).css('width');
				var w = width.split("p")[0];
                                var img = $(this).clone();
				var alt = "";
				var alt2 = "";
                                if(a.length == 1) {
                                        a.parent().css('padding','0px');
					aElem = null;
                                        aElem = a.clone();
                                        aElem.empty();
					aElem.css('cursor','pointer');
                                        container = a.parent();
					alt = container.find('.u4-image-caption').text();
					alt2 = alt.replace("|","<br />");
                                        alt = alt.replace("|","");
					if(cl == 'pieni_puff_vaalea') {
						aElem.append('<div class="opaq small lighter" style="width:'+width+';"></div><p class="opaqText small img" style="width:'+(w-28)+'px;">'+alt2+'</p>');
					} else if(cl == 'pieni_puff_sininen') {
                                                aElem.append('<div class="opaq small blue" style="width:'+width+';"></div><p class="opaqText small img" style="width:'+(w-28)+'px;">'+alt2+'</p>');
                                        } else {
						aElem.append('<div class="opaq small" style="width:'+width+';"></div><p class="opaqText small img" style="width:'+(w-28)+'px;">'+alt2+'</p>');
					}
                                } else {
					var caption = container.siblings('.u4-image-caption');
					alt = caption.text();
					alt2 = alt.replace("|","<br />");
                                        alt = alt.replace("|","");
					caption.empty();
					if(cl == 'pieni_puff_vaalea') {		
						aElem.append('<div class="opaq small lighter" style="width:'+width+';"></div><p class="opaqText small" style="width:'+(w-5)+'px;">'+alt2+'</p>');
					} else if(cl == 'pieni_puff_sininen') {
                                                aElem.append('<div class="opaq small blue" style="width:'+width+';"></div><p class="opaqText small" style="width:'+(w-5)+'px;">'+alt2+'</p>');
                                        } else {
						aElem.append('<div class="opaq small" style="width:'+width+';"></div><p class="opaqText small" style="width:'+(w-5)+'px;">'+alt2+'</p>');
					}
				}
				aElem.css({zIndex:'900',margin:'0',padding:'0',display:'block',position:'relative',top:img[0].height+'px'});
                                container.empty();
                                container.append(img);
                                container.prepend(aElem);
                                container.css('position','relative');
                                //container.find('.opaqText').css('bottom',6-(container.find('.opaqText').height()/2)+'px');
				container.find('.opaqText').css('bottom','-4px');
				img.css('display','block');
				var val = position(img).x+'px';
                                aElem.css({left:val,width:width});
				container.css('clear','both');
			} else if(cl == 'puff_2' || cl == 'puff_vaalea_2' || cl == 'iso_puff_sininen') {
				var a = $(this).parent('a');
                                var d = $('<div />');
                                $(this).before(d);
                                d.append($(this));
                                var aElem = $('<div />');
                                var container = $(this).parent();
                                var width = $(this).css('width');
                                var w = width.split("p")[0];
                                var img = $(this).clone();
                                var alt = "";
                                var alt2 = "";
                                if(a.length == 1) {
                                        a.parent().css('padding','0px');
                                        aElem = null;
                                        aElem = a.clone();
                                        aElem.empty();
                                        aElem.css('cursor','pointer');
                                        container = a.parent();
                                        alt = container.find('.u4-image-caption').text();
                                        alt2 = alt.replace("|","<br />");
                                        alt = alt.replace("|","");
                                        if(cl == 'puff_vaalea_2') {
                                                aElem.append('<div class="opaq row2 lighter" style="width:'+width+';"></div><p class="opaqText row2 img" style="width:'+(w-28)+'px;">'+alt2+'</p>');
                                        } else if(cl == 'iso_puff_sininen') {
                                                aElem.append('<div class="opaq row2 blue" style="width:'+width+';"></div><p class="opaqText row2 img" style="width:'+(w-28)+'px;">'+alt2+'</p>');						
					} else {
                                                aElem.append('<div class="opaq row2" style="width:'+width+';"></div><p class="opaqText row2 img" style="width:'+(w-28)+'px;">'+alt2+'</p>');
                                        }
                                } else {
                                        var caption = container.siblings('.u4-image-caption');
                                        alt = caption.text();
                                        alt2 = alt.replace("|","<br />");
                                        alt = alt.replace("|","");
                                        caption.empty();
                                        if(cl == 'puff_vaalea_2') {
                                                aElem.append('<div class="opaq row2 lighter" style="width:'+width+';"></div><p class="opaqText row2" style="width:'+(w-16)+'px;">'+alt2+'</p>');
                                        } else if(cl == 'iso_puff_sininen') {
                                                aElem.append('<div class="opaq row2 blue" style="width:'+width+';"></div><p class="opaqText row2" style="width:'+(w-16)+'px;">'+alt2+'</p>');					
					} else {
                                                aElem.append('<div class="opaq row2" style="width:'+width+';"></div><p class="opaqText row2" style="width:'+(w-16)+'px;">'+alt2+'</p>');
                                        }
                                }
                                aElem.css({zIndex:'900',margin:'0',padding:'0',display:'block',position:'relative',top:img[0].height+'px'});
                                container.empty();
				container.append(img);
                                container.prepend(aElem);
                                container.css('position','relative');
                                container.find('.opaqText').css('bottom','-5px');
                                img.css('display','block');
                                var val = position(img).x+'px';
                                aElem.css({left:val,width:width});
                                container.css('clear','both');
			} 
		});
	/*}*/
});