function gebi(id) {
    return document.getElementById(id);
}

var ua = navigator.userAgent.toLowerCase();
var isOpera = ua.indexOf("opera") != -1; 
var isIE = ((ua.indexOf("msie") != -1) && !isOpera && (ua.indexOf("webtv") == -1)); 
var isGecko = ua.indexOf("gecko") != -1;
var isNetscape = ua.indexOf("netscape") != -1;
var isFirefox = ua.indexOf("firefox") != -1;

var DisplayPhotoFormat="0";
var DisplayPhotoFormat1="0";
var PhotoHaveFullFormat=0;
var PhotoHaveFormat1=0;
var DesplFormat=0;
var ImageWidth1 = 0, ImageHeight1 = 0, ImageWidth2 = 0, ImageHeight2 = 0, FullImageWidth = 0, FullImageHeight = 0, MainImageHeight = 0;

function checkComment(form)
{
	var errorText = "Вы превысили лимит однотипных знаков в комментарии ";
	var text = $("#message").val();
	var pattern = /(.)\1{3,}/;
	if(text.match(pattern))
	{
		alert(errorText);
		return false;
	}
	var check = new Array();
	var smiles = new Array(":lol:",":-P",":-D",":-)",":-|",":-(",":cry:","8-)",":-o",":-?",":oops:",":shock:",":-x",":roll:",";-)",":idea:",":!:",":?:");
	var allcount = 0;
	for(var i = 0;i < smiles.length;i++)
	{
		var pattern = smiles[i];
		var pos = text.indexOf(pattern);
		for (var count = 0; pos != -1; count++)
			pos = text.indexOf(pattern, pos + pattern.length);
		allcount += count;
	}
	if(allcount > 3)
	{
		alert(errorText);
		return false;
	}
	//alert("Извините, идут работы по модернизации сайта" + "\n" + textArea.val());
	//return false;
}

var Rating = {
	fillWidth : 11,
	setVoice : function(fillId,rating,value,endValue,action,uid,pid,aid)
	{
		var fill = gebi(fillId);
		var width = parseInt(fill.style.width);
		var newval = width + (value * rating);

		if(newval <= 0)
		{
			newval = 0;
		}
		else if(newval >= endValue)
		{
			newval = 100;
			if(action == "trash")
			{
				$.ajax({
					url: 'delete.php?id='+pid+'&what=picture',
					dataType : "json"
				});
				alert("Фото удалено");
				document.location.href="thumbnails-"+aid+".html";
			}
		}
		fill.parentNode.childNodes[1].innerHTML = newval + "%";
		fill.style.width = newval + "%";
		$(".voiceButton").css("visibility","hidden");
		$.post('ajax_rating.php', {
				action : "saveRating",
				group : action,
				pid : pid,
				uid : uid,
				value : rating
				},
				null,"text");
		// base value == rating
	},
	
	setRating : function(elem,e)
	{
		var fill = elem.childNodes[2];
		var block = elem.childNodes[1];
		
		e = e || window.event;
		var pos = defPosition(e);
		var elemPos = absPosition(elem);
		
		fill.style.width = (Math.floor((pos.x - elemPos.x - 3) / this.fillWidth + 1) * this.fillWidth) + "px";
		block.style.display = "block";
	},
	
	clearHover : function(elem)
	{
		var fill = elem.childNodes[2];
		var block = elem.childNodes[1];
		block.style.display = "none";
		fill.style.width = 0;
	},
	
	saveRating : function(elem,group,pid,uid)
	{
		var fill = elem.childNodes[2];
		var value = parseInt(fill.style.width) / this.fillWidth;
		elem.onmouseout = null;
		elem.onmousemove = null;
		
		$.post('ajax_rating.php', {
				action : "saveRating",
				group : group,
				pid : pid,
				uid : uid,
				value : value
				},
				null,"text");
	}
}

function ShowOriginalPhotoInfo(){
    if (DesplFormat==0){
        gebi("OriginalPhotoInfo").style.display="block";
        gebi("OriginalPhotoInfo").style.left=(absPosition(gebi("FullPhotoIco")).x+16) + "px";
        gebi("OriginalPhotoInfo").style.top=absPosition(gebi("FullPhotoIco")).y + "px";
    }
}

function HideOriginalPhotoInfo(){
    gebi("OriginalPhotoInfo").style.display="none";
}

function absPosition(obj) {
	this.x = 0;
	this.y = 0;
    while(obj) {
		this.x += obj.offsetLeft;
		this.y += obj.offsetTop;
		obj = obj.offsetParent;
	}
	return {x:this.x,y:this.y};
}
function defPosition(event) {
	if (document.attachEvent != null) {
		this.x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
		this.y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
	}
	if (!document.attachEvent && document.addEventListener) {
		this.x = event.clientX + window.scrollX;
		this.y = event.clientY + window.scrollY;
	}
	return {x:this.x,y:this.y};
}
function countSubstrings(_str, _sub) {
	var count = 0;
	while (_str.indexOf(_sub) != -1) {
		_str = _str.substring(_str.indexOf(_sub) + _sub.length, _str.length);
		count++;
	}
	return count;
}

var BlackWhiteOn=false;

function blackFilter() {
	if(isIE) {
		Filterflag = false;
	    gebi("FilterDiv").style.display = "none";
	    gebi("FiltresProp").style.display="none";
	    
	    BlackWhiteOn = !BlackWhiteOn;

		gebi("td_pic_container").style.filter = (gebi('bw').value) ? "" : "Gray";
		gebi('bw').value = (gebi('bw').value) ? "" : "1";
		return false;
	} else return true;
}
function flipvFilter() {
	if(isIE) {
		var cmd = gebi('cmd');
		var steps = countSubstrings(cmd.value, "v") % 2;
		gebi("mainpic").style.filter = (steps) ? "" : "FlipV";
		gebi('cmd').value += "v";
		return false;
	} else return true;
}
function fliphFilter() {
	if(isIE) {
		var cmd = gebi('cmd');
		var steps = countSubstrings(cmd.value, "h") % 2;
		gebi("pic_container").style.filter = (steps) ? "" : "FlipH";
		gebi('cmd').value += "h";
		return false;
	} else return true;
}

var rotateArray = [0, 90, 180, 270];
var _rotateArray = [0, -90, -180, -270];
function rotate(side) {
	var cmd = gebi('cmd');
	var flipCount = (countSubstrings(cmd.value, "h") + countSubstrings(cmd.value, "v")) % 2;
	var side_count = countSubstrings(cmd.value, side) + 1;
	var unside_count = countSubstrings(cmd.value, ((side == "r") ? "l" : "r"));
	var steps = (side_count - unside_count) % 4;
	if (flipCount) {
		var flag = (side == "l" && steps > 0) || (side == "r" && steps < 0);
	}
	else var flag = ((side == "r" && steps > 0) || (side == "l" && steps < 0));
	var arr = (flag) ? rotateArray : _rotateArray;
	steps = Math.abs(steps);
	gebi("mainpic").rotation = arr[steps];
	cmd.value += side;
	clearCrop();
	Cropflag = false;
	Filterflag = false;
	gebi("FilterDiv").style.display = "none";
	gebi("FiltresProp").style.display="none";
	return false;
}

var aOperations = new Array();
var bLoaded = false;
function resize_handler() {
    if (_canvas.getContext) {
        var imageToEdit = _canvas;
    }
    else {
        var imageToEdit = gebi("mainpic");
    }
	var divToMove = gebi("cropper");
	var divToMove1 = gebi("FilterDiv");
	
	var _x = 8;
	var _y = 8;
	
	if (_canvas.getContext) {
		divToMove.style.left = absPosition(imageToEdit).x - _x + "px";
		divToMove.style.top = absPosition(imageToEdit).y - _y + "px";
		divToMove1.style.left = parseInt(divToMove.style.left) + 8 + "px";
		divToMove1.style.top = parseInt(divToMove.style.top) + 8 + "px";
	}
	else {
		divToMove.style.left = absPosition(imageToEdit).x - absPosition(gebi('PhotoPanel')).x + "px";
		divToMove.style.top = absPosition(imageToEdit).y - absPosition(gebi('GALLERY')).y - _y + "px";
		divToMove1.style.left = parseInt(divToMove.style.left) + 10 + "px";
		divToMove1.style.top = parseInt(divToMove.style.top) + 8 + "px";
	}
	
	
	
		
	divToMove.style.width = imageToEdit.offsetWidth + 2 * _x + "px";
	divToMove.style.height = imageToEdit.offsetHeight + 2 * _y + "px";
	divToMove1.style.width = imageToEdit.offsetWidth + "px";
	divToMove1.style.height = imageToEdit.offsetHeight + "px";

}

var Cropflag = false;
var Gridflag = false;
var resizeState = false;
var Filterflag = false;

function flipCrop() {
	Cropflag = !Cropflag;
	resize_handler();

	if(Cropflag){
	    gebi("cropper").style.display = "";
	}else{
	    clearCrop();
	}
	Filterflag = false;
	gebi("FilterDiv").style.display = "none";
	gebi("FiltresProp").style.display="none";
}
function clearCrop() {
	gebi("top").style.height = 8 + "px";
	gebi("bottom").style.height = 8 + "px";
	gebi("left").style.width = 8 + "px";
	gebi("right").style.width = 8 + "px";
	gebi("top_left").style.height = 8; gebi("top_left").style.width = 8 + "px";
	gebi("bottom_left").style.height = 8; gebi("bottom_left").style.width = 8 + "px";
	gebi("top_right").style.height = 8; gebi("top_right").style.width = 8 + "px";
	gebi("bottom_right").style.height = 8; gebi("bottom_right").style.width = 8 + "px";
	initMovingCenter(false);
	gebi("cropper").style.display = "none";
}

function flipGrid() {
	Gridflag = !Gridflag;
	if(Gridflag) {
	    if (!Cropflag) flipCrop();
		gebi("grid").style.visibility = "visible";
	} else {
		gebi("grid").style.visibility = "hidden";
	}
}

function filtresact() {
	Cropflag = false;
	clearCrop();
	resize_handler();
	
	if (BlackWhiteOn){blackFilter()};
	
	Filterflag = !Filterflag;
	if(Filterflag) {
	    gebi("FilterDiv").style.display="block";
	    gebi("FiltresProp").style.display="block";
		if (_canvas.getContext) {
		} else {
			gebi("FiltresProp").style.left = "0px";
		}
	}else{
	    gebi("FilterDiv").style.display="none";
	    gebi("FiltresProp").style.display="none";
	}
	return false;
}

function changeColor(color) {
    gebi("FilterDiv").style.background = color;
}

var CurrentSide = null;
var x0 = 0, y0 = 0;
function MouseDown(side, ev) {
	CurrentSide = side;
	ev = ev || window.event;
	x0 = defPosition(ev).x;
	y0 = defPosition(ev).y;
}
function MouseUp() {
    try { CurrentSide = null; } catch (ex) { }
}
function initMovingCenter(flag) {
	resizeState = flag;
	gebi("mdlblck").style.cursor = (flag) ? "move" : "";
}
function MouseMove(ev) {
	if (CurrentSide == null) return;

	//var mainPc = gebi("mainpic");
	if (_canvas.getContext) {
	    var mainPc = _canvas;
	}
	else {
	    var mainPc = gebi("mainpic");
	}
	var ee = mainPc.offsetHeight;
	var tp = gebi("top");
	var bt = gebi("bottom");
	var md = gebi("mdlblck");

	ev = ev || window.event;
	dx = defPosition(ev).x - x0;
	dy = defPosition(ev).y - y0;
	
	var curObj = gebi(CurrentSide);
	if (CurrentSide != "mdlblck") initMovingCenter(true);
	try {
	switch (CurrentSide) {
	    case "mdlblck":
			if (!resizeState) return;
			if (dy >= 0 && (gebi("top").offsetHeight + gebi("bottom").offsetHeight + 5 + dy) >= ee) return;
			if (dy < 0  && (gebi("top").offsetHeight + 5 + gebi("bottom").offsetHeight - dy) >= ee) return;
			if (gebi("top").offsetHeight + dy >= 8 && gebi("bottom").offsetHeight - dy >= 8) {
				gebi("top").style.height = gebi("top").offsetHeight + dy + "px";
				gebi("bottom").style.height = gebi("bottom").offsetHeight - dy + "px";
			}
			if (gebi("top").offsetHeight < 8) gebi("top").style.height = 8 + "px";
			else if (gebi("bottom").offsetHeight < 8) gebi("bottom").style.height = 8 + "px";
			else {
				x0 = defPosition(ev).x;
				y0 = defPosition(ev).y;
			}
			if (gebi("left").offsetWidth + dx >= 8 && gebi("right").offsetWidth - dx >= 8) {
			    gebi("left").style.width = gebi("left").offsetWidth + dx + "px";
			    gebi("right").style.width = gebi("right").offsetWidth - dx + "px";
			}
			if (gebi("left").offsetWidth < 8) gebi("left").style.width = 8 + "px";
			else if (gebi("right").offsetWidth < 8) gebi("right").style.width = 8 + "px";
			else {
				x0 = defPosition(ev).x;
				y0 = defPosition(ev).y;
			}
			break;
		case "top":
			if (dy >= 0 && (tp.offsetHeight + bt.offsetHeight + 5 + dy) >= ee) return;
			if (curObj.offsetHeight >= 8) curObj.style.height = curObj.offsetHeight + dy + "px";
			if (curObj.offsetHeight < 8) curObj.style.height = 8 + "px";
			else {
				x0 = defPosition(ev).x;
				y0 = defPosition(ev).y;
			}
			break;
		case "bottom":
			if (dy < 0 && (tp.offsetHeight + 5 + bt.offsetHeight - dy) >=ee) return;
			if (curObj.offsetHeight >= 8) curObj.style.height = curObj.offsetHeight - dy + "px";
			if (curObj.offsetHeight < 8) curObj.style.height = 8 + "px";
			else {
				x0 = defPosition(ev).x;
				y0 = defPosition(ev).y;
			}
			break;
		case "left":
		    if (curObj.offsetWidth >= 8) curObj.style.width = curObj.offsetWidth + dx + "px";
		    if (curObj.offsetWidth < 8) curObj.style.width = 8 + "px";
			else {
				x0 = defPosition(ev).x;
				y0 = defPosition(ev).y;
			}
			break;
		case "right":
		    if (curObj.offsetWidth >= 8) curObj.style.width = curObj.offsetWidth - dx + "px";
		    if (curObj.offsetWidth < 8) curObj.style.width = 8 + "px";
			else {
				x0 = defPosition(ev).x;
				y0 = defPosition(ev).y;
			}
			break;
		case "top_left":
			if (dy >= 0 && (tp.offsetHeight + bt.offsetHeight + 5 + dy) >= ee) return;
			curObj = gebi("top");
			if (curObj.offsetHeight >= 8) curObj.style.height = curObj.offsetHeight + dy + "px";
			if (curObj.offsetHeight < 8) curObj.style.height = 8 + "px";
			else {
				x0 = defPosition(ev).x;
				y0 = defPosition(ev).y;
			}
			curObj = gebi("left");
			if (curObj.offsetWidth >= 8) curObj.style.width = curObj.offsetWidth + dx + "px";
			if (curObj.offsetWidth < 8) curObj.style.width = 8 + "px";
			else {
				x0 = defPosition(ev).x;
				y0 = defPosition(ev).y;
			}
			break;
		case "bottom_left":
			if (dy < 0 && (tp.offsetHeight + 5 + bt.offsetHeight -dy) >=ee) return;
			curObj = gebi("bottom");
			if (curObj.offsetHeight >= 8) curObj.style.height = curObj.offsetHeight - dy + "px";
			if (curObj.offsetHeight < 8) curObj.style.height = 8 + "px";
			else {
				x0 = defPosition(ev).x;
				y0 = defPosition(ev).y;
			}
			curObj = gebi("left");
			if (curObj.offsetWidth >= 8) curObj.style.width = curObj.offsetWidth + dx + "px";
			if (curObj.offsetWidth < 8) curObj.style.width = 8 + "px";
			else {
				x0 = defPosition(ev).x;
				y0 = defPosition(ev).y;
			}
			break;
			
		case "top_right":
			if(dy >= 0 && (tp.offsetHeight + bt.offsetHeight + 5 + dy) >= ee) return;
			curObj = gebi("top");
			if (curObj.offsetHeight >= 8) curObj.style.height = curObj.offsetHeight + dy + "px";
			if (curObj.offsetHeight < 8) curObj.style.height = 8 + "px";
			else {
				x0 = defPosition(ev).x;
				y0 = defPosition(ev).y;
			}
			curObj = gebi("right");
			if (curObj.offsetWidth >= 8) curObj.style.width = curObj.offsetWidth - dx + "px";
			if (curObj.offsetWidth < 8) curObj.style.width = 8 + "px";
			else {
				x0 = defPosition(ev).x;
				y0 = defPosition(ev).y;
			}
			break;
			
		case "bottom_right":
			if (dy < 0 && (tp.offsetHeight + 5 + bt.offsetHeight -dy) >=ee) return;
			curObj = gebi("bottom");
			if (curObj.offsetHeight >= 8) curObj.style.height = curObj.offsetHeight - dy + "px";
			if (curObj.offsetHeight < 8) curObj.style.height = 8 + "px";
			else {
				x0 = defPosition(ev).x;
				y0 = defPosition(ev).y;
			}
			curObj = gebi("right");
			if (curObj.offsetWidth >= 8) curObj.style.width = curObj.offsetWidth - dx + "px";
			if (curObj.offsetWidth < 8) curObj.style.width = 8 + "px";
			else {
				x0 = defPosition(ev).x;
				y0 = defPosition(ev).y;
			}
			break;	
	} 
	} catch (all) {}
}

function HideTools(){
    try{
        DisplayPhotoFormat="0"; DisplayPhotoFormat1="0"; PhotoHaveFullFormat=0; PhotoHaveFormat1=0; DesplFormat=0; ImageWidth1=0; ImageHeight1=0; ImageWidth2=0; ImageHeight2=0; FullImageWidth=0; FullImageHeight=0; MainImageHeight=0;
        Gridflag = false; resizeState = false; BlackWhiteOn=false; Cropflag = false; clearCrop(); Filterflag = false; resize_handler(); gebi("FilterDiv").style.display = "none"; gebi("FiltresProp").style.display="none";
        IsMouseDown="0"; posxStart=0; ColorN=17; gebi("FilterDiv").style.backgroundColor='#000000';
        gebi("lefttd").style.width="20px";
        gebi("FilterDiv").style.filter="alpha(opacity: 20)";
        gebi("FilterDiv").style.opacity="0.2";
        gebi("grid").style.visibility = "hidden";
	}catch(ex){}
}

var IsMouseDown = "0", posxStart = 0, ColorN = 17;
function ScroolImage_ondown(e) {
    if (e == null) e = window.event;
    if (e.pageX || e.pageY) {
        posxStart = e.pageY;
    } else if (e.clientX || e.clientY) {
        if (document.documentElement.scrollTop) {
            posxStart = e.clientY + document.documentElement.scrollTop;
        } else {
            posxStart = e.clientY + document.body.scrollTop;
        }
    }
    IsMouseDown = "1";
    posxStart = posxStart - gebi("lefttd").offsetWidth;
}

function ScroolImage_onup() {
    IsMouseDown = "0";
}
function ScroolImage_onout() {
    IsMouseDown = "0";
}
function ScroolImage_onmove(e) {
    if (IsMouseDown == "1") {
        var posx = 0;
        if (e == null) e = window.event;
        if (e.pageX || e.pageY) {
            //posx = e.pageX;
            posx = e.pageY;
        } else if (e.clientX || e.clientY) {
            if (document.documentElement.scrollTop) {
                //posx = e.clientX + document.documentElement.scrollLeft;
                posx = e.clientY + document.documentElement.scrollTop;
            } else {
            //posx = e.clientX + document.body.scrollLeft;
            posx = e.clientY + document.body.scrollTop;
            }
        }
        
        if (posx - posxStart > 0 && posx - posxStart < 101) {
            gebi("lefttd").style.height = posx - posxStart + "px";
            gebi("FilterDiv").style.filter = "alpha(opacity:" + (posx - posxStart) + ")";
            gebi("FilterDiv").style.opacity = (posx - posxStart) / 100;
        } else {
            if (posx - posxStart < 1) {
                gebi("lefttd").style.width = 1;
                gebi("FilterDiv").style.filter = "alpha(opacity:1)"; 
            }
            if (posx - posxStart > 100) {
                gebi("lefttd").style.width = 100;
                gebi("FilterDiv").style.filter = "alpha(opacity:100)"; 
            }
        }
    }
}










