\n<script type=\"text/javascript\">\n (function () {\n var WIDTH = 655;\n var HEIGHT = 120;\n var IMG_WIDTH = 240;\n\n var TARGET_WIDTH = WIDTH - IMG_WIDTH;\n var TARGET_HEIGHT = HEIGHT;\n var SCALE_X = 3;\n var SCALE_Y = 3;\n var OFFSET_X = (IMG_WIDTH * SCALE_X - TARGET_WIDTH) / 2;\n var OFFSET_Y = HEIGHT;\n var BLUR_RADIUS = 25;\n\n var VALUE_THRESHOLD = 0.6;\n\n try {\n var imgThumb = document.querySelector('.img_thumb');\n\n if (isCrossOriginImage(imgThumb.src)) {\n loadTenthImage(imgThumb.src, applyEffect);\n } else if (imgThumb.complete) {\n applyEffect(imgThumb);\n } else {\n imgThumb.addEventListener('load', function () {\n applyEffect(imgThumb);\n });\n }\n } catch (e) { \n }\n\n function isCrossOriginImage(imageUrl) {\n return imageUrl.indexOf(window.location.origin) !== 0;\n }\n\n function isThumbnailUrl(imageUrl) {\n return /^(https?:\\/\\/)?[a-zA-Z0-9.-]*(daumcdn|kakaocdn)\\.net\\/thumb\\//i.test(imageUrl);\n }\n\n function loadTenthImage(imageUrl, callback) {\n var image = document.createElement('img');\n var tenthUrl = window.location.origin + '/thumb/';\n\n image.crossOrigin = 'Anonymous';\n image.addEventListener('load', function () {\n if (typeof callback === 'function') {\n callback(image);\n }\n });\n\n if (isThumbnailUrl(imageUrl)) {\n var fnameIndex = imageUrl.indexOf('/?fname=');\n var fname = imageUrl.substring(fnameIndex);\n var optionIndex = imageUrl.indexOf('/thumb/') + '/thumb/'.length;\n var option = imageUrl.substring(optionIndex, fnameIndex);\n image.src = tenthUrl + option + fname;\n } else {\n image.src = tenthUrl + '@1x/?fname=' + encodeURIComponent(imageUrl);\n }\n }\n\n function applyEffect(image) {\n var imgBlur = document.querySelector('.img_blur');\n drawStackBlurredImage(imgBlur, image, IMG_WIDTH, HEIGHT, TARGET_WIDTH, TARGET_HEIGHT, SCALE_X, SCALE_Y, OFFSET_X, OFFSET_Y, BLUR_RADIUS);\n\n var blurredImageData = imgBlur.getContext('2d').getImageData(0, 0, imgBlur.width, imgBlur.height);\n var averageRGB = getAverageRGB(blurredImageData);\n var averageHSV = getHSVfromRGB(averageRGB);\n\n if (averageHSV.v >= VALUE_THRESHOLD) {\n document.querySelector('.blur_img').classList.add('show');\n }\n }\n\n function drawStackBlurredImage(canvas, image, imageWidth, imageHeight, targetWidth, targetHeight, scaleX, scaleY, offsetX, offsetY, radius) {\n var ctx = canvas.getContext('2d');\n\n var blurX = Math.floor(offsetX / scaleX);\n var blurY = Math.floor(offsetY / scaleY);\n var blurWidth = Math.floor(targetWidth / scaleX);\n var blurHeight = Math.floor(targetHeight / scaleY);\n\n canvas.width = blurWidth;\n canvas.height = blurHeight;\n\n ctx.drawImage(image, -blurX, -blurY, imageWidth, imageHeight);\n\n var blurredImageData = getStackBlurredImageData(ctx, blurWidth, blurHeight, 0, 0, blurWidth, blurHeight, radius);\n\n ctx.putImageData(blurredImageData, 0, 0);\n }\n\n function getStackBlurredImageData(ctx, width, height, blurX, blurY, blurWidth, blurHeight, radius) {\n var imageData1 = ctx.getImageData(0, 0, width, height);\n var imageData2 = ctx.getImageData(0, 0, width, height);\n\n applyUniDirectionalStackBlur(imageData1, imageData2, blurX, blurY, blurWidth, blurHeight, radius, false);\n applyUniDirectionalStackBlur(imageData2, imageData1, blurX, blurY, blurWidth, blurHeight, radius, true);\n\n return imageData1;\n }\n\n function applyUniDirectionalStackBlur(imageData, targetImageData, blurX, blurY, blurWidth, blurHeight, radius, transpose) {\n var imageDataReader = ImageDataReader(imageData, transpose);\n var targetImageDataReader = ImageDataReader(targetImageData, transpose);\n\n if (transpose) {\n var temp = blurX;\n blurX = blurY;\n blurY = temp;\n\n temp = blurWidth;\n blurWidth = blurHeight;\n blurHeight = temp;\n }\n\n var stack;\n var x, y;\n for (y = blurY; y < blurY + blurHeight; ++y) {\n stack = createStack(imageDataReader, radius, blurX, y);\n for (x = blurX; x < blurX + blurWidth; ++x) {\n targetImageDataReader.setPixel(x, y, [\n Math.floor(stack.stack[0] / stack.stackSize),\n Math.floor(stack.stack[1] / stack.stackSize),\n Math.floor(stack.stack[2] / stack.stackSize),\n Math.floor(stack.stack[3] / stack.stackSize)\n ]);\n stack.next();\n }\n }\n }\n\n function clip(value, minInclusive, maxInclusive) {\n return Math.min(Math.max(value, minInclusive), maxInclusive);\n }\n\n function ImageDataReader(imageData, transpose) {\n var width = transpose ? imageData.height : imageData.width;\n var height = transpose ? imageData.width : imageData.height;\n\n var getPixel = transpose ? function (x, y) {\n var clippedX = clip(x, 0, width - 1);\n var clippedY = clip(y, 0, height - 1);\n var pixelIndex = height * 4 * clippedX + clippedY * 4;\n return [\n imageData.data[pixelIndex],\n imageData.data[pixelIndex + 1],\n imageData.data[pixelIndex + 2],\n imageData.data[pixelIndex + 3]\n ];\n } : function (x, y) {\n var clippedX = clip(x, 0, width - 1);\n var clippedY = clip(y, 0, height - 1);\n var pixelIndex = width * 4 * clippedY + clippedX * 4;\n return [\n imageData.data[pixelIndex],\n imageData.data[pixelIndex + 1],\n imageData.data[pixelIndex + 2],\n imageData.data[pixelIndex + 3]\n ];\n };\n\n var setPixel = transpose ? function (x, y, pixel) {\n var clippedX = clip(x, 0, width - 1);\n var clippedY = clip(y, 0, height - 1);\n var pixelIndex = height * 4 * clippedX + clippedY * 4;\n imageData.data[pixelIndex] = pixel[0];\n imageData.data[pixelIndex + 1] = pixel[1];\n imageData.data[pixelIndex + 2] = pixel[2];\n imageData.data[pixelIndex + 3] = pixel[3];\n } : function (x, y, pixel) {\n var clippedX = clip(x, 0, width - 1);\n var clippedY = clip(y, 0, height - 1);\n var pixelIndex = width * 4 * clippedY + clippedX * 4;\n imageData.data[pixelIndex] = pixel[0];\n imageData.data[pixelIndex + 1] = pixel[1];\n imageData.data[pixelIndex + 2] = pixel[2];\n imageData.data[pixelIndex + 3] = pixel[3];\n };\n\n return {width: width, height: height, getPixel: getPixel, setPixel: setPixel};\n }\n\n function createStack(imageDataReader, radius, x, y) {\n var i, j;\n\n var stack = [0, 0, 0, 0];\n var leftDiagonal = [0, 0, 0, 0];\n var rightDiagonal = [0, 0, 0, 0];\n\n var stackWeights = new Array(radius * 2 + 1);\n for (i = 0; i <= radius; ++i) {\n stackWeights[i] = i + 1;\n stackWeights[stackWeights.length - 1 - i] = i + 1;\n }\n var stackSize = stackWeights.reduce(function (prev, curr) {\n return prev + curr;\n }, 0);\n\n var pixel, pixelX;\n for (i = 0; i <= radius; ++i) {\n pixelX = x - radius + i;\n pixel = imageDataReader.getPixel(pixelX, y);\n for (j = 0; j < 4; ++j) {\n stack[j] += pixel[j] * stackWeights[i];\n leftDiagonal[j] += pixel[j];\n }\n }\n\n for (i = radius + 1; i <= radius * 2; ++i) {\n pixelX = x - radius + i;\n pixel = imageDataReader.getPixel(pixelX, y);\n for (j = 0; j < 4; ++j) {\n stack[j] += pixel[j] * stackWeights[i];\n rightDiagonal[j] += pixel[j];\n }\n }\n\n pixelX = x - radius + i;\n pixel = imageDataReader.getPixel(pixelX, y);\n for (j = 0; j < 4; ++j) {\n rightDiagonal[j] += pixel[j];\n }\n\n var currentX = x;\n var next = function () {\n var leftDiagonalLeftX = currentX - radius;\n var leftDiagonalLeftPixel = imageDataReader.getPixel(leftDiagonalLeftX, y);\n\n var nextPixelX = currentX + 1;\n var nextPixel = imageDataReader.getPixel(nextPixelX, y);\n\n var rightDiagonalNextX = currentX + radius + 1;\n var rightDiagonalNextPixel = imageDataReader.getPixel(rightDiagonalNextX, y);\n\n for (var i = 0; i < 4; ++i) {\n stack[i] = stack[i] - leftDiagonal[i] + rightDiagonal[i];\n leftDiagonal[i] = leftDiagonal[i] - leftDiagonalLeftPixel[i] + nextPixel[i];\n rightDiagonal[i] = rightDiagonal[i] - nextPixel[i] + rightDiagonalNextPixel[i];\n }\n currentX += 1;\n };\n\n return {stack: stack, leftDiagonal: leftDiagonal, rightDiagonal: rightDiagonal, stackSize: stackSize, next: next};\n }\n\n function getAverageRGB(imageData) {\n var redTotal = 0;\n var greenTotal = 0;\n var blueTotal = 0;\n\n var rgb = {r: 0, g: 0, b: 0, a: 1};\n\n var count = imageData.data.length;\n\n for (var i = 0; i < count; i = i + 4) {\n redTotal += imageData.data[i];\n greenTotal += imageData.data[i + 1];\n blueTotal += imageData.data[i + 2];\n }\n\n rgb.r = ~~(redTotal * 4 / count);\n rgb.g = ~~(greenTotal * 4 / count);\n rgb.b = ~~(blueTotal * 4 / count);\n\n return rgb;\n }\n\n function mod(n, m) {\n return ((n % m) + m) % m;\n }\n\n function getHSVfromRGB(rgb) {\n var r = rgb.r / 255;\n var g = rgb.g / 255;\n var b = rgb.b / 255;\n\n var v = Math.max(r, g, b);\n var diff = v - Math.min(r, g, b);\n var s = v === 0 ? 0 : diff / v;\n var h;\n\n if (diff === 0) {\n h = 0;\n } else if (v === r) {\n h = 60 * mod(((g - b) / diff), 6);\n } else if (v === g) {\n h = 60 * (((b - r) / diff) + 2);\n } else {\n h = 60 * (((r - g) / diff) + 4);\n }\n\n return {s: s, v: v, h: h};\n }\n })();\n</script>\n\n