// JavaScript Document

if (!document.myGetElementsByClassName) {
    document.myGetElementsByClassName = function(className) {
        var children = document.getElementsByTagName('*') || document.all;
        var elements = new Array();

        for (var i = 0; i < children.length; i++) {
            var child = children[i];
            var classNames = child.className.split(' ');
            for (var j = 0; j < classNames.length; j++) {
                if (classNames[j] == className) {
                    elements.push(child);
                    break;
                }
            }
        }
        return elements;
    }
}

var Reflection = {
    defaultHeight : 0.5,
    defaultOpacity: 0.5,

    add: function(image, options) {
        Reflection.remove(image);

        doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity }
        if (options) {
            for (var i in doptions) {
                if (!options[i]) {
                    options[i] = doptions[i];
                }
            }
        } else {
            options = doptions;
        }

        try {
            var d = document.createElement('div');
            var p = image;

            var classes = p.className.split(' ');
            var newClasses = '';
            for (j=0;j<classes.length;j++) {
                if (classes[j] != "reflect") {
                    if (newClasses) {
                        newClasses += ' '
                    }

                    newClasses += classes[j];
                }
            }

            var reflectionHeight = Math.floor(p.height*options['height']);
            var divHeight = Math.floor(p.height*(1+options['height']));

            var reflectionWidth = p.width;

            if (document.all && !window.opera) {
                /* Fix hyperlinks */
                if(p.parentElement.tagName == 'A') {
                    var d = document.createElement('a');
                    d.href = p.parentElement.href;
                }

                /* Copy original image's classes & styles to div */
                d.className = newClasses;
                p.className = 'reflected';

                d.style.cssText = p.style.cssText;
                p.style.cssText = 'vertical-align: bottom';

                var reflection = document.createElement('img');
                reflection.src = p.src;
                reflection.style.width = reflectionWidth+'px';
                reflection.style.display = 'block';
                reflection.style.height = p.height+"px";

                reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';
                reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options['height']*100)+')';

                d.style.width = reflectionWidth+'px';
                d.style.height = divHeight+'px';
                p.parentNode.replaceChild(d, p);

                d.appendChild(p);
                d.appendChild(reflection);
            } else {
                var canvas = document.createElement('canvas');
                if (canvas.getContext) {
                    /* Copy original image's classes & styles to div */
                    d.className = newClasses;
                    p.className = 'reflected';

                    d.style.cssText = p.style.cssText;
                    p.style.cssText = 'vertical-align: bottom';

                    var context = canvas.getContext("2d");

                    canvas.style.height = reflectionHeight+'px';
                    canvas.style.width = reflectionWidth+'px';
                    canvas.height = reflectionHeight;
                    canvas.width = reflectionWidth;

                    d.style.width = reflectionWidth+'px';
                    d.style.height = divHeight+'px';
                    p.parentNode.replaceChild(d, p);

                    d.appendChild(p);
                    d.appendChild(canvas);

                    context.save();

                    context.translate(0,image.height-1);
                    context.scale(1,-1);

                    context.drawImage(image, 0, 0, reflectionWidth, image.height);

                    context.restore();

                    context.globalCompositeOperation = "destination-out";
                    var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);

                    gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
                    gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")");

                    context.fillStyle = gradient;
                    context.rect(0, 0, reflectionWidth, reflectionHeight*2);
                    context.fill();
                }
            }
        } catch (e) {
        }
    },

    remove : function(image) {
        if (image.className == "reflected") {
            image.className = image.parentNode.className;
            image.parentNode.parentNode.replaceChild(image, image.parentNode);
        }
    }
}

function addReflections() {
    var rimages = document.myGetElementsByClassName('reflect');
    for (i=0;i<rimages.length;i++) {
        var rheight = null;
        var ropacity = null;

        var classes = rimages[i].className.split(' ');
        for (j=0;j<classes.length;j++) {
            if (classes[j].indexOf("rheight") == 0) {
                var rheight = classes[j].substring(7)/100;
            } else if (classes[j].indexOf("ropacity") == 0) {
                var ropacity = classes[j].substring(8)/100;
            }
        }

        Reflection.add(rimages[i], { height: rheight, opacity : ropacity});
    }
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  addReflections();
  // add other functions here
});


var ixf = { 'clock' : null, 'count' : 1 }

ixf.imgs = [ //이미지 미리 불러오기 등록
    'http://www.blueb.co.kr/SRC/flash/image/01.jpg',
    'http://www.blueb.co.kr/SRC/flash/image/03.jpg',
    'http://www.blueb.co.kr/SRC/flash/image/04.jpg',
    'http://www.blueb.co.kr/SRC/flash/image/06.jpg',
    'http://www.blueb.co.kr/SRC/flash/image/07.jpg',
    ];


ixf.imgsLen = ixf.imgs.length;
ixf.cache = [];
for(var i=0; i<ixf.imgsLen; i++)
{
    ixf.cache[i] = new Image;
    ixf.cache[i].src = ixf.imgs[i];
}

