var $picker=jQuery.noConflict();

function targetEventPicker(event) {
	var element = event.target || event.srcElement;
	var selected = $picker(element);
	changeDisplayPicker(selected);
}

function changeDisplayPicker(selected) {
	if(selected != null) {
		
		
		var display = selected.parents('.groupPicker').find('.picker').css('display');
		if(display == 'none'){
			
			//this line hides others open pickers
			selected.parents().find('.picker').css({'display': 'none'});
			var scrollTop = $picker(window).scrollTop();
			var scrollLeft = $picker(window).scrollLeft();
			
			var elementPositionTop = selected.parents('.groupPicker').find('div').find('span').offset().top;
			var elementPositionLeft = selected.parents('.groupPicker').find('div').find('span').offset().left;
			var elementHeight = selected.parents('.groupPicker').find('div').find('span').height();
		
			var windowHeight = $picker(window).height();
			var windowWidth = $picker(window).width();
		
			var wrapperWidth = selected.parents().find('.wrapper').offset().left;
		
			var componentPickerHeight = selected.parents('.groupPicker').find('.picker').height();
			var componentPickerWidth = selected.parents('.groupPicker').find('.picker').width();
			
			var left = 0;
			var top = 0;
			
			if ((elementPositionLeft + componentPickerWidth - scrollLeft) > windowWidth){
				if(componentPickerWidth > windowWidth)
					left = wrapperWidth;
				else
					left = windowWidth - componentPickerWidth  + scrollLeft -25;
			}
			else
				left = elementPositionLeft - wrapperWidth - 18;
					
			if ((elementPositionTop + componentPickerHeight + elementHeight - scrollTop) > windowHeight){
				if(componentPickerHeight > elementPositionTop)
					top = top - elementPositionTop + 12 + scrollTop;
				else
					top = top - componentPickerHeight + 12;
			}
			else
		 		top = elementHeight + 15;
			
			selected.parents('.groupPicker').find('.picker').css({'top': top,'left': left,'display': 'block'});
			hide(selected);	
		}
		else
			selected.parents('.groupPicker').find('.picker').css({'display': 'none'});
	}
}

function hide(selected)
{
	$picker(document).unbind('click');
	$picker(document).bind('click',function (e){	
			var target = e.target || e.srcElement;
			var selectTarget = $picker(target);
			
			if(selectTarget.parents('.groupPicker').find('.picker').is('div.picker'))
				return;
			else
			{
				selected.parents('.groupPicker').find('.picker').css({'display': 'none'});
				$picker(document).unbind('click');
			}
	});
}