function clear_input( element_id ) {
	var element = document.getElementById( element_id );
	if( element ){
		element.value = '';
	}
}
function show_error( error_id, msg ) {
	var element = document.getElementById( error_id )
	if( element ) {
		element.className = "error";
		element.innerHTML = msg;
	}
}
function hide_error ( element_id ) {
	var element = document.getElementById( element_id );
	if( element ) {	
//		element.className = '';
		element.innerHTML = '';
	}
}
function show_element ( element_id ) {
	var element = document.getElementById( element_id );
//	alert( "before: " + element_id + ' => ' + element.style.display );
	if( element.style.display == 'none' ) {
		element.style.display = 'block';
		element.style.visibility = 'visible';
	} else {
		element.style.display = 'none';
		element.style.visibility = 'hidden';
	}
//	alert( "after: " + element_id + ' => ' + element.style.display );
}
function pause(millis) 
{
        var date = new Date();
        var curDate = null;

        do { curDate = new Date(); } 
        while(curDate-date < millis)
}
function loadFrameCategory ( catid )
{
	var rndNum = Math.round( Math.random() * 1000000 + 1 );
	var str = location.href;
	var host = str.split("/");


	var url = 'http://www.scrapee.com/categorias.xml?page=create&catid=' + catid + '&rand=' + rndNum;
	show_element( 'frame-table');
	show_element( 'waiter_frame_list');
	setTimeout( 'document.getElementById("waiter_frame_list_img").src = "../molduras_files/loading.gif"', 500);
	makeXMLHTTPRequest( url );
}

function loadFrame ( frameid ) {

	hide_error( 'save_error' );
	var rndNum = Math.round( Math.random() * 1000000 + 1 );
	var str = location.href;
	var host = str.split("/");
	var arr = frameid.split("cat_"); var url;

		url = '/bordas.htm?page=create&frameid=' + arr[0];
		show_element( 'work-sheet');
		show_element( 'waiter_frame');
		setTimeout( 'document.getElementById("waiter_frame_img").src = "../molduras_files/loading.gif"', 500 );
		DoReset();

	makeXMLHTTPRequest( url );
}

function makeXMLHTTPRequest( url ) 
{
    XMLHTTPREQ = false;
    // branch for native XMLHttpRequest object
    if(window.XMLHttpRequest) {
	try {
    	    XMLHTTPREQ = new XMLHttpRequest();
	} catch(e) {
	    XMLHTTPREQ = false;
	}
    // branch for IE/Windows ActiveX version
    } else if(window.ActiveXObject) {
        try {
	    XMLHTTPREQ = new ActiveXObject("Msxml2.XMLHTTP");
	} catch(e) {
    	    try {
    		XMLHTTPREQ = new ActiveXObject("Microsoft.XMLHTTP");
    	    } catch(e) {
		XMLHTTPREQ = false;
	    }
	}
    }
    if(XMLHTTPREQ){
	XMLHTTPREQ.onreadystatechange = processReqChange;
	XMLHTTPREQ.open("GET", url, true);
	XMLHTTPREQ.send("");
    }
	
}

function processReqChange() 
{
    // only if XMLHTTPREQ shows "loaded"
    if (XMLHTTPREQ.readyState == 4) {
        // only if "OK"
        if (XMLHTTPREQ.status == 200) {
			parseXmlData( XMLHTTPREQ.responseXML );
        } else {
			alert("There was a problem retrieving the XML data:\n" +
			XMLHTTPREQ.statusText);
        }
    }
}

