window.addEvent('domready', SetupMoreVendorsSlide);

var scrollLeft = true;
var scrollRight = true;
var isOpen = false;

function SetupMoreVendorsSlide()
{
	var mktid = $('MoreVendorsSlideOut').getAttribute('marketid');
	var catid = $('MoreVendorsSlideOut').getAttribute('catid');
	var listingid = $('MoreVendorsSlideOut').getAttribute('listingid');
	
	$('MoreVendorsSlideOutButton').onclick = function()
	    { 
	        $('btnViewAllVendors').innerText = 'Vendors Loading ';
	        if (isOpen) CloseMoreVendorsSlide();
	        ajaxDoHtmlRequest('/handlers/morevendorshandler.ashx?marketid=' + mktid + '&catid=' + catid + '&listingid=' + listingid, 'ajaxMoreVendorsResults', SlideHorizontal, null); 
	    }
}

function BindSlideOutEvents()
{
    $$('.vendorResult').each
	    (
		    function(item)
		    {
    		
			    var myEffect = new Fx.Morph(item, 
				    {
					    duration: '300', 
					    transition: Fx.Transitions.Sine.easeIn 
				    }
			    );
    			
    			if(!Browser.Engine.trident4) 
                {
                    // dont do mouseovers on IE6!
			        item.addEvent('mouseover',
				        function()
				        {
					         ResetWidths();
					         myEffect.start({
			                    'width': [item.getStyle('width').toInt(), 110],
				                'height': [item.getStyle('height').toInt(), 110],
				                'margin': [item.getStyle('margin'), -15],
				                'z-index': [item.getStyle('z-index'), 4],
				                'position': ['relative', 'absolute']
			                });
				        }
			        );
			        item.addEvent('mouseout',
				        function()
				        {
					        myEffect.cancel();
					        ResetWidths();
				        }
			        );
			    }
			    
		    }
	    );
	    
	$('vendorScrollLeft').addEvent('click', function(){ scrollLeft = false; PanLeft(); });
	$('vendorScrollLeft').addEvent('mouseenter', function(){ scrollLeft = true; ScrollLeft(); });
	$('vendorScrollLeft').addEvent('mouseleave', function(){ scrollLeft = false;} );
	
	$('vendorScrollRight').addEvent('click', function(){ scrollRight = false; PanRight(); });
	$('vendorScrollRight').addEvent('mouseenter', function(){ scrollRight = true; ScrollRight();});	
	$('vendorScrollRight').addEvent('mouseleave', function(){ scrollRight = false;} );
}

function SlideHorizontal()
{
	$('btnViewAllVendors').innerText = 'View All Vendors';

    var myEffect = new Fx.Morph('MoreVendorsSlideOut', 
		{
			duration: '300', 
			transition: Fx.Transitions.Linear, 
			onStart: function() { $('closeBtn').setStyle('display', 'none'); isOpen = false; },
			onComplete: function() { SlideVertical();  BindSlideOutEvents();}
		}
	);
	
	if (isOpen == false)
	{
		$('MoreVendorsSlideOut').setStyle('display', 'block');
		$('MoreVendorsSlideOut').setStyle('height', '10');
		$('VendorResults').setStyle('right', '');
	
		myEffect.start({
			'width': [0, 294],
			'height': [12, 12]
		});
	}
	
}

function SlideVertical()
{
    var myEffect = new Fx.Morph('MoreVendorsSlideOut', 
		{
			duration: '1000', 
			transition: Fx.Transitions.Bounce.easeOut, 
			onStart: function() { $('closeBtn').setStyle('display', 'none'); isOpen = false; },
			onComplete: function() { $('closeBtn').setStyle('display', 'block'); isOpen = true; }
		}
	);
	
	if (isOpen == false)
	{
		$('MoreVendorsSlideOut').setStyle('display', 'block');
		$('MoreVendorsSlideOut').setStyle('height', '12');
		$('VendorResults').setStyle('right', '');
	
		myEffect.start({
			'height': [12, 435]
		});
		
		
	}
}
/*
function ScrollToInitialPosition()
{
    // scroll the current listing into view
	var activeListing = $$('.vendorResultActive');
	var pos = activeListing[0].getAttribute('VendorPosition').toInt();
	
	var myScrollEffect = new Fx.Morph('VendorResults', 
		{
			duration: '400', 
			transition: Fx.Transitions.Sine.easeIn
		}
	);
	
	var leftPos = $('VendorResults').offsetLeft.toInt();
	
	myScrollEffect.start  
	({
		'left': [leftPos, Math.min(leftPos - (22 * pos), 0)]
	});
}
*/
function ResetWidths()
{
	$$('.vendorResult').each
	(
		function(item)
		{
		    
		        if (item.getStyle('width').toInt() != 80)
		        {
			        var myEffect = new Fx.Morph(item, 
				        {
					        duration: '200', 
					        transition: Fx.Transitions.Sine.easeIn 
				        }
			        );
        			
        			
		            myEffect.start({
			            'width': [item.getStyle('width').toInt(), 80],
				        'height': [item.getStyle('height').toInt(), 80],
				        'margin': [item.getStyle('margin'), 0],
				        'z-index': [item.getStyle('z-index'), 1],
				        'position': ['absolute', 'relative']
			        });
			    }
			
		}
				
	);
}

