var boxes = new Array();
var flashLoaded = false;

function setup_color( id, colorArr, idValue )
{
	div = $j( '#' + id );
	
	for( var i=0; i<colorArr.length; i++ )
	{
		boxes[i] = $j( '<div class="' + colorArr[i][2] + '"><span class="colorname">' + colorArr[i][1] + '</span><span class="id"> ' + colorArr[i][0] + '</span></div>' );
		
		if( colorArr[i][3] )
		{
			$j( '#' + idValue ).val( colorArr[i][0] );
			boxes[i].addClass( 'active' );
			
			if( id == 'color-selection' )
			{
				$j( '#preview-back-color' ).attr( 'class', 'back_' + colorArr[i][2] );
			}
			else
			{
				$j( '#preview-pattern-color' ).attr( 'class', 'pattern_' + colorArr[i][2] );
			}
		}
		
		if( id == 'color-selection' )
		{
			boxes[i].click( function()
			{
				$j( '#' + idValue ).val( parseInt( $j( this ).find( '.id' ).html() ) );
				
				$j( this ).parent().find( 'div' ).removeClass( 'active' );
				$j( this ).addClass( 'active' );
				
				$j( '#preview-back-color' ).attr( 'class', 'back_' + $j( this ).attr('class').split(' ').slice(0,1) );
			});
		}
		else
		{
			boxes[i].click( function()
			{
				$j( '#' + idValue ).val( parseInt( $j( this ).find( '.id' ).html() ) );
				
				$j( this ).parent().find( 'div' ).removeClass( 'active' );
				$j( this ).addClass( 'active' );
				
				$j( '#preview-pattern-color' ).attr( 'class', 'pattern_' + $j( this ).attr('class').split(' ').slice(0,1) );
			});
		}
		
		boxes[i].hover(
			function()
			{
				$j( this ).addClass( 'hoverstat' );
			},
			function()
			{
				$j( this ).removeClass( 'hoverstat' );
			}
		);
		
		div.append(boxes[i]);
	}
	
	tooltip( id );
}

function setup_price()
{
	var pwidth = $j('#price_large' ).width();
	$j( '#price_large_back' ).css({ width: pwidth+'px' });
	$j( '#price_large_back' ).fadeTo( 1, 0.5 );
}

/* init buttons */
$j( '#gotoBack' ).click(
	function()
	{
		gobackToOverwiew();
	}
);
$j( '#gotoBackOptions' ).click(
	function()
	{
		gobackToOptions();
	}
);
$j( '#gotoPattern' ).click(
	function()
	{
		gotoPattern();
	}
);

$j( '.product_image img' ).fadeTo( 1, 0.9 );

/* buttons actions */
function gobackToOverwiew()
{
	$j( '.product-box' ).html( '' ).css({ display: 'none' });
	$j( '.product-listing').css({ display: 'block' });
	
	$j( '.product-listing').css({ overflow: 'normal', display: 'block' });
	//$j( '.product-listing').animate( { height: oldHeight+'px' } , 500 );
}
function gotoPattern()
{
	$j( '.optionsbox' ).css({ display: 'none' });
	$j( '.patternbox' ).css({ display: 'block' });
	
	if( !flashLoaded )
	{
		var flashvars = {
	      patternWidth: patternDim[0],
	      patternHeight: patternDim[1]
	    };
		var params = {};
		var attributes = {};
		
		swfobject.embedSWF("/skin/frontend/default/blank/flash/Controller.swf", "patterngenerator", "370", "400", "9.0.0","expressInstall.swf", flashvars, params, attributes);
	}
	
	flashLoaded = true;
}
function gobackToOptions()
{
	$j( '.optionsbox' ).css({ display: 'block' });
	$j( '.patternbox' ).css({ display: 'none' });
}

/* external interface to flash */
function savePatternData( patternString, flvUrl )
{
	$j( '#' + inputPattern ).val( patternString );
	$j( '#' + inputFlvname ).val( flvUrl );
	
	$j( '.add-to-cart' ).css({ display: 'block' }); // enable order submit
	
	if( lang == 'de' )
		$j( '.generator-tips' ).html( 'Ihr Muster ist fertig! Wenn es Ihnen gefällt, dann können Sie das Produkt in den Warenkorb legen. Ansonsten probieren Sie es doch einfach nochmal, in dem Sie auf den roten Button klicken.' );
	if( lang == 'en' )
		$j( '.generator-tips' ).html( 'Your pattern is done! If you like it already then add this product to the cart. Otherwise take your time and retry by clicking the red button again.' );
}
function error( error_id )
{
	if( error_id == 'nomic' )
	{
		if( lang == 'de' )
			$j( '.generator-tips' ).html( 'Sie haben den Zugriff auf das Mikrophon nicht erlaubt. Bitte laden Sie die Seite neu und erlauben Sie den Zugriff.' );
		if( lang == 'en' )
			$j( '.generator-tips' ).html( 'You did not allow access to your microphone. Please reload this site and grant access to start recording process.' );
	}
}
function put_status( status_id )
{
	if( status_id == 'ready' )
	{
		if( lang == 'de' )
			$j( '.generator-tips' ).html( 'Starten Sie die Aufnahme in dem Sie den roten Button drücken.<br/> Mit Hilfe des Reglers können Sie die Eingangslautstärke ihres Mikrofons anpassen.' );
		if( lang == 'en' )
			$j( '.generator-tips' ).html( 'Start the recording process by clicking the red button.<br/> Use the slider to adjust your input volume.' );
	}
}

/* tooltip */
function tooltip( id )
{	
	xOffset = 10;
	yOffset = 20;
	
	$j( '#' + id ).find( 'div' ).each( function()
	{
		
		$j( this ).hover(
			function( e )
			{
				this.t = $j( this ).find( '.colorname' ).html();
				$j( '#tooltip' ).css({ display: 'block', top: ( e.pageY - xOffset ) + 'px', left: ( e.pageX + yOffset ) + 'px' }).html( this.t );
		    },
			function()
			{
				$j( '#tooltip' ).css({ display: 'none' });
		    }
		);
	});
	
	$j( '#' + id + ' div' ).each( function()
	{
		$j( this ).mousemove(
			function( e )
			{
				$j( '#tooltip' ).css({ top: ( e.pageY - xOffset ) + 'px', left: ( e.pageX + yOffset ) + 'px' });
			}
		);
	});
}