function parseXmlData( xml )
{
	
	var root = xml.firstChild;
	var frame = root.getElementsByTagName( 'frame' );
	// load frame to work sheet
	if( frame && frame.length ) {
		var frame_html = document.getElementById( 'frame' );
		if( frame_html ) {
			var newimg = new Image();
			newimg.onload = function() { show_element( 'work-sheet'); show_element( 'waiter_frame'); }
			newimg.src = frame[0].firstChild.nodeValue;
			var need_ie_filter = root.getElementsByTagName( 'need_ie_filter' );

				if(navigator.appName!='Microsoft Internet Explorer'){
				frame_html.src = frame[0].firstChild.nodeValue;
				}else{
				frame_html.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + frame[0].firstChild.nodeValue + "');";
				frame_html.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").enabled = true;

				}
				
			var frameid_html = document.getElementById( 'frameidp' );
			frameid_html.value = frame[0].getAttribute('id');
		}

	}

	var imgs = root.getElementsByTagName( 'image' );
	// load categories contents
	if( imgs.length ) {
		for( var i=0; i<9; i++ ) {
			var list_html = document.getElementById( 'list_' + i );
			if( list_html ){ list_html.src = '../molduras_files/blank.gif'; list_html.name = ''; }
		}

	
		for( var i=0; i<imgs.length; i++ ) {
			var img = imgs[i].firstChild.nodeValue;
			var list_html = document.getElementById( 'list_' + i );
			if( list_html ) {
				list_html.src = img;
				if( img.match(/\/cat\//) ) {
					list_html.name = 'cat_' + imgs[i].getAttribute('id');
				} else {
					list_html.name = imgs[i].getAttribute('id');
				}
			}
		}

		var navbar_html = document.getElementById('frame-tree');
		if( navbar_html ) {
			navbar_html.innerHTML = '';
			var navbar =  root.getElementsByTagName( 'navbar' );
			if( navbar.length ) {
				navbar_html.innerHTML = '<a href="#" class=\"tree-prev\" onClick="loadFrameCategory(0); return false;">NEW</a>';
				var parent_category = root.getElementsByTagName( 'navbar_parent_category' );
				if( parent_category.length ) {
					navbar_html.innerHTML = navbar_html.innerHTML + " :: <a href='#' class=\"tree-prev\" onClick=\"loadFrameCategory('" + parent_category[0].getAttribute('id') + ":0'); return false;\">" + parent_category[0].getAttribute('name') + "</a>";
				}
				var category = root.getElementsByTagName( 'navbar_category' );
				if( category.length ) {
					navbar_html.innerHTML = navbar_html.innerHTML + " :: <a href='#' class=\"tree-current\" onClick=\"loadFrameCategory('" + category[0].getAttribute('id') + ":0'); return false;\">" + category[0].getAttribute('name') + "</a>";
				}
			}
		}
	
		var pager_html = document.getElementById('frame-pager');
		pager_html.innerHTML = '';	
		if( root.getElementsByTagName( 'page' ).length ) {
			var page = root.getElementsByTagName( 'page' )[0];
			var page_current = page.getAttribute('current');
			var page_total = page.getAttribute('total');
			if( page_total == 1 ){ page_total = 0; }

			var category = root.getElementsByTagName( 'category' )[0];
			var category_id = category.getAttribute('id');

			for( var i=1; i<=page_total; i++ ) {
				if( i!= page_current ) {
					pager_html.innerHTML = pager_html.innerHTML + "<a href=\"#\" onClick=\"loadFrameCategory('" + category_id + ":" + i + "'); return false;\">" + i + "</a>&nbsp;&nbsp;";
				} else {
					pager_html.innerHTML = pager_html.innerHTML + i + '&nbsp;&nbsp;';
				}
			}
		}
		pause(1500);
		show_element( 'frame-table'); show_element( 'waiter_frame_list');
	}
}
var Agent = navigator.userAgent.toLowerCase();
var is_IE = ( ( Agent.indexOf('msie') != -1) && ( Agent.indexOf('opera') == -1) );

var ImageLeft = 0;
var ImageTop = 0;
var PrevCursorX = 0;
var PrevCursorY = 0;
var PrevImageX = 0;
var PrevImageY = 0;
var PrevSliderX = 0;
var ImageClicked = false;
var SliderClicked = false;
var SliderSheetWidth = 0;
var SliderSheetLeft = 0;
var SliderWidth = 0;
var SliderLeft = 0;
var ImageWidth = 0;
var ImageHeight = 0;
var CursorDirection = 0;

function Init() {
	var ImageObj = document.getElementById('image');

	ImageWidth = parseInt(ImageObj.width);
	ImageHeight = parseInt(ImageObj.height);
	ImageLeft = parseInt(ImageObj.style.left);
	ImageTop = parseInt(ImageObj.style.top);
	PrevImageX = ImageLeft;
	PrevImageY = ImageTop;

	var SliderObj = document.getElementById( 'slider' );
	SliderWidth = parseInt(SliderObj.width);
	SliderWidth = 30;
	SliderLeft = parseInt(SliderObj.style.left);
	PrevSliderX = parseInt(SliderObj.style.left) + SliderWidth/2;

	var SliderLeftObj = document.getElementById('slider-left');	
	SliderSheetLeft = parseInt(SliderLeftObj.style.left);
	var SliderSheetObj = document.getElementById('slider-sheet');
	SliderSheetWidth = parseInt(SliderSheetObj.style.width);
	document.getElementById('tools_error').style.display = "none";
}

function MouseMove( e ) {
	var EventObj = is_IE ? event.srcElement : e.target;
	var X = is_IE ? event.clientX : e.clientX;
	var Y = is_IE ? event.clientY : e.clientY;
		
	if( EventObj.id == "frame" ) {
		EventObj.style.cursor = "move";
		if( ImageClicked ) {
			document.onmousemove = ImageMove;
		} 
	} else 
	if( EventObj.id == "slider" ) {
		EventObj.style.cursor = "pointer";
		if( SliderClicked ) {
			document.onmousemove = SliderMove;
		}
	} 

	PrevCursorX = X;
	PrevCursorY = Y;
}

function MouseClickDown(e) {
	var EventObj = is_IE ? event.srcElement : e.target;
	var X = is_IE ? event.clientX : e.clientX;
	var Y = is_IE ? event.clientY : e.clientY;

	if( EventObj.id == "frame" ) {
		ImageClicked = true;
		return false;
	}  else
	if( EventObj.id == "slider" ) {
		SliderClicked = true;
		return false;
	}
	else {
		ImageClicked = false;
		SliderClicked = false;
		return true;
	}
}

function MouseClickUp(e) {
	ImageClicked = false;
	SliderClicked = false;
	document.onmousemove = MouseMove;
}

function ImageMove(e) {
	var EventObj = is_IE ? event.srcElement : e.target;
	EventObj.style.cursor = "move";
	
	var X = is_IE ? event.clientX : e.clientX;
	var Y = is_IE ? event.clientY : e.clientY;

	if( ! ImageClicked || EventObj.id != "frame" )	{ return true; }

	var OffsetX = PrevCursorX - X;
	var OffsetY = PrevCursorY - Y;

	var ImageObj = document.getElementById('image');
	ImageObj.style.left = PrevImageX + "px";
	ImageObj.style.top = PrevImageY + "px";

	PrevImageX  = PrevImageX - OffsetX;
	PrevImageY  = PrevImageY - OffsetY;
	PrevCursorX = X;
	PrevCursorY = Y;
	return false;
}

function SliderMove(e) {
	var X = is_IE ? event.clientX : e.clientX;

	if( ! SliderClicked ) { return true; } 
	if( ! SliderSheetWidth ) { 
		show_error( 'tools_error', 'Please, wait until page loads' );
		return true; 
	}
	if( ! SliderWidth ){ 
		show_error( 'tools_error', 'Please, wait until page loads' );
		return true; 
	}

	var SliderObj = document.getElementById( 'slider' );		
	var SliderPercentObj = document.getElementById('slider-percent');	

	if( (PrevSliderX-SliderWidth/2) >= SliderSheetLeft && 
		(PrevSliderX+SliderWidth/2) <= SliderSheetWidth ) {
		SliderObj.style.left = PrevSliderX - SliderWidth/2 - 5 + "px";	
	} else
	if( (PrevSliderX-SliderWidth/2) < SliderSheetLeft ) { 
		PrevSliderX = SliderSheetLeft + SliderWidth/2; 
		SliderObj.style.left = SliderSheetLeft - 5 + "px";			
	} else 
	if( (PrevSliderX+SliderWidth/2) > SliderSheetWidth ) { 
		PrevSliderX = SliderSheetWidth - SliderWidth/2; 
		SliderObj.style.left = SliderSheetWidth - SliderWidth - 5 + "px";			
	}

	var percent = Math.round( ((PrevSliderX - SliderWidth/2)/(SliderSheetWidth-SliderWidth))*100 )*2;
	SliderPercentObj.innerHTML = percent + '%';
	var OffsetX = PrevCursorX - X;
	PrevSliderX  = PrevSliderX - OffsetX;
	PrevCursorX = X;
	
	ImageScale(percent);
	
	return false;
}

function ImageScale( percent ) {
	var ImageObj = document.getElementById('image');
	ImageObj.width = Math.round(ImageWidth*percent/100);
	ImageObj.height = Math.round(ImageHeight*percent/100);
}

function DoReset() {
	var ImageObj = document.getElementById('image');
	var SliderObj = document.getElementById('slider');
	var SliderPercentObj = document.getElementById('slider-percent');

	//exeption: loading frame before page loads
	if( !ImageLeft && !ImageTop && !ImageWidth && !ImageHeight ) {
		return false;
	}
	ImageObj.style.left = ImageLeft + "px";
	ImageObj.style.top = ImageTop + "px";
	ImageObj.width = ImageWidth;
	ImageObj.height = ImageHeight;
	PrevImageX = ImageLeft;
	PrevImageY = ImageTop;

	SliderObj.style.left = SliderLeft + "px";
	SliderPercentObj.innerHTML = "100%";
	PrevSliderX = SliderLeft;
	return false;
}
function DoResult() {
	var FrameidObj = document.getElementById('frameidp');
	var WaiterObj = document.getElementById('waiter_save');
	if( WaiterObj ) {
		WaiterObj.style.display = "block";
	}

	var SaveButtonObj = document.getElementById('save');
	SaveButtonObj.style.display = "none";
	
	var OffsetX = PrevImageX - ImageLeft;
	var OffsetY = PrevImageY - ImageTop;

	var SliderPercentObj = document.getElementById('slider-percent');	
	var Scale = parseInt( SliderPercentObj.innerHTML );

	var OffsetXObj = document.getElementById('offsetxp');
	var OffsetYObj = document.getElementById('offsetyp');
	var ScaleObj = document.getElementById('scalep');

	OffsetXObj.value = OffsetX;
	OffsetYObj.value = OffsetY;
	ScaleObj.value = Scale;
	
	return true;
}

window.onload = Init;
document.onmousemove = MouseMove;
document.onmousedown = MouseClickDown;
document.onmouseup = MouseClickUp;