function addListener(o, event, handler) {
	if(o.addEventListener)
		o.addEventListener(event, handler, false);
	else if(o.attachEvent)
		o.attachEvent('on' + event, handler);
}
function setStyleProperty(e, name, value) {
	e.style[name] = value;
//	if(e.style.setProperty)
//		e.style.setProperty(name, value, null);
//	else if(e.style.setAttribute)
//		e.style.setAttribute(name, value);
}
function setVisibility(e, value) {
//     e.style.visibility = value? 'visible' : 'hidden';
    if (e) {
        if (e.style.setProperty)
            e.style.setProperty('visibility', value ? 'visible' : 'hidden', null);
        else if (e.style.setAttribute)
            e.style.setAttribute('visibility', value ? 'visible' : 'hidden');
    }
}
function getStyleProperty(e, name) {
	if(e.style.getPropertyValue)
		return e.style.getPropertyValue(name);
	else if(e.style.getAttribute)
		return e.style.getAttribute(name);
}
function getClientWidth() {
	if(window.innerWidth)
		return window.innerWidth;
	else return document.documentElement.clientWidth;
}
function getClientHeight() {
	if(window.innerHeight)
		return window.innerHeight;
	else return document.documentElement.clientHeight;
}
function getSwf(id) {
    return swfobject.getObjectById('flash' + id.substring(id.length - 1));
	//return document.getElementById('flash' + id.substring(id.length-1))
}
function pause(e)  {
	var swf = getSwf(e.id);
	try {
		swf.GotoFrame(9);
    } catch (ex) { }
    setVisibility(swf, false);
}
function resume(e)  {
	var swf = getSwf(e.id);
	try {
		swf.GotoFrame(19);
	} catch(ex) { }
	setVisibility(swf, true);
}

function showVideo(index) {
	if(!videoboxes)
		return;
	for(var i=videoboxes.length-1; i>=0; --i) {
	    setVisibility(videoboxes[i], i == index);
		if(i!=index)
			pause(videoboxes[i]);
    }
    if (videoboxes[index].children)
        setVisibility(videoboxes[index].children[0], true);
    else {
        try {
            setVisibility(videoboxes[index].getElementsByTagName('img')[0], true);
        } catch (ex) {
        }
    }
    setVisibility(bgfade, true);
	resume(videoboxes[index]);
}
function closeVideo() {
	if(!videoboxes)
		return;
	for(var i=videoboxes.length-1; i>=0; --i) {
		var vb = videoboxes[i];
		setVisibility(vb, false);
		if (vb.children)
		    setVisibility(vb.children[0], false);
		else
		    setVisibility(vb.getElementsByTagName('img')[0], false);
		pause(vb);
    }
    setVisibility(bgfade, false);
	ospercent = {x:50, y:50};
}

var videoboxes;
var bgfade;
var offset = {x:0, y:0, active:false, timestamp:0};
var ospercent = {x:50, y:50};
var setCoords = function(videobox) {
    vidWidth = videobox.children ? videobox.children[0].clientWidth : videobox.childNodes[1].attributes["width"].value;
    vidHeight = videobox.children ? videobox.children[0].clientHeight : videobox.childNodes[1].attributes["height"].value;
    videobox.style.left = ((getClientWidth() - vidWidth) * (ospercent.x / 100)) + 'px';
    videobox.style.top = ((getClientHeight() - vidHeight) * (ospercent.x / 100)) + 'px';
};

function setAllCoords() {
	if(videoboxes) {
		for(i=videoboxes.length-1; i>=0; --i) {
			setCoords(videoboxes[i]);
		}
	}
}

addListener(window, 'load', function() {
    if (!document.getElementsByClassName) {
        document.getElementsByClassName = function(className, parentElement) {
            if (document._getElementsByXPath) {
                var q = ".//*[contains(concat(' ', @class, ' '), ' " + className + " ')]";
                return document._getElementsByXPath(q, parentElement);
            } else {
                var children = ((parentElement) || document.body).getElementsByTagName('*');
                var elements = [], child;
                for (var i = 0, length = children.length; i < length; i++) {
                    child = children[i];
                    if (child.className == className)
                        elements.push(child);
                }
                return elements;
            }
        };
    }
    videoboxes = document.getElementsByClassName('videobox');

    bgfade = document.getElementById('bgfade');
    var videobox;
    var mouse_down = function(e) {
        e.cancelBubble = true;
        if (e.preventDefault)
            e.preventDefault();
        var top, left;
        videobox = e.srcElement;
        while (videobox && videobox.className != 'videobox') {
            videobox = videobox.parentElement;
        }
        if (!videobox)
            videobox = e.currentTarget;
        top = getStyleProperty(videobox, 'top');
        top = top.substring(0, top.length - 2) / 1;
        left = getStyleProperty(videobox, 'left');
        left = left.substring(0, left.length - 2) / 1;
        offset.x = e.clientX - left;
        offset.y = e.clientY - top;
        offset.activebox = videobox;
        offset.timestamp = new Date().getTime();
        return false;
    };
    for (var i = videoboxes.length - 1; i >= 0; --i) {
        videobox = videoboxes[i];
        setCoords(videobox);
        addListener(videobox, 'mousedown', mouse_down);
        var overlay = videobox.getElementsByTagName('div')[0];
        var flashvars = {
            videofile: overlay.getAttribute('file'),
            autoplay: "true",
            loop: "false",
            endfunction: "closeVideo()",
            buffertime: "5",
            vidwidth: overlay.getAttribute('width'),
            vidheight: overlay.getAttribute('height')
        };
        var params = { wmode: "transparent", allowScriptAccess: "always" };
        var attributes = { id: overlay.id, "class": overlay.className, "style": "visibility:hidden;" };
        //var filename = "player.swf?" + new Date().getTime();
        swfobject.embedSWF("player.swf", overlay.id, "330", "480", "9.0.0", null, flashvars, params, attributes);
    }
    closeVideo();
    addListener(document, 'mousemove', function(e) {
        if (offset.activebox) {
            e.cancelBubble = true;
            var x = (e.clientX - offset.x);
            var y = (e.clientY - offset.y);
            if (x < 0) x = 0;
            else {
                var x1 = (getClientWidth() - offset.activebox.clientWidth);
                if (x > x1) x = x1;
            }
            if (y < 0) y = 0;
            else {
                var y1 = (getClientHeight() - offset.activebox.clientHeight);
                if (y > y1) y = y1;
            }
            offset.activebox.style.left = x + 'px';
            offset.activebox.style.top = y + 'px';
            return false;
        }
    });
    addListener(document, 'mouseup', function(e) {
        if (offset.activebox) {
            var top, left;
            top = getStyleProperty(offset.activebox, 'top');
            top = top.substring(0, top.length - 2) / 1;
            left = getStyleProperty(offset.activebox, 'left');
            left = left.substring(0, left.length - 2) / 1;
            ospercent.x = (left * 100) / (getClientWidth() - offset.activebox.clientWidth);
            ospercent.y = (top * 100) / (getClientHeight() - offset.activebox.clientHeight);
            if (ospercent.x < 0) ospercent.x = 0;
            if (ospercent.y < 0) ospercent.y = 0;
            offset.activebox = false;
            if (new Date().getTime() - offset.timestamp < 300) {
                closeVideo();
            }
        }
    });
    addListener(bgfade, 'click', function(e) {
        closeVideo();
        ospercent.x = ospercent.y = 50;
    });
});
addListener(window,'resize', setAllCoords, false);