function CloseMoreVendorsSlide()
{
	$('MoreVendorsSlideOut').setStyle('display', 'none');
	$('MoreVendorsSlideOut').setStyle('height', '12');
	isOpen = false;
}

function ScrollLeft()
{
	var myScrollEffect = new Fx.Morph('VendorResults', 
		{
			duration: '400', 
			transition: Fx.Transitions.Sine.easeIn,
			onComplete: function() { if (scrollLeft) ScrollLeft(); } 
		}
	);
	
	var rightPos = (($('VendorResults').getStyle("width").toInt() -  $('MoreVendorsSlideOut').getStyle("width").toInt()) + $('VendorResults').offsetLeft) * -1;
	var leftPos = $('VendorResults').offsetLeft.toInt();
	
	if(leftPos <= -10)
	{
		if (scrollLeft)
		{
			myScrollEffect.start  
			({
				'left': [leftPos, Math.min(leftPos + 86, 0)]
			});
		}
	}
	else
	{
		scrollLeft = false;
	}
	
}

function ScrollRight()
{
    
    
	var myScrollEffect = new Fx.Morph('VendorResults', 
		{
			duration: '400', 
			transition: Fx.Transitions.Sine.easeIn,
			onComplete: function() { if (scrollRight) ScrollRight(); } 
		}
	);
	
	var rightPos = (($('VendorResults').getStyle("width").toInt() -  $('MoreVendorsSlideOut').getStyle("width").toInt()) + $('VendorResults').offsetLeft) * -1;
	var leftPos = $('VendorResults').offsetLeft.toInt();
	
	//alert( $('VendorResults').getStyle("left") + ', (' + $('VendorResults').getStyle("width") + '-' +  $('MoreVendorsSlideOut').getStyle("width") + '+' + $('VendorResults').offsetLeft + '),' + rightPos);
	//if(0 >= $('VendorResults').getStyle("right").toInt())
	if(rightPos <= 0)
	{
		if (scrollRight)
		{
			myScrollEffect.start
			({
				// 'left': [$('VendorResults').getStyle("left").toInt(), Math.min($('VendorResults').getStyle("left").toInt() - 86, 0)]
				'left': [leftPos, Math.min(leftPos - 86, 0)]
			});
		}
	}
	else
	{
		scrollRight = false;
	}
}

function PanLeft()
{
	var myScrollEffect = new Fx.Morph('VendorResults', 
		{
			duration: '250', 
			transition: Fx.Transitions.Sine.easeIn
		}
	);
	
	var rightPos = (($('VendorResults').getStyle("width").toInt() -  $('MoreVendorsSlideOut').getStyle("width").toInt()) + $('VendorResults').offsetLeft) * -1;
	var leftPos = $('VendorResults').offsetLeft.toInt();
	
	if(leftPos <= -10)
	{
		myScrollEffect.start
		({
			'left': [leftPos, Math.min(leftPos + 200, 0) ]
		});
	}
}

function PanRight()
{
	var myScrollEffect = new Fx.Morph('VendorResults', 
		{
			duration: '250', 
			transition: Fx.Transitions.Sine.easeIn
		}
	);
	
	var rightPos = (($('VendorResults').getStyle("width").toInt() -  $('MoreVendorsSlideOut').getStyle("width").toInt()) + $('VendorResults').offsetLeft) * -1;
	var leftPos = $('VendorResults').offsetLeft.toInt();
	
	if(rightPos < 0)
	{
		myScrollEffect.start
		({
			'left': [leftPos, Math.min(leftPos - 200, 0)]
		});
	}
}