function crossfade()
{
    //if the timer is not already going
    if(ixf.clock == null)
    {
        //copy the image object 
        ixf.obj = arguments[0];
        
        //copy the image src argument 
        ixf.src = arguments[1];
        
        //store the supported form of opacity
        if(typeof ixf.obj.style.opacity != 'undefined')
        {
            ixf.type = 'w3c';
        }
        else if(typeof ixf.obj.style.MozOpacity != 'undefined')
        {
            ixf.type = 'moz';
        }
        else if(typeof ixf.obj.style.KhtmlOpacity != 'undefined')
        {
            ixf.type = 'khtml';
        }
        else if(typeof ixf.obj.filters == 'object')
        {
            //weed out win/ie5.0 by testing the length of the filters collection (where filters is an object with no data)
            //then weed out mac/ie5 by testing first the existence of the alpha object (to prevent errors in win/ie5.0)
            //then the returned value type, which should be a number, but in mac/ie5 is an empty string
            ixf.type = (ixf.obj.filters.length > 0 && typeof ixf.obj.filters.alpha == 'object' && typeof ixf.obj.filters.alpha.opacity == 'number') ? 'ie' : 'none';
        }
        else
        {
            ixf.type = 'none';
        }
        
        //change the image alt text if defined
        if(typeof arguments[3] != 'undefined' && arguments[3] != '')
        {
            ixf.obj.alt = arguments[3];
        }
        
        //if any kind of opacity is supported
        if(ixf.type != 'none')
        {
            //create a new image object and append it to body
            //detecting support for namespaced element creation, in case we're in the XML DOM
            ixf.newimg = document.getElementsByTagName('body')[0].appendChild((typeof document.createElementNS != 'undefined') ? document.createElementNS('http://www.w3.org/1999/xhtml', 'img') : document.createElement('img'));

            //set positioning classname
            ixf.newimg.className = 'idupe';
            
            //set src to new image src
            ixf.newimg.src = ixf.src

            //move it to superimpose original image
            ixf.newimg.style.left = ixf.getRealPosition(ixf.obj, 'x') + 'px';
            ixf.newimg.style.top = ixf.getRealPosition(ixf.obj, 'y') + 'px';
            
            //copy and convert fade duration argument 
            ixf.length = parseInt(arguments[2], 10) * 1000;
            
            //create fade resolution argument as 20 steps per transition
            ixf.resolution = parseInt(arguments[2], 10) * 20;
            
            //start the timer
            ixf.clock = setInterval('ixf.crossfade()', ixf.length/ixf.resolution);
        }
        
        //otherwise if opacity is not supported
        else
        {
            //just do the image swap
            ixf.obj.src = ixf.src;
        }
        
    }
};


//crossfade timer function
ixf.crossfade = function()
{
    //decrease the counter on a linear scale
    ixf.count -= (1 / ixf.resolution);
    
    //if the counter has reached the bottom
    if(ixf.count < (1 / ixf.resolution))
    {
        //clear the timer
        clearInterval(ixf.clock);
        ixf.clock = null;
        
        //reset the counter
        ixf.count = 1;
        
        //set the original image to the src of the new image
        ixf.obj.src = ixf.src;
    }
    
    //set new opacity value on both elements
    //using whatever method is supported
    switch(ixf.type)
    {
        case 'ie' :
            ixf.obj.filters.alpha.opacity = ixf.count * 100;
            ixf.newimg.filters.alpha.opacity = (1 - ixf.count) * 100;
            break;
            
        case 'khtml' :
            ixf.obj.style.KhtmlOpacity = ixf.count;
            ixf.newimg.style.KhtmlOpacity = (1 - ixf.count);
            break;
            
        case 'moz' : 
            //restrict max opacity to prevent a visual popping effect in firefox
            ixf.obj.style.MozOpacity = (ixf.count == 1 ? 0.9999999 : ixf.count);
            ixf.newimg.style.MozOpacity = (1 - ixf.count);
            break;
            
        default : 
            //restrict max opacity to prevent a visual popping effect in firefox
            ixf.obj.style.opacity = (ixf.count == 1 ? 0.9999999 : ixf.count);
            ixf.newimg.style.opacity = (1 - ixf.count);
    }
    
    //now that we've gone through one fade iteration 
    //we can show the image that's fading in
    ixf.newimg.style.visibility = 'visible';
    
    //keep new image in position with original image
    //in case text size changes mid transition or something
    ixf.newimg.style.left = ixf.getRealPosition(ixf.obj, 'x') + 'px';
    ixf.newimg.style.top = ixf.getRealPosition(ixf.obj, 'y') + 'px';
    
    //if the counter is at the top, which is just after the timer has finished
    if(ixf.count == 1)
    {
        //remove the duplicate image
        ixf.newimg.parentNode.removeChild(ixf.newimg);
    }
};



//get real position method
ixf.getRealPosition = function()
{
    this.pos = (arguments[1] == 'x') ? arguments[0].offsetLeft : arguments[0].offsetTop;
    this.tmp = arguments[0].offsetParent;
    while(this.tmp != null)
    {
        this.pos += (arguments[1] == 'x') ? this.tmp.offsetLeft : this.tmp.offsetTop;
        this.tmp = this.tmp.offsetParent;
    }
    
    return this.pos;
};