// JavaScript Document
 

	

jQuery(document).ready( function() {
								 
								 
	jQuery('.open_order').mouseover( function(){
									jQuery(this).addClass('ui-state-hover') ;
											  }
									);
	
		jQuery('.open_order').mouseout( function(){
									jQuery(this).removeClass('ui-state-hover') ;
											  }
									);
								 
	jQuery('.open_order').click( function () {
										   
		var $current_div = jQuery(this).parent();
		var $gallery_num = jQuery($current_div).children(".gallery_num").text();
		var $image_num = jQuery($current_div).children(".image_num").text();
		var $image_url = jQuery($current_div).children(".image_url").text();
		var $post_page = jQuery($current_div).children(".page_permalink").text();

		
	
		jQuery($current_div).append("<div class='order_form'></div>");
		jQuery('.order_form').append("<div class='form_rightside'></div>");		
		jQuery('.order_form').append("<div class='form_leftside'></div>");
	
		jQuery('.form_leftside').append("<img src=\'"+$image_url+"\' width=100>");
		jQuery('.form_leftside').append("Image#:"+$gallery_num+"-"+$image_num+" <br/>");
		var $php_tester = '<?php echo "hello_php" ; ?>' ;
		jQuery('.form_leftside').append( $php_tester+"hi <br/>");
		jQuery('.form_leftside').append("<p id='price_total' >Total: $ 0 </p>");

		jQuery('.form_rightside').append("<p>For now, you can submit orders for prints through this form. Don't forget to check out other products we offer listed under Pricing.</p>");
		jQuery('.form_rightside').append('<form action="'+$post_page+'" method="post" enctype="multipart/form-data" class="order_input" target="_parent"> </form>');
		jQuery('.order_input').append( '<input type="hidden" name="product_id" value="image#'+$gallery_num+'-'+$image_num+'" />');

			jQuery('.order_input').append("<table id='table_for_prints'></table>");
			
/*row 1 of the table for print orders starts here*/	

				jQuery('#table_for_prints').append("<tr id='prints_row_1'></tr>");
		
					jQuery('#prints_row_1').append("<td id='row1_box1'></td>");
						jQuery('#row1_box1').append("16x20 Canvas: $110/ea. " );
		
					jQuery('#prints_row_1').append("<td id='row1_box2' height=30></td>");
						jQuery('#row1_box2').append('<select class="form_selections" id="16x20canvas" name="16x20canvas" size="1"></select>');
						jQuery('#16x20canvas').append('<option value="0">0</option>');
						jQuery('#16x20canvas').append('<option value="1">1</option>');
						jQuery('#16x20canvas').append('<option value="2">2</option>');
						jQuery('#16x20canvas').append('<option value="3">3</option>');
						jQuery('#16x20canvas').append('<option value="4">4</option>');
						jQuery('#16x20canvas').append('<option value="5">5</option>');
						jQuery('#16x20canvas').append('<option value="6">6</option>');
						jQuery('#16x20canvas').append('<option value="7">7</option>');
						jQuery('#16x20canvas').append('<option value="8">8</option>');
						jQuery('#16x20canvas').append('<option value="9">9</option>');
						jQuery('#16x20canvas').append('<option value="10">10</option>');

					jQuery('#prints_row_1').append("<td id='row1_box3'></td>");
						jQuery('#row1_box3').append("16x20 Print: $60/ea. " );
						
					jQuery('#prints_row_1').append("<td id='row1_box4' height=30></td>");
						jQuery('#row1_box4').append('<select class="form_selections" id="16x20print" name="16x20print" size="1"></select>');
						jQuery('#16x20print').append('<option value="0">0</option>');
						jQuery('#16x20print').append('<option value="1">1</option>');
						jQuery('#16x20print').append('<option value="2">2</option>');
						jQuery('#16x20print').append('<option value="3">3</option>');
						jQuery('#16x20print').append('<option value="4">4</option>');
						jQuery('#16x20print').append('<option value="5">5</option>');
						jQuery('#16x20print').append('<option value="6">6</option>');
						jQuery('#16x20print').append('<option value="7">7</option>');
						jQuery('#16x20print').append('<option value="8">8</option>');
						jQuery('#16x20print').append('<option value="9">9</option>');
						jQuery('#16x20print').append('<option value="10">10</option>');

/*row 2 of the table for print orders starts here*/

				jQuery('#table_for_prints').append("<tr id='prints_row_2'></tr>");
		
					jQuery('#prints_row_2').append("<td id='row2_box1'></td>");
						jQuery('#row2_box1').append("11x14 Canvas: $60/ea. " );
		
					jQuery('#prints_row_2').append("<td id='row2_box2' height=30></td>");
						jQuery('#row2_box2').append('<select class="form_selections" id="11x14canvas" name="11x14canvas" size="1"></select>');
						jQuery('#11x14canvas').append('<option value="0">0</option>');
						jQuery('#11x14canvas').append('<option value="1">1</option>');
						jQuery('#11x14canvas').append('<option value="2">2</option>');
						jQuery('#11x14canvas').append('<option value="3">3</option>');
						jQuery('#11x14canvas').append('<option value="4">4</option>');
						jQuery('#11x14canvas').append('<option value="5">5</option>');
						jQuery('#11x14canvas').append('<option value="6">6</option>');
						jQuery('#11x14canvas').append('<option value="7">7</option>');
						jQuery('#11x14canvas').append('<option value="8">8</option>');
						jQuery('#11x14canvas').append('<option value="9">9</option>');
						jQuery('#11x14canvas').append('<option value="10">10</option>');

					jQuery('#prints_row_2').append("<td id='row2_box3'></td>");
						jQuery('#row2_box3').append("11x14 Print: $20/ea. " );
						
					jQuery('#prints_row_2').append("<td id='row2_box4' height=30></td>");
						jQuery('#row2_box4').append('<select class="form_selections" id="11x14print" name="11x14print" size="1"></select>');
						jQuery('#11x14print').append('<option value="0">0</option>');
						jQuery('#11x14print').append('<option value="1">1</option>');
						jQuery('#11x14print').append('<option value="2">2</option>');
						jQuery('#11x14print').append('<option value="3">3</option>');
						jQuery('#11x14print').append('<option value="4">4</option>');
						jQuery('#11x14print').append('<option value="5">5</option>');
						jQuery('#11x14print').append('<option value="6">6</option>');
						jQuery('#11x14print').append('<option value="7">7</option>');
						jQuery('#11x14print').append('<option value="8">8</option>');
						jQuery('#11x14print').append('<option value="9">9</option>');
						jQuery('#11x14print').append('<option value="10">10</option>');

/*row 3 of the table for print orders starts here*/

				jQuery('#table_for_prints').append("<tr id='prints_row_3'></tr>");
		
					jQuery('#prints_row_3').append("<td id='row3_box1'></td>");
						jQuery('#row3_box1').append("8x10: $15/ea. " );
		
					jQuery('#prints_row_3').append("<td id='row3_box2' height=30></td>");
						jQuery('#row3_box2').append('<select class="form_selections" id="8x10print" name="8x10print" size="1"></select>');
						jQuery('#8x10print').append('<option value="0">0</option>');
						jQuery('#8x10print').append('<option value="1">1</option>');
						jQuery('#8x10print').append('<option value="2">2</option>');
						jQuery('#8x10print').append('<option value="3">3</option>');
						jQuery('#8x10print').append('<option value="4">4</option>');
						jQuery('#8x10print').append('<option value="5">5</option>');
						jQuery('#8x10print').append('<option value="6">6</option>');
						jQuery('#8x10print').append('<option value="7">7</option>');
						jQuery('#8x10print').append('<option value="8">8</option>');
						jQuery('#8x10print').append('<option value="9">9</option>');
						jQuery('#8x10print').append('<option value="10">10</option>');

					jQuery('#prints_row_3').append("<td id='row3_box3'></td>");
						jQuery('#row3_box3').append("(2)5x7-1 pose: $15/ea. " );
						
					jQuery('#prints_row_3').append("<td id='row3_box4' height=30></td>");
						jQuery('#row3_box4').append('<select class="form_selections" id="5x7sheet" name="5x7sheet" size="1"></select>');
						jQuery('#5x7sheet').append('<option value="0">0</option>');
						jQuery('#5x7sheet').append('<option value="1">1</option>');
						jQuery('#5x7sheet').append('<option value="2">2</option>');
						jQuery('#5x7sheet').append('<option value="3">3</option>');
						jQuery('#5x7sheet').append('<option value="4">4</option>');
						jQuery('#5x7sheet').append('<option value="5">5</option>');
						jQuery('#5x7sheet').append('<option value="6">6</option>');
						jQuery('#5x7sheet').append('<option value="7">7</option>');
						jQuery('#5x7sheet').append('<option value="8">8</option>');
						jQuery('#5x7sheet').append('<option value="9">9</option>');
						jQuery('#5x7sheet').append('<option value="10">10</option>');
						
/*row 4 of the table for print orders starts here*/

				jQuery('#table_for_prints').append("<tr id='prints_row_4'></tr>");
		
					jQuery('#prints_row_4').append("<td id='row4_box1'></td>");
						jQuery('#row4_box1').append("(1)5x7: $10/ea. " );
		
					jQuery('#prints_row_4').append("<td id='row4_box2' height=30></td>");
						jQuery('#row4_box2').append('<select class="form_selections" id="5x7single" name="5x7single" size="1"></select>');
						jQuery('#5x7single').append('<option value="0">0</option>');
						jQuery('#5x7single').append('<option value="1">1</option>');
						jQuery('#5x7single').append('<option value="2">2</option>');
						jQuery('#5x7single').append('<option value="3">3</option>');
						jQuery('#5x7single').append('<option value="4">4</option>');
						jQuery('#5x7single').append('<option value="5">5</option>');
						jQuery('#5x7single').append('<option value="6">6</option>');
						jQuery('#5x7single').append('<option value="7">7</option>');
						jQuery('#5x7single').append('<option value="8">8</option>');
						jQuery('#5x7single').append('<option value="9">9</option>');
						jQuery('#5x7single').append('<option value="10">10</option>');

					jQuery('#prints_row_4').append("<td id='row4_box3'></td>");
						jQuery('#row4_box3').append("(4)3x5-1 pose: $15/ea. " );
						
					jQuery('#prints_row_4').append("<td id='row4_box4' height=30></td>");
						jQuery('#row4_box4').append('<select class="form_selections" id="3x5sheet" name="3x5sheet" size="1"></select>');
						jQuery('#3x5sheet').append('<option value="0">0</option>');
						jQuery('#3x5sheet').append('<option value="1">1</option>');
						jQuery('#3x5sheet').append('<option value="2">2</option>');
						jQuery('#3x5sheet').append('<option value="3">3</option>');
						jQuery('#3x5sheet').append('<option value="4">4</option>');
						jQuery('#3x5sheet').append('<option value="5">5</option>');
						jQuery('#3x5sheet').append('<option value="6">6</option>');
						jQuery('#3x5sheet').append('<option value="7">7</option>');
						jQuery('#3x5sheet').append('<option value="8">8</option>');
						jQuery('#3x5sheet').append('<option value="9">9</option>');
						jQuery('#3x5sheet').append('<option value="10">10</option>');
						
/*row 5 of the table for print orders starts here*/

				jQuery('#table_for_prints').append("<tr id='prints_row_5'></tr>");
		
					jQuery('#prints_row_5').append("<td id='row5_box1'></td>");
						jQuery('#row5_box1').append("(9)wallets: $15/ea. " );
		
					jQuery('#prints_row_5').append("<td id='row5_box2' height=30></td>");
						jQuery('#row5_box2').append('<select class="form_selections" id="wallets" name="wallets" size="1"></select>');
						jQuery('#wallets').append('<option value="0">0</option>');
						jQuery('#wallets').append('<option value="1">1</option>');
						jQuery('#wallets').append('<option value="2">2</option>');
						jQuery('#wallets').append('<option value="3">3</option>');
						jQuery('#wallets').append('<option value="4">4</option>');
						jQuery('#wallets').append('<option value="5">5</option>');
						jQuery('#wallets').append('<option value="6">6</option>');
						jQuery('#wallets').append('<option value="7">7</option>');
						jQuery('#wallets').append('<option value="8">8</option>');
						jQuery('#wallets').append('<option value="9">9</option>');
						jQuery('#wallets').append('<option value="10">10</option>');
						
						
		function sum_total() {
			
			var $total = jQuery('#16x20canvas').attr('value') * 110 ;
			$total = $total + ( jQuery('#16x20print').attr('value') * 60 ) ;
			$total = $total + ( jQuery('#11x14canvas').attr('value') * 60 ) ;
			$total = $total + ( jQuery('#11x14print').attr('value') * 20 ) ;
			$total = $total + ( jQuery('#8x10print').attr('value') * 15 ) ;
			$total = $total + ( jQuery('#5x7sheet').attr('value') * 15 ) ;			
			$total = $total + ( jQuery('#5x7single').attr('value') * 10 ) ;			
			$total = $total + ( jQuery('#3x5sheet').attr('value') * 15 ) ;
			$total = $total + ( jQuery('#wallets').attr('value') * 15 ) ;
			
			jQuery('#price_total').html("Total: $ "+$total); 
		}
		
		
		jQuery('.form_selections').change( function() {

			var $print_size = jQuery(this).attr('id');
			var $print_qty = jQuery(this).attr('value');
			var $current_selection_id = '#selected_size_'+$print_size ;
			
			if ( jQuery($current_selection_id).length ) {
				
				jQuery($current_selection_id).html($print_size+' -'+$print_qty);
				
			} else {
				jQuery('.form_leftside').append('<p id="selected_size_'+$print_size+'">'+$print_size+' -'+$print_qty+'</p>');

			}
			sum_total();
			
		});
		
		jQuery('.order_form').dialog( {
			modal: true ,
			autoOpen: false ,
			width: 600 ,
			height: 700,
			resizable: false ,
			show: 'blind' ,
			hide: 'explode' ,
			title: 'Picture Order Form' ,
			buttons: { "Add to Order": function() {
				jQuery('.order_input').submit();
	//			<form method="post"  action="" style="display:inline" onsubmit="return ReadForm(this, true);">
	//			<input type="submit" value="Add to Cart" />
	//			<input type="hidden" name="product" value="picture" />
	//			<input type="hidden" name="price" value="15" />
	//			<input type="hidden" name="product_tmp" value="picture" />
	//			<input type="hidden" name="cartLink" value="http://trijen.com/?p=1077" />
	//			<input type="hidden" name="addcart" value="1" />
	//			</form>				
				
				
				
				
				jQuery('.order_form').remove();
				jQuery(this).dialog("close"); 
				} ,
				"Cancel": function() {
				jQuery('.order_form').remove();
				jQuery(this).dialog("close"); 
				}
			}
		});
		jQuery( 'a.ui-dialog-titlebar-close' ).remove();
		jQuery('.order_form').dialog('open');									   										   
	});	 
});