Skip to content

Instantly share code, notes, and snippets.

@brandoncordell

brandoncordell/gist:799932

Created January 28, 2011 06:53
Show Gist options
  • Save brandoncordell/799932 to your computer and use it in GitHub Desktop.
Save brandoncordell/799932 to your computer and use it in GitHub Desktop.
Download ZIP
CreateMyScene.com/shop - products.js
Raw
gistfile1.js
<script type="text/javascript">
//<![CDATA[
var image_url = '<?=base_url()?>public/shared/images/products/';
$(document).ready(function()
{
/* hide some divs */
$('.wall, .window, .multiple_windows, .cart').hide();
/* disable checkout buttons */
$('.cont-img, .view-img, .co-img').css('cursor', 'default');
$('.cont-img').attr('src', '<?=$this->config->item('shared_images')?>continue-gray.png');
$('.view-img').attr('src', '<?=$this->config->item('shared_images')?>view-cart-gray.png');
$('.co-img').attr('src', '<?=$this->config->item('shared_images')?>checkout-gray.png');
$('.disabled_button').click(function() {
return false;
});
/* Grayscale the image */
$("#grayscale").click(function() {
var image = $('#full_photo_name').val();
var splitimage = image.split(".");
var grayscale_med = splitimage[0]+'_med_grayscale.'+splitimage[1];
var grayscale = splitimage[0]+'_grayscale.'+splitimage[1];
$('.prod_image').attr('src', image_url+grayscale_med);
$('.thickbox').attr('href', image_url+grayscale);
$("#image_styles").attr("value", "Grayscale");
$(".imagestyle").text('Grayscale');
});
/* Mirror the image */
$("#mirror").click(function() {
var image = $('#full_photo_name').val();
var splitimage = image.split(".");
var mirror_med = splitimage[0]+'_med_mirror.'+splitimage[1];
var mirror = splitimage[0]+'_mirror.'+splitimage[1];
$('.prod_image').attr('src', image_url+mirror_med);
$('.thickbox').attr('href', image_url+mirror);
$("#image_styles").attr("value", "Mirror");
$(".imagestyle").text('Mirror');
});
/* Mirror and grayscale the image */
$("#mirror_gray").click(function() {
var image = $('#full_photo_name').val();
var splitimage = image.split(".");
var mirror_gray_med = splitimage[0]+'_med_mirror_gray.'+splitimage[1];
var mirror_gray = splitimage[0]+'_mirror_gray.'+splitimage[1];
$('.prod_image').attr('src', image_url+mirror_gray_med);
$('.thickbox').attr('href', image_url+mirror_gray);
$("#image_styles").attr("value", "Mirror & Grayscale");
$(".imagestyle").text('Mirror & Grayscale');
});
/* Revert back to original image */
$("#original").click(function() {
var image = $('#full_photo_name').val();
var splitimage = image.split(".");
var med = splitimage[0]+'_med.'+splitimage[1];
$('.prod_image').attr('src', image_url+med);
$('.thickbox').attr('href', image_url+image);
$("#image_styles").attr("value", "Original");
$(".imagestyle").text('Original');
});
/* Initialize accordion */
$('div.product_right > div').addClass('hide');
$('.application').next('div').slideToggle(200, 'linear')
.siblings('div:visible').slideUp(200, 'linear');
/* make headers unclickable */
$('.application, .application_disabled, .material, .material_disabled, .size, .size_disabled').unbind('click').css('cursor', 'default');
$('div.product_right > h3').bind('click', function()
{
$(this).next('div').slideToggle(200, 'linear')
.siblings('div:visible').slideUp(200, 'linear');
});
/* take away click functionality */
$('.material_disabled, .size_disabled').unbind('click');
$('h3.applications').trigger('click');
/* click wall */
$('#wall_scene, .wall_scene').click(function(){
$('#application').attr('value', 'Wall');
$('span.app').text('Wall');
$('.material_disabled').addClass('material')
.removeClass('material_disabled')
.bind('click', function() {
$(this).next('div').slideToggle(200, 'linear')
.siblings('div:visible').slideUp(200, 'linear');
})
.trigger('click');
$('.application').addClass('application_disabled')
.removeClass('application')
.unbind('click').css('cursor', 'default');
$('.wall').show();
$('a#compare').attr('href', '<?=$this->config->item('shared_images')?>comp-wall.png');
});
/* click window */
$('#window_scene, .window_scene').click(function(){
$('#application').attr('value', 'Window');
$('span.app').text('Window');
$('.material_disabled').addClass('material')
.removeClass('material_disabled')
.bind('click', function() {
$(this).next('div').slideToggle(200, 'linear')
.siblings('div:visible').slideUp(200, 'linear');
})
.trigger('click');
$('.application').addClass('application_disabled')
.removeClass('application')
.unbind('click').css('cursor', 'default');
$('.window').show();
$('a#compare').attr('href', '<?=$this->config->item('shared_images')?>comp-window.png');
});
$('#adhesive_material, .adhesive_material').click(function() {
var application = $('#application').val();
$('#material').val('Adhesive');
var photo_name = $('p#photo_name').text();
$.post("<?=site_url('scenes/get_sizes')?>/"+application+"/"+photo_name, function(html) {
$('#sizes').html(html);
$('#medium').trigger('click');
var photo_name = $('p#photo_name').text();
var start = photo_name.length - 1;
var orientation = photo_name.substring(start);
var application = $('#application').val();
switch(application)
{
case 'Window':
if(orientation == 'L')
{
$('.min-require').text('Minimum size: 60in W x 36in H');
}
else if(orientation == 'S')
{
$('.min-require').text('Minimum size: 36in W x 36in H');
}
else if(orientation == 'V')
{
$('.min-require').text('Minimum size: 36in W x 60in H');
}
else if(orientation == 'P')
{
$('.min-require').text('Minimum size: 108in W x 36in H');
}
break;
case 'Wall':
if(orientation == 'L')
{
$('.min-require').text('Minimum size: 72in W x 48in H');
}
else if(orientation == 'S')
{
$('.min-require').text('Minimum size: 48in W x 48in H');
}
else if(orientation == 'V')
{
$('.min-require').text('Minimum size: 48in W x 72in H');
}
else if(orientation == 'P')
{
$('.min-require').text('Minimum size: 108in W x 36in H');
}
break;
default:
alert('default case...');
break;
}
});
$('span.mat').text('Adhesive');
$('.size_disabled').addClass('size')
.removeClass('size_disabled')
.bind('click', function() {
$(this).next('div').slideToggle(200, 'linear')
.siblings('div:visible').slideUp(200, 'linear');
})
.trigger('click');
$('.material').addClass('material_disabled')
.removeClass('material')
.unbind('click').css('cursor', 'default');
});
$('#non_adhesive_material, .non_adhesive_material').click(function() {
var application = $('#application').val();
$('#material').val('Non-adhesive');
var photo_name = $('p#photo_name').text();
$.post("<?=site_url('scenes/get_sizes')?>/"+application+"/"+photo_name, function(html) {
$('#sizes').html(html);
$('#medium').trigger('click');
var photo_name = $('p#photo_name').text();
var start = photo_name.length - 1;
var orientation = photo_name.substring(start);
var application = $('#application').val();
switch(application)
{
case 'Window':
if(orientation == 'L')
{
$('.min-require').text('Minimum size: 60in W x 36in H');
}
else if(orientation == 'S')
{
$('.min-require').text('Minimum size: 36in W x 36in H');
}
else if(orientation == 'V')
{
$('.min-require').text('Minimum size: 36in W x 60in H');
}
else if(orientation == 'P')
{
$('.min-require').text('Minimum size: 108in W x 36in H');
}
break;
case 'Wall':
if(orientation == 'L')
{
$('.min-require').text('Minimum size: 72in W x 48in H');
}
else if(orientation == 'S')
{
$('.min-require').text('Minimum size: 48in W x 48in H');
}
else if(orientation == 'V')
{
$('.min-require').text('Minimum size: 48in W x 72in H');
}
else if(orientation == 'P')
{
$('.min-require').text('Minimum size: 108in W x 36in H');
}
break;
default:
alert('default case...');
break;
}
});
$('span.mat').text('Non-adhesive');
$('.size_disabled').addClass('size')
.removeClass('size_disabled')
.bind('click', function() {
$(this).next('div').slideToggle(200, 'linear')
.siblings('div:visible').slideUp(200, 'linear');
})
.trigger('click');
$('.material').addClass('material_disabled')
.removeClass('material')
.unbind('click').css('cursor', 'default');
});
$('#multiple_yes').click(function() {
tb_show("","#TB_inline?height=450&width=800&inlineId=flyout&modal=true");
$('span.app').append(' / Multiple');
});
$('#multiple_no').click(function() {
var application = $('#application').val();
var photo_name = $('p#photo_name').text();
$.post("<?=site_url('scenes/get_sizes')?>/"+application+"/"+photo_name, function(html) {
$('#sizes').html(html);
$('#medium').trigger('click');
var photo_name = $('p#photo_name').text();
var start = photo_name.length - 1;
var orientation = photo_name.substring(start);
var application = $('#application').val();
switch(application)
{
case 'Window':
if(orientation == 'L')
{
$('.min-require').text('Minimum size: 60in W x 36in H');
}
else if(orientation == 'S')
{
$('.min-require').text('Minimum size: 36in W x 36in H');
}
else if(orientation == 'V')
{
$('.min-require').text('Minimum size: 36in W x 60in H');
}
else if(orientation == 'P')
{
$('.min-require').text('Minimum size: 108in W x 36in H');
}
break;
case 'Wall':
if(orientation == 'L')
{
$('.min-require').text('Minimum size: 72in W x 48in H');
}
else if(orientation == 'S')
{
$('.min-require').text('Minimum size: 48in W x 48in H');
}
else if(orientation == 'V')
{
$('.min-require').text('Minimum size: 48in W x 72in H');
}
else if(orientation == 'P')
{
$('.min-require').text('Minimum size: 108in W x 36in H');
}
break;
default:
alert('default case...');
break;
}
});
});
/* disable the enter key for our flyout form */
$('#flyout :input').keypress(function(e) {
if(e.which == 13)
{
return false;
}
});
$('#set_number_of_windows').click(function() {
var count = $('#number_of_windows').val();
for(var i = 1; i <= count; i++)
{
$('.boxes').append(i + '. <input class="width_box required" type="text" id="window_'+i+'_w" style="width: 40px;" <label for="window_'+i+'_w">W</label> in. x <input class="height_box required" type="text" id="window_'+i+'_h" style="width: 40px;" /><label for="window_'+i+'_h">H</label> in.<br />');
}
$('#flyout').animate({ scrollTop: $('#flyout').attr("scrollHeight") }, 3000);
});
$('.cancel-button').click(function() {
tb_remove();
});
$('#modal_submit').click(function() {
$('.error_message').css('display', 'none');
$('.required').css('outline', 'none');
var width = 0;
var height = 0;
var oh = $('#overall_height').val().length;
var ow = $('#overall_width').val().length;
var now = $('#number_of_windows').val().length;
if( oh <= 0 )
{
alert ('Please specify overall height.');
return false;
}
if( ow <= 0 )
{
alert('Please specify overall width.');
return false;
}
if( now <= 0 )
{
}
error = false;
$('.required').each(function(){
value = $(this).val();
if( value == "" ) {
$(this).css('outline', 'red solid thin');
error = true
}
});
if(error == true) {
$('.error_message').css('display', 'block');
return false;
}
/* get the total width of all the windows */
$('.width_box').each(function(){
width += parseFloat(this.value);
});
/*get the height of the windows */
$('.height_box').each(function(){
height += parseFloat(this.value);
});
$('#overall_w').val(width);
$('#overall_h').val(height);
//alert('Width: ' + width + ' x Height: ' + height);
var width = $('#overall_w').val();
var height = $('#overall_h').val();
var application = $('#application').val();
$.post("<?=site_url('scenes/get_custom_scene_pricing')?>/"+application+"/"+width+"/"+height, function(html){
$('.price').html(html);
var cost = $('.price_sp').text();
$('#span-total').text('Total: '+cost);
$('.siz').text('Custom (Verify sizes in your cart)');
$('#size').attr('value', 'Multiple');
$('a.cart').css('display', 'block');
$('#cost').attr('value', cost);
});
//alert($('#size').val());
tb_remove();
return false;
});
$('.private_material').click(function() {
$('#material').val('Opaque');
$('span.mat').text('Opaque');
$('.size_disabled').addClass('size')
.removeClass('size_disabled')
.bind('click', function() {
$(this).next('div').slideToggle(200, 'linear')
.siblings('div:visible').slideUp(200, 'linear');
})
.trigger('click');
$('.material').addClass('material_disabled')
.removeClass('material')
.unbind('click').css('cursor', 'default');
$('.multiple_windows').show();
});
$('.semi_private_material').click(function() {
$('#material').val('Clear');
$('span.mat').text('Clear');
$('.size_disabled').addClass('size');
$('.size').removeClass('size_disabled');
$('.material').addClass('material_disabled');
$('.material_disabled').removeClass('material');
$('.material_disabled').unbind('click').css('cursor', 'default');
$('.multiple_windows').show();
$('.size').bind('click', function() {
$(this).next('div').slideToggle(200, 'linear')
.siblings('div:visible').slideUp(200, 'linear');
}).trigger('click');
});
/*
$(document).ready(function(){
tb_show("","#TB_inline?height=190&width=400&inlineId=myOnPageContent&modal=true");
});
*/
$("#small, #medium, #large, #x-large").live("click", function() {
var height = $('.s-h').text();
var width = $('.s-w').text();
var id = "<?=$this->uri->segment(3)?>";
var application = $('#application').val();
var this_id = $(this).attr('id');
if(this_id == 'small') {
var height = $('.s-h').text();
var width = $('.s-w').text();
$('.siz').text('Small ('+width+' W x '+height+' H)');
$('#size').attr('value', 'Small ('+width+' W x '+height+' H)');
} else if(this_id == 'medium') {
var height = $('.m-h').text();
var width = $('.m-w').text();
$('.siz').text('Medium ('+width+' W x '+height+' H)');
$('#size').attr('value', 'Medium ('+width+' W x '+height+' H)');
} else if(this_id == 'large') {
var height = $('.l-h').text();
var width = $('.l-w').text();
$('.siz').text('Large ('+width+' W x '+height+' H)');
$('#size').attr('value', 'Large ('+width+' W x '+height+' H)');
} else if(this_id == 'x-large') {
var height = $('.x-h').text();
var width = $('.x-w').text();
$('.siz').text('Extra Large ('+width+' W x '+height+' H)');
$('#size').attr('value', 'Extra Large ('+width+' W x '+height+' H)');
}
$.post("<?=site_url('scenes/get_pricing')?>/"+id+"/"+application+"/"+width+"/"+height, function(html){
$('.price').html(html);
var cost = $('.price_sp').text();
$('#span-total').text('Total: '+cost);
$('#cost').attr('value', cost);
});
$('a.cart').css('display', 'block');
});
$('#custom').live('click', function() {
});
$('#submit_custom').live('click', function() {
var c_w = $('#custom_width').val();
var c_h = $('#custom_height').val();
var id = "<?=$this->uri->segment(3)?>";
var application = $('#application').val();
var photo_name = $('p#photo_name').text();
var start = photo_name.length - 1;
var orientation = photo_name.substring(start);
if(c_w === '' || c_h === '') {
alert('Please set your custom width and height');
return false;
}
switch(application)
{
case 'Window':
if(orientation == 'L' && (c_w < 60 || c_h < 36))
{
alert('Minimum dimensions for a custom landscape window scene are 60in W x 36in H');
return false;
}
else if(orientation == 'S' && (c_w < 36 || c_h < 36))
{
alert('Minimum dimensions for a custom square window scene are 36in W x 36in H');
return false;
}
else if(orientation == 'V' && (c_w < 36 || c_h < 60))
{
alert('Minimum dimensions for a custom vertical window scene are 36in W x 60in H');
return false;
}
else if(orientation == 'P' && (c_w < 108 || c_h < 36))
{
alert('Minimum dmensions for a custom panoramic window scene are 108in W x 36in H');
return false;
}
break;
case 'Wall':
if(orientation == 'L' && (c_w < 72 || c_h < 48))
{
alert('Minimum dimensions for a custom landscape wall scene are 72in W x 48in H');
return false;
}
else if(orientation == 'S' && (c_w < 48 || c_h < 48))
{
alert('Minimum dimensions for a custom square wall scene are 48in W x 48in H');
return false;
}
else if(orientation == 'V' && (c_w < 48 || c_h < 72))
{
alert('Minimum dimensions for a custom vertical wall scene are 48in W x 72in H');
return false;
}
else if(orientation == 'P' && (c_w < 108 || c_h < 36))
{
alert('Minimum dmensions for a custom panoramic wall scene are 108in W x 36in H');
return false;
}
break;
default:
alert('default case...');
break;
}
$.post("<?=site_url('scenes/get_pricing')?>/"+id+"/"+application+"/"+c_w+"/"+c_h+"/true", function(html){
$('.price').html(html);
var cost = $('.price_sp').text();
$('.siz').text('Custom');
$('#size').attr('value', 'Custom ('+c_w+' W x '+c_h+' H)');
$('#cost').attr('value', cost);
});
$('a.cart').css('display', 'block');
});
$('a.cart').live("click", function() {
var photo_name = $('p#photo_name').text();
var multi = $('span.app').text();
if(multi == 'Window / Multiple')
{
var app = 'Window / Multiple';
}
else
{
var app = $('#application').val();
}
var mat = $("#material").val();
var scene_size = $("#size").val();
var cost = $("#cost").val();
var image_styles = $("#image_styles").val();
if(app == "")
{
alert('Please create your scene.');
return false;
} else if(mat == "") {
alert('Please create your scene.');
return false;
} else if(scene_size == "") {
alert('Please create your scene.');
return false;
} else if(cost == "") {
alert('Please create your scene.');
return false;
}
if(scene_size == 'Multiple')
{
var m_sizes = new Array();
$('.width_box').each(function(i) {
m_sizes[i] = $(this).val()+'w x ';
});
$('.height_box').each(function(i){
m_sizes[i] += $(this).val()+'h';
});
var multi = JSON.stringify(m_sizes);
oaw = $('#overall_width').val();
oah = $('#overall_height').val();
scene_size = oaw+'w x '+oah+'h';
$.post("<?=site_url('cart/add')?>", { name: photo_name, price: cost, application: app, material: mat, size: scene_size, image_style: image_styles, multi_window: multi }, function(html) {
$("#cart_view").css('z-index', '1000').html(html);
});
}
else
{
$.post("<?=site_url('cart/add')?>", { name: photo_name, price: cost, application: app, material: mat, size: scene_size, image_style: image_styles }, function(html) {
$("#cart_view").css('z-index', '1000').html(html);
});
}
$('.cont-img, .view-img, .co-img').css('cursor', 'pointer').parent().removeClass('disabled_button');
$('.cont-img').attr('src', '<?=$this->config->item('shared_images')?>continue.png');
$('.view-img').attr('src', '<?=$this->config->item('shared_images')?>view-cart.png');
$('.co-img').attr('src', '<?=$this->config->item('shared_images')?>checkout.png');
$('.size').trigger('click').addClass('size_disabled');
$('.size_disabled').removeClass('size').unbind('click').css('cursor', 'default');
$('.your_cart').trigger('click');
$('ul.cart').hide('normal');
});
$('a.thickbox').append('<span></span>');
$('a.thickbox').hover(function() {
$(this).children('span').fadeIn(600);
},function(){
$(this).children('span').fadeOut(200);
});
});
//]]>
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment