var _zoom = 1;			// Main zoom level
var _vps = null;		// ViewPort size
var _iconClass = 'icon first-child';
var _drawObject = 'Rectangle';

// DOM objects
var _dropDown_DrawSelection = null;
var _checkBox_Fill = null;
var _checkBox_Alpha = null;
var _label = null;
var _drawOptions = null;
var _imageUploader = null;

var _autoZoomGroup = null;
var _mouseToolGroup = null;
var _mainMenu = null;
var _mouseToolTips = [
	'Left click and drag to pan the image.',
	'Left click anywhere on the image to re-center the control\'s position.',
	'Click and drag to make a rectangular selection. Click outside the selection to remove it.',
	'Click and drag to make a rectangular selection. An ellipse will be rendered inside the selected area.',
	'Click and drag to make a rectangular selection. A rectangle will be rendered inside the selected area.',
	'Click and drag to make a rectangular selection. Sample text will be rendered inside the selected area.',
	'Click and drag to make a rectangular selection. An image will be rendered inside the selected area.',
	'Left click anywhere on the image to zoom in, right click to zoom out.',
	'Click and drag to make a rectangular selection. The area you select will be zoomed into.'
]
var _autoZoomTips = [
	'Turns off automatic zooming, and sets the current zoom level to 1:1',
	'Turns on automatic zooming. Fits the image inside the viewable area.',
	'Turns on automatic zooming. Fits the image inside the viewable width',
	'Turns on automatic zooming. Fits the image inside the viewable height'
]


atalaInitClientScript(OnMultiDemoLoad);
function OnMultiDemoLoad(){
	// window events
	window.onresize = onWindowResize;
/*	
	if (atalaCheckBrowser() == 0 || atalaCheckBrowser() == 2){
		_iconClass = 'icon2 first-child';
	}
*/	
	// Create YUI button groups		
	_mouseToolGroup = new YAHOO.widget.ButtonGroup("ButtonGroup_MouseTool") ;
	_mouseToolGroup.addListener('checkedButtonChange', onMouseToolChange);
	_autoZoomGroup = new YAHOO.widget.ButtonGroup("ButtonGroup_AutoZoom") ;
	_autoZoomGroup.addListener('checkedButtonChange', onAutoZoomChange);
    
    _mainMenu = new YAHOO.widget.MenuBar("mainmenu", {
		autosubmenudisplay: true,    
		hidedelay: 750,    
		lazyload: true 
	});   
	
	_mainMenu.render();   

	// Turn YUI text buttons into image buttons
	setupToolbarIcons(_mouseToolGroup.getButtons(), _mouseToolTips);
	setupToolbarIcons(_autoZoomGroup.getButtons(), _autoZoomTips);

	// main viewer events
	WebImageViewerMain.ScrollPositionChanged = onMainPositionChanged;
	WebImageViewerMain.ZoomChanged = onMainZoomChanged;
	WebImageViewerMain.ImageChanged = onImageChanged;
	WebImageViewerMain.RemoteInvoked = onRemoteInvoked;

	// thumb events
	WebImageViewerPreview.getSelection().Changing = onPreviewSelectionChanging;
	WebImageViewerPreview.ImageSizeChanged = sizeThumbSelection;

	// dom objects
	_checkBox_Fill = document.getElementById('CheckBox_Fill');
	_checkBox_Alpha = document.getElementById('CheckBox_Alpha');
	_label = document.getElementById('tooltip');
	_drawOptions = document.getElementById('DrawOptions');
	_imageUploader = document.getElementById('ImageUploader');

       // disable drawing tools for initial run
	_checkBox_Fill.disabled = 'disabled';
	_checkBox_Alpha.disabled = 'disabled';

	// call this once to set up initial size and status
	onWindowResize();
	onDropDown_MouseToolChanged(6, _mouseToolTips[0]);
}

function setupToolbarIcons(buttons, tips){
	for (var i = 0; i < buttons.length; i++){
		var name = buttons[i].get('value');
		buttons[i]._button.parentNode.style.backgroundImage = 'url(icons/' + name + '.png)';
		buttons[i]._button.parentNode.className = _iconClass;
		buttons[i]._button.parentNode.title = tips[i];
		buttons[i]._button.style.visibility = 'hidden';
		buttons[i].set('title', tips[i]);
	}
}

// handles a window resize, since the Main viewer width is dynamic	
function onWindowResize(){
	// It's possible to resize the height of the Main WebImageViewer here, so 
	// that the height can be dynamic too.  However, there are major differences
	// in the way that 100% height is interpreted by different browsers.  
	_vps = WebImageViewerMain.getViewPortSize();
	sizeThumbSelection();
}

// Sets the thumb control's selection location based on scroll position
function onMainPositionChanged(){
	var sp = WebImageViewerMain.getScrollPosition();
	sp.X = Math.round(-sp.X / _zoom);
	sp.Y = Math.round(-sp.Y / _zoom);
	WebImageViewerPreview.getSelection().setPosition(sp);
}

// Sets the main control's scroll position based on the selection postion
function onPreviewSelectionChanging(){
	var pp = WebImageViewerPreview.getSelection().getPosition();
	pp.X = Math.round(-pp.X * _zoom);
	pp.Y = Math.round(-pp.Y * _zoom);
	WebImageViewerMain.setScrollPosition(pp);
}

// Sets the other control's selection size based on the Zoom of the Main
function onMainZoomChanged(){
	_zoom = WebImageViewerMain.getZoom();
	sizeThumbSelection();
}

// Sets the size of the thumb's selection box, with respect to the current zoom and viewport size
function sizeThumbSelection(){
	var vp = WebImageViewerMain.getViewPortSize();
	vp.Width = Math.round(vp.Width / _zoom);
	vp.Height = Math.round(vp.Height / _zoom);
	WebImageViewerPreview.getSelection().setSize(vp);
}

// Opens the selected image
function onDropDown_ImageChanged(val){
	if (val == 'Upload'){
		_imageUploader.style.visibility = 'visible';
	}
	else{
		_imageUploader.style.visibility = 'hidden';
		WebImageViewerMain.OpenUrl(val);
	}
}

// Opens the new image in the preview
function onImageChanged(){
	WebImageViewerPreview.OpenUrl(WebImageViewerMain.getImageUrl());
}

function onAutoZoomChange(e){
	var az = AutoZoomMode.None;
	switch(e.newValue.get('value')){
		default:
		case 'None':
			az = AutoZoomMode.None;
			break;
		case 'FitBest':
			az = AutoZoomMode.BestFit;
			break;
		case 'FitWidth':
			az = AutoZoomMode.FitToWidth;
			break;
		case 'FitHeight':
			az = AutoZoomMode.FitToHeight;
			break;
	}
	
	onDropDown_AutoZoomChanged(az);
}

// Sets the autozoom, defaulting to 1:1 when zero
function onDropDown_AutoZoomChanged(val){
	WebImageViewerMain.setAutoZoom(val);
	if (val == 0){
		WebImageViewerMain.setZoom(1);
	}
}

function onMouseToolChange(e){
	var mt = 0;
	
	switch(e.newValue.get('value')){
		case 'None':
			break;
		case 'Center':
			mt = 1;
			break;
		case 'Selection':
			mt = 2;
			break;
		case 'ZoomIn':
			mt = 3;
			break;
		case 'ZoomOut':
			mt = 4;
			break;
		case 'ZoomSelection':
			_autoZoomGroup.check(0);
			mt = 5;
			break;
		case 'Pan':
			mt = 6;
			break;
		case 'Zoom':
			_autoZoomGroup.check(0);
			mt = 7;
			break;
		case 'Ellipse':
		case 'Rectangle':
		case 'Text':
		case 'Image':
			_drawObject = e.newValue.get('value');
			mt = 8;
			break;
	}
	
	onDropDown_MouseToolChanged(mt, e.newValue._button.parentNode.title);
}

// Changes the mouse tool, and staus bar tip
function onDropDown_MouseToolChanged(val, status){
	_label.innerHTML = '&nbsp;' + status;

	if (val == 7){	// Zoom requires two mouse buttons
		WebImageViewerMain.setMouseTool(3, 4);
	}
	else{
		WebImageViewerMain.setMouseTool(val, 0);
	}

	if (val == 8){	// Draw with selection box
		WebImageViewerMain.setMouseTool(2, 0);
		
		_drawOptions.style.visibility = 'visible';
//		_dropDown_DrawSelection.disabled = '';
		_checkBox_Fill.disabled = '';
		_checkBox_Alpha.disabled = '';

		WebImageViewerMain.getSelection().setMultiColor(false);
		WebImageViewerMain.getSelection().Changed = remoteDrawSelection;
	}
	else{
		_drawOptions.style.visibility = 'hidden';
		WebImageViewerMain.getSelection().setMultiColor(true);
		WebImageViewerMain.getSelection().Changed = function(){};

//		_dropDown_DrawSelection.disabled = 'disabled';
		_checkBox_Fill.disabled = 'disabled';
		_checkBox_Alpha.disabled = 'disabled';
	}
}

// Asynchronously processes the entire image based on the input command
function remoteProcessImage(val){
	var a = new Array();
		a.push(val);

	WebImageViewerMain.RemoteInvoke('Process_Image', a);
}

// Asynchronously processes selected region of the image based on the input command
function remoteProcessRegion(val){
	var a = new Array();
		a.push(val);

	WebImageViewerMain.RemoteInvoke('Process_Region', a);
}

// Asynchronously processes the image, changing the color depth, based on the input command
function remoteProcessColor(val){
	var a = new Array();
		a.push(val);

	WebImageViewerMain.RemoteInvoke('Process_Color', a);
}

// Asynchronously processes the image, drawing an object within the selection bounds
function remoteDrawSelection(){
	var a = [
		_drawObject,
//		_dropDown_DrawSelection.value,
		_checkBox_Fill.checked,
		_checkBox_Alpha.checked
	];

   	// Check if the selection is visible, since the server side function hides the selection box
	if (WebImageViewerMain.getSelection().getVisible()){
		WebImageViewerMain.RemoteInvoke('Draw_Selection', a);
	}
}

// Checks for errors after remote invokes
function onRemoteInvoked(){
    var err = WebImageViewerMain.getReturnValue();
    if (err != ''){
        onError(err);
    }
}

// Changes the antialias display mode
function onCheckBox_AntiAliasChanged(val){
	if(val){
		WebImageViewerMain.setAntialiasDisplay(2);
	}
	else{
		WebImageViewerMain.setAntialiasDisplay(0);
	}
}

// Do something with errors
function onError(err){
    alert(err);
}