function clearAllCrop() {
    clearCrop();
    Cropflag = false;
    Filterflag = false;
    gebi("FilterDiv").style.display = "none";
    gebi("FiltresProp").style.display = "none";
}

var _element;
var _ctx;
var _center;
var _img;
var _canvas;
var _rotation = 0;
var _filter = 'progid:DXImageTransform.Microsoft.BasicImage({action}={0})';
var _mirror = false;
var _imageData;
var isMonochrome = false;
var invertedSize = false;
var rotateSize = null;
var upsideImage = false;
var upsideImage2 = false;
function scaleHor() {
    if (_canvas.getContext) {
        _canvas.setAttribute('width', _center.x);
        _canvas.setAttribute('height', _center.y);
        _ctx.scale(1, 1);
        _ctx.translate(_center.x, _center.y);
        _ctx.drawImage(_img, -1 * _center.x, -1 * _center.y +5);
        invertedSize = false;
        rotateSize = null;
        if (!upsideImage) {
            _ctx.scale(1, -1);
            _ctx.translate(0, _center.y);
            _ctx.drawImage(_img, -1 * _center.x, -1 * _center.y);
            upsideImage = true;
        }
        else {
            upsideImage = false;
        }
    }
    else {
        _rotation = (_rotation + 2) % 4;
        ieImage.style.filter = _filter.replace('{0}', _rotation).replace('{action}','rotation');
    }
}

function scaleVer() {
    if (_canvas.getContext) {
        _canvas.setAttribute('width', _center.x);
        _canvas.setAttribute('height', _center.y);
        _ctx.scale(1, 1);
        _ctx.translate(_center.x, _center.y);
        _ctx.drawImage(_img, -1 * _center.x + 5, -1 * _center.y);
        invertedSize = false;
        rotateSize = null;
        if (!upsideImage) {
            _ctx.scale(-1, 1);
            _ctx.translate(_center.x, 0);
            _ctx.drawImage(_img, -1 * _center.x, -1 * _center.y);
            upsideImage = true;
        }
        else {
            upsideImage = false;
        }
    }
    else {
        ieImage.style.filter = _filter.replace('{0}', (_mirror ? 1 : 0)).replace('{action}', 'Mirror');
        _mirror = !_mirror;
    }
}

var thisRotatePosition = 0;
function rotate(orientation) {
    clearAllCrop();
    
    if (orientation == "right") {
        var _rotation = thisRotatePosition + 90;
    }
    else if (orientation == "left") {
        if (thisRotatePosition == 0)
            thisRotatePosition = 360;
        var _rotation = thisRotatePosition - 90;
    }
    if (_rotation == 360 || _rotation == -360)
        _rotation = 0;
    thisRotatePosition = _rotation;
    /* если не IE - крутим нах */
    if (_canvas.getContext) {
        var canvas = _canvas;
        var canvasContext = _ctx;

        switch (_rotation) {
            default:
            case 0:
                canvas.setAttribute('width', _img.width);
                canvas.setAttribute('height', _img.height);
                canvasContext.rotate(_rotation * Math.PI / 180);
                canvasContext.drawImage(_img, 0, 0);
                invertedSize = false;
                rotateSize = 360;
                break;
            case 90:
                canvas.setAttribute('width', _img.height);
                canvas.setAttribute('height', _img.width);
                canvasContext.rotate(_rotation * Math.PI / 180);
                canvasContext.drawImage(_img, 0, -_img.height);
                invertedSize = true;
                rotateSize = 90;
                break;
            case 180:
                canvas.setAttribute('width', _img.width);
                canvas.setAttribute('height', _img.height);
                canvasContext.rotate(_rotation * Math.PI / 180);
                canvasContext.drawImage(_img, -_img.width, -_img.height);
                invertedSize = false;
                rotateSize = 180;
                break;
            case 270:
            case -90:
                canvas.setAttribute('width', _img.height);
                canvas.setAttribute('height', _img.width);
                canvasContext.rotate(_rotation * Math.PI / 180);
                canvasContext.drawImage(_img, -_img.width, 0);
                invertedSize = true;
                rotateSize = -90;
                break;
        };
    /* Если IE - опять крутим нах */
    } else {
        switch (_rotation) {
            default:
            case 0:
                ieImage.style.filter = _filter.replace('{0}', 0).replace('{action}', 'rotation');
                break;
            case 90:
                ieImage.style.filter = _filter.replace('{0}', 1).replace('{action}', 'rotation');
                break;
            case 180:
                ieImage.style.filter = _filter.replace('{0}', 2).replace('{action}', 'rotation');
                break;
            case 270:
            case -90:
                ieImage.style.filter = _filter.replace('{0}', 3).replace('{action}', 'rotation');
                break;
        };
    };
};

