ReqOption = (function(){
var O = {
	isOpen		: false,	// if gallery open?
	container	: null,		// container 
	overlay     : null,
	title       : null,
	result      : null,
	button      : null,
	button2     : null,
	message     : null,
	width       : 0,
	height      : 0,
 	minPadding	: 15,		// minimal distance between container and window
	options		:{
        animate         : true,
		framesNumber	: 20,
		speed			: 30,
		resizeSync		: false	// resize container both vertically and horizontally at the same time
	},

	init : function(options){ 
		var opt = this.options;
		extend(opt, options);
        
		// create overlay and container and add it to body
		var b=document.getElementsByTagName('body')[0];
		b.appendChild( this.overlay = ce('div',{id:'req_overlay'}) );
		b.appendChild( this.container = this.createContainer() );

        
		// define the difference between container and image size
		this.dy = this.container.offsetHeight;
		this.dx = 0;
	},

	/**
	 * Open (show)
	 */
	openFriend : function(userid,username){   
		// set overlay size and show it using fade in effect
		var	ar = getPageSize();

		this.title.innerHTML = i_add_friend+l_add_friend+'<span>'+username+'</span><br>';
        this.button.href = 'javascript:oAddFriend('+userid+',ReqOption.message.value,\'result\')';
        this.button2.href = 'javascript:ReqOption.close()'; 
        //addEvent(O.button,'click',function(){oAddFriend(userid,O.message.value,'result')});
        //addEvent(O.button2,'click',function(){O.close()});
		css(O.overlay, {width:(O.overlayWidth = ar[0]) + "px", height: (O.overlayHeight = ar[1]) + "px", display:'block'});
		fadeIn(O.overlay, 0, 85, 9);

		// display container
		O.setContPos();
		css(O.container, {visibility:'visible', display:'block'});
		O.isOpen = true;
	},
	openInstructor : function(userid,username){      
		// set overlay size and show it using fade in effect
		var	ar = getPageSize();
		
		this.title.innerHTML = i_add_instructor+l_add_instructor+'<span>'+username+'</span><br>';
        this.button.href = 'javascript:oAddInstructor('+userid+',ReqOption.message.value,\'result\')';
        this.button2.href = 'javascript:ReqOption.close()'; 		
        //addEvent(O.button,'click',function(){oAddInstructor(userid,O.message.value,'result')});
        //addEvent(O.button2,'click',function(){O.close()});
		css(O.overlay, {width:(O.overlayWidth = ar[0]) + "px", height: (O.overlayHeight = ar[1]) + "px", display:'block'});
		fadeIn(O.overlay, 0, 85, 9);

		// display container
		O.setContPos();
		css(O.container, {visibility:'visible', display:'block'});
		O.isOpen = true;
	},	
	openStudent : function(userid,username){      
		// set overlay size and show it using fade in effect
		var	ar = getPageSize();
		
		this.title.innerHTML = i_add_student+l_add_student+'<span>'+username+'</span><br>';
        this.button.href = 'javascript:oAddStudent('+userid+',ReqOption.message.value,\'result\')';
        this.button2.href = 'javascript:ReqOption.close()'; 
        //addEvent(O.button,'click',function(){oAddStudent(userid,O.message.value,'result')});
        //addEvent(O.button2,'click',function(){O.close()});
		css(O.overlay, {width:(O.overlayWidth = ar[0]) + "px", height: (O.overlayHeight = ar[1]) + "px", display:'block'});
		fadeIn(O.overlay, 0, 85, 9);

		// display container
		O.setContPos();
		css(O.container, {visibility:'visible', display:'block'});
		O.isOpen = true;
	},	
	openConfirm : function(cnf_id,username,status){      
		// set overlay size and show it using fade in effect
		var	ar = getPageSize();
		
		switch (status){
		       case 1: 
		                      this.title.innerHTML = i_add_friend+l_add_friend+'<span>'+username+'</span><br>';
		            break;
		       case 2: 
                                  this.title.innerHTML = i_add_instructor+l_add_instructor+'<span>'+username+'</span><br>';
		            break;	
		       case 3: 
		                       this.title.innerHTML = i_add_student+l_add_student+'<span>'+username+'</span><br>';
		            break;  
               default:
                       return false;
                       break;                  	            
		}
        this.button.href = 'javascript:Confirm('+cnf_id+',\'result\')';
        this.button2.href = 'javascript:Cancel('+cnf_id+','+status+',\'result\')'; 
        //addEvent(O.button,'click',function(){Confirm(cnf_id,'result')});
        //addEvent(O.button2,'click',function(){Cancel(cnf_id,status,'result')});
        
        this.button.innerHTML = l_add;
        this.button2.innerHTML = l_cancel;
        this.result.innerHTML = l_cnf_message;
        this.message.value = l_load+'...';
        GetConfirmText(cnf_id,this.message.id);
		css(O.overlay, {width:(O.overlayWidth = ar[0]) + "px", height: (O.overlayHeight = ar[1]) + "px", display:'block'});
		fadeIn(O.overlay, 0, 85, 9);

		// display container
		O.setContPos();
		css(O.container, {visibility:'visible', display:'block'});
		O.isOpen = true;
	},		
	/**
	 * Close
	 */
	close : function(){
        this.result.innerHTML  = l_reason;
        this.message.value = '';
        this.button.innerHTML = l_send;
        this.button2.innerHTML = l_ichange;
		O.overlay.style.display = 'none';
		css(O.container, {visibility:'hidden',display:'none'});
		O.isOpen = false;
	},

	/**
	 * Create container
	 */
	createContainer : function(){
		
		return ce('div', {'id':'req_container'},
                         ce('div',{'class': 'roundt'},ce('span',{'class':'bolt'}),ce('span',{'class':'t'})), 
                         ce('div',{'class': 'cont'}, ce('div',{'id':'opt_close', 'class': 'delete', 'events': {'click': function(){O.close()}}}),
                                                   this.title = ce('label',{'class': 'simple'}),
                                                   this.result = ce('span',{'id':'result'},(l_reason+'<br>')),
                                                   this.message = ce('textarea',{'id': 'omessage', 'name': 'omessage', 'class': 'default'}),
                                                   ce('div',{'class': 'button_green'},
                                                                    this.button = ce('a',{'id': 'opt_send'},l_send),
                                                                    ce('span',0)
                                                   ),
                                                   this.button2 = ce('a',{'id': 'opt_cancel', 'class': 'blink'},l_ichange) 
                         ),  
                         ce('div',{'class': 'roundb'},ce('span',{'class':'bolt'}),ce('span',{'class':'b'}))                            
        );                                                                                       
	},  

	/**
	 * Set the size and position of the container
	 * @param {Number} vScale - scale of the image: 1 - full size, >1 - zoom in, <1 - zoom out
	 */
	setContPos : function(){
		// define references and variables
		var	ar = getPageSize(),
			wScr = ar[2],	// width of the viewport
			hScr = ar[3];	// height of the viewport
			O.width = parseInt(getStyle(O.container,'width'));
            O.height = parseInt(getStyle(O.container,'height'));

		var	scr = getScrollXY(),
			y = (hScr>O.height ? Math.floor(Math.abs((hScr - O.height)/2)) : 0) + scr[1],
			x = (wScr>O.width ? Math.floor(Math.abs((wScr - O.width)/2)) : 0) + scr[0];
		
			//css(O.container, {top: y+"px", left: x+"px", width: O.width+"px", height: O.height+"px"});
			css(O.container, {top: y+"px", left: x+"px"});
			O.showContent();
	},

	/**
	 * Hide container content
	 */
	hideContent:function(){
		for (var i=O.container.childNodes.length; --i>-1;)
			O.container.childNodes[i].style.display = 'none';
	},

	/**
	 * Show container content
	 */
	showContent:function(){
		var	nodes = O.container.childNodes,
			opt = O.options;
			
			for (var i=nodes.length; --i>-1;)
			    if (nodes[i].nodeName != '#text')
			    nodes[i].style.display = 'block';

	}
}

function fadeIn(elem, levelStart, levelEnd, frames, speed){
	levelEnd = levelEnd || 100;
	if (O.options.animate) {
		var anime = new Movie(elem, frames || 5, speed || 40);
		anime.addThread('opacity', levelStart || 0, levelEnd);
		anime.run();
	}else{
		setOpacity(elem, levelEnd);
	}
}

function fadeOut(elem, levelStart, levelEnd, frames, speed){
	levelEnd = levelEnd || 0;
	if (O.options.animate) {
		var anime = new Movie(elem, frames || 5, speed || 40);
		anime.addThread('opacity', levelStart || 100, levelEnd);
		anime.run();
	} else {
		setOpacity(elem, levelEnd);
	}
}
/**
 * Add event listener
 */
function addEvent(obj,type,fn){
	if (window.addEventListener)
		obj.addEventListener( type, fn, false );
	else {
		obj["e"+type+fn] = fn;
		obj[type+fn] = function() {obj["e"+type+fn]( window.event )}
		obj.attachEvent( "on"+type, obj[type+fn] )
	}
}
function setEvent(obj,type,fn){
	if (window.addEventListener)
		obj.addEventListener( type, fn, false );
	else {
		obj["e"+type+fn] = fn;
		obj[type+fn] = function() {obj["e"+type+fn]( window.event )}
		obj.attachEvent( "on"+type, obj[type+fn] )
	}
}
function extend (target, source) {
	for (var i in source)
		target[i] = source[i];
}

function css(elem, styles){
	extend(elem.style, styles);
}

/**
 * Get the page and viewport size
 * @return {Array}
 */
function getPageSize(){
	var xScroll, yScroll, windowWidth, windowHeight, b = document.body, de = document.documentElement;
	if (window.innerHeight && window.scrollMaxY) {
		xScroll = b.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (b.scrollHeight > b.offsetHeight){ // all but Explorer Mac
		xScroll = b.scrollWidth;
		yScroll = b.scrollHeight;
	} else if (de && de.scrollHeight > de.offsetHeight){ // Explorer 6 strict mode
		xScroll = de.scrollWidth;
		yScroll = de.scrollHeight;
	} else { // Explorer Mac...would also work in Mozilla and Safari
		xScroll = b.offsetWidth;
		yScroll = b.offsetHeight;
	}

	if (self.innerHeight) { // all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (de && de.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = de.clientWidth;
		windowHeight = de.clientHeight;
	} else if (b) { // other Explorers
		windowWidth = b.clientWidth;
		windowHeight = b.clientHeight;
	}

	// for small pages with total height less then height of the viewport
	var pageHeight = yScroll < windowHeight? windowHeight : yScroll;

	// for small pages with total width less then width of the viewport
	var pageWidth = xScroll < windowWidth? windowWidth : xScroll;

	return [pageWidth,pageHeight,windowWidth,windowHeight]
}

/**
 * Get coords of scroll bars
 * @return {Array} - [coord horizontal, coord vertical]
 */
function getScrollXY() {
	var scrOfX = 0, scrOfY = 0, b = document.body, de = document.documentElement;
	if( typeof( window.pageYOffset ) == 'number' ) {
		//Netscape compliant
		scrOfY = window.pageYOffset;
		scrOfX = window.pageXOffset;
	} else if( b && ( b.scrollLeft || b.scrollTop ) ) {
		//DOM compliant
		scrOfY = b.scrollTop;
		scrOfX = b.scrollLeft;
	} else if( de && ( de.scrollLeft || de.scrollTop ) ) {
		//IE6 Strict
		scrOfY = de.scrollTop;
		scrOfX = de.scrollLeft;
	}
	return [ scrOfX, scrOfY ];
}

/**
 * Get elements style
 * @param {Object} elem - element
 * @param {Object} name - name of the style to get
 */
function getStyle(elem, name) {
	var d = document.defaultView;
	if (elem.style[name])
		return elem.style[name];

	else if (elem.currentStyle)
		return elem.currentStyle[name];

	else if (d && d.getComputedStyle) {
		name = name.replace(/([A-Z])/g,"-$1");
		name = name.toLowerCase();

		var s = d.getComputedStyle(elem,"");
		return s && s.getPropertyValue(name);
	}
	return null;
}

/**
 * Cross-browser function to set element opacity
 * @param {Element} elem - element
 * @param {Number} level - level of opacity, percent
 */
function setOpacity() {
	setOpacity = arguments[0].filters ?
		function(elem,level){elem.style.filter = "alpha(opacity="+level+")"} :
		function(elem,level){elem.style.opacity = level / 100}
	setOpacity(arguments[0],arguments[1]);
}

/**
 * Create HTML element
 * @param {String} tag - tag name
 * @param {Object} attr - attributes to set, ex: {'name':'someClass',value:'the value'}
 */
function ce(tag, attr){

	var elem = document.createElement(tag);

	if (attr){
		for (var name in attr){
			if(name == 'events'){
				for(var j in attr[name])
					addEvent(elem, j, attr[name][j]);
			}else{
				var value = attr[name];
				if ( typeof value != "undefined" ) {
					if(name == 'class' || name == 'for'){
						name = { "for": "htmlFor", "class": "className" }[name] || name;
						elem[name] = value;
					} else
						elem.setAttribute(name, value);
				}
			}
		}
	}
	for(var i=2, len=arguments.length; i<len; i++){
	       
		if (typeof arguments[i] == 'string') 
			elem.innerHTML += arguments[i];   
		else       
			elem.appendChild(arguments[i]); 
	}                                         
	return elem;
}

/**
 * Class which makes and run animations
 * @param {Element} elem - target element
 * @param {Number} num_frames - number of frames
 * @param {Number} speed - time between each frame, msec
 */
function Movie(elem, num_frames, speed){
	if (!elem)
		return null;

	this.elem = elem;
	this.numFrames = num_frames || 0;
	this.frames = [];		// frames array
	this.speed = speed || 10;
}

/**
 * Add thread - the chain of actions to do on the element
 * @param {String} style - style name
 * @param {Number} startValue - value at the beginning of animation
 * @param {Number} endValue - end value
 * @param {Number} startFrame - frame, from which the animation of thread begin
 * @param {Number} endFrame - frame, which ends the animation
 */
Movie.prototype = {
addThread : function(style, startValue, endValue, startFrame, endFrame){
	if (!style || endValue === 'undefined' || endValue === null) return;

	if(style !== 'opacity')
		startValue = parseFloat(getStyle(this.elem, style));

	startFrame = startFrame || 0;
	endFrame = endFrame || this.numFrames;

	var	elem = this.elem,						// reference to current element
		F = this.frames,						// reference to frames collection
		count = (endFrame - startFrame) || 1,	// number of frames, should be at least 1
		isMore = startValue > endValue,
		step = Math.ceil((isMore ? startValue - endValue : endValue - startValue) / count);

	for (startFrame; startFrame<endFrame; startFrame++){
		startValue = isMore ?
			(startValue - endValue) <= step? endValue : Math.ceil(startValue - step) :
			(endValue - startValue) <= step? endValue : Math.ceil(startValue + step);
		if (!F[startFrame])
			F[startFrame] = new MovieFrame;
		F[startFrame].addStyle([elem,style,startValue]);
	}

},

/**
 * Creation of the anonimous function that changes the style
 * @param {Element} elem - target element
 * @param {String} name - style name
 * @param {Number} value - style value
 */
/*createAction : function(elem, name, value){
	return name == 'opacity'?
		function(){setOpacity(elem, value)} :
		function(){elem.style[name] = value+'px'}
},*/

/**
 * Add action to the frame specified
 * @param {Function} func - reference to the function or anonimous function
 * @param {Number} frameNumber - number of frame to put the action in
 */
addAction : function(func, frameNumber){
	this.frames[frameNumber].addAction(func);
},

/**
 * The step - run the next frame
 */
step : function(){
	var frame = this.frames.shift();

	if (frame)
		frame.exec();
	else
		clearInterval(this.interval);
},

/**
 * Show the animation
 */
run : function(){
	clearInterval(this.interval);
	this.step();

	var t = this;
	if (this.numFrames>1)
		this.interval = setInterval(function(){t.step()}, this.speed)
}
}



/**
 * Class "movie frame" contains list of actions to run
 */
function MovieFrame(){
	this.actions = [];
	this.styles = [];
}

MovieFrame.prototype = {
	/**
	 * Add action to the frame
	 * @param {Function} f - anonimous function or reference to the function
	 */
	addAction : function(f){
		this.actions.push(f)
	},

	/**
	 * This function adds one particular style to change
	 * @param {Array} aStyle - object which has this form {array,style,value}
	 */
	addStyle : function(aStyle){
		this.styles.push(aStyle);
	},

	/**
	 * Executes all actions of the frame
	 */
	exec : function(){
		var s = this.styles, act, i;
		for (i=s.length; --i>-1;){
			if(s[i][1]=='opacity')
				setOpacity(s[i][0],s[i][2]);
			else
				s[i][0].style[s[i][1]]=s[i][2]+'px';
		}

		if(act = this.actions.shift()) act();
	}
}

return O;
})();

timer = null;
xopen = yopen = 0;
user_id_open = false;
function ShowOptions(a,show,pos,event,user_id)
{
         if (pos)
         {
            if (user_id_open != user_id && user_id_open != false) HideOptions();
            user_id_open = user_id; 
         }          
         obj = document.getElementById('user_options'+user_id_open);

         if (show)
         {
            //var x = event.clientX + 5;
            //var y = event.clientY + getBodyScrollTop() + 15;
            var box = getBounds(a);
            x = box.left + box.width + 15;
            y = box.top - 0;
            clearTimeout(timer);
            if (is_ie)
            {  
	           obj.style.setAttribute("display","block");
               obj.style.setAttribute("top",yopen);
               obj.style.setAttribute("left",xopen);
               	           
	           if (pos)
	           {
	              xopen = x;
	              yopen = y;
	              user_id_open = user_id;
	              obj.style.setAttribute("top",y);
                  obj.style.setAttribute("left",x);
               }
            }
            else
            {   
            
                if (pos)
                {
	               xopen = x;
	               yopen = y;   
                   user_id_open = user_id;                
         	       obj.setAttribute("style","display: block; top: "+y+"px; left: "+x+"px;");
    	        }
	            else
	               obj.setAttribute("style","display: block; top: "+yopen+"px; left: "+xopen+"px;");   
            }                      
         }else
         {
              timer = setTimeout("HideOptions()",500);
         }      
}
function HideOptions()
{           
            if (typeof timer == 'undefined') return;
            clearTimeout(timer);
            obj = document.getElementById('user_options'+user_id_open);
            if (is_ie)
            {
	           obj.style.setAttribute("display","none");
            }
            else
            {
         	    obj.setAttribute("style","display: none"); 
            }             
}