var ieImage;
function CreateCanvas(id, imageId) {
    var image = gebi(imageId);
	ieImage = image;
    _element = document.getElementById(id);
    var width = image.offsetWidth;
    var height = image.offsetHeight;
    _canvas = document.createElement('canvas');
    if (_canvas.getContext) {
        // Opera/Safari/FireFox code:
        _element.insertBefore(_canvas,gebi("windowValue1"));
        _canvas.setAttribute('width', width);
        _canvas.setAttribute('height', height);
        _center = { 'x': Math.round(width), 'y': Math.round(height) };
        _ctx = _canvas.getContext('2d');
        _img = new Image();
        _img.onload = function() {
            _ctx.translate(_center.x, _center.y);
            _ctx.drawImage(_img, -1 * _center.x, -1 * _center.y);
        };
        _img.src = image.src;
        image.style.display = "none";
        _ctx.save();
        gebi('actionButtons').style.display = "";
		_canvas.onclick = function() {MM_openBrWindow(gebi('windowValue1').name,gebi('windowValue2').name,gebi('windowValue3').name);}
		_canvas.style.cursor = "pointer";
		return;
    }
    // IE code:
    _rotation = 0;
    //_element.style.width = width + 'px';
    //_element.style.height = height + 'px';
    //_element.style.background = 'url(\'' + image.src + '\')';
    _element.style.backgroundPosition = 'center center';
    _element.style.backgroundRepeat = 'no-repeat';
	gebi('actionButtons').style.display = "";
	gebi('grid').style.position = 'absolute';
	image.onclick = function() {MM_openBrWindow(gebi('windowValue1').name,gebi('windowValue2').name,gebi('windowValue3').name);}
	image.style.cursor = "pointer";
}


function monochrome() {
    if (isMonochrome == true) {
        monochromeOff();
        return;
    }

    if (_canvas.getContext) {
        _ctx.drawImage(_img, 0, 0);
        if (!invertedSize)
            _imageData = _ctx.getImageData(0, 0, _center.x, _center.y);
        else
            _imageData = _ctx.getImageData(0, 0, _center.y, _center.x);
        var imageData = _imageData;
        for (i = 0; i < imageData.height; i++) {
            for (j = 0; j < imageData.width; j++) {
                var index = (i * 4) * imageData.width + (j * 4);
                var red = imageData.data[index];
                var green = imageData.data[index + 1];
                var blue = imageData.data[index + 2];
                var alpha = imageData.data[index + 3];
                var average = (red + green + blue) * 0.3333;
                // Оставляем прозрачность и делим на среднее от RGB
                imageData.data[index] = average;
                imageData.data[index + 1] = average;
                imageData.data[index + 2] = average;
                imageData.data[index + 3] = alpha;
            }
        }
        _ctx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);
    }
    else {
        _element.style.filter = _filter.replace('{0}', 1).replace('{action}', 'grayscale');
    }
    isMonochrome = true;
}

function monochromeOff() {
    if (_canvas.getContext) {
        if(rotateSize == null || rotateSize == 180)
            _ctx.drawImage(_img, -1 * _center.x, -1 * _center.y);
        else if (rotateSize == 90)
            _ctx.drawImage(_img, 0, -1 * _center.y);
        else if (rotateSize == -90)
            _ctx.drawImage(_img, -1 * _center.x, 0);
        else if (rotateSize == 360)
            _ctx.drawImage(_img, 0, 0);
        isMonochrome = false;
    }
    else {
        _element.style.filter = _filter.replace('{0}', 0).replace('{action}', 'grayscale');
    }
}