//////////////////////////////////////////////////////////////////////////////////////////////////
/* sLgallery - v1.0 - 6:53 PM 08/03/2007
//////////////////////////////////////////////////////////////////////////////////////////////////
@author: kc@slajax.com
@description: ajax functions from frame it application`
*/////////////////////////////////////////////////////////////////////////////////////////////////

var sLframeIt = new Class({
    /* Constructor
    * @param 	sLframeItOptions
    * @return 	void
    */
    initialize:function(options){
        this.setOptions(options);
        if( $('frameit_wall') ) this.construct();
    },
    /* Constructor
    * @param 	sLframeItOptions
    * @return  this.options
    */
    setOptions:function(options){
        this.options = Object.extend({ }, options || {} );
    },
    /* Constructor
    * @param 	sLframeItOptions action elements
    * @return  creats bindings for each of options config
    */
    construct:function(){ // run through json steps and construct
        for(var i=0; i<this.options.actionBtns.elements.length; i++){
            var el=this.options.actionBtns.elements[i];
            this.eventControl(el,i);
        }
    },
    /* Controller
    * @param 	object from config and config key
    * @return  void - binds events, used in recursion for new dom content
    */
    eventControl:function(obj,i){
        switch(obj.step){
            case 0: //submit the frame search
            $(obj.id).addEvent('click', this.getFramesViewBy.pass([obj,i], this));
            break;
            case 1: //submit the mat search
            $(obj.id).addEvent('click', this.getMatsViewBy.pass([obj,i], this));
            break;

            case 2: //get details about a frame
            $$(obj.id).each(function(el,j){
                el.setStyle('cursor','pointer');
                el.addEvent('click', this.getFramesDescription.pass([el,i], this) );
            },this);
            //frame pagnation
            $$(this.options.actionBtns.elements[5].id).each(function(obj,k){
                obj.setStyle('cursor','pointer');
                obj.addEvent('click', this.getFramesViewBy.pass( [obj,5], this));
            },this);
            break;
            case 3: //bind get details about a mat
            $$(obj.id).each(function(el,j){
                el.setStyle('cursor','pointer');
                el.addEvent('click', this.getMatsDescription.pass([el,i],this) );
            },this);
            //mat pagnation
            $$(this.options.actionBtns.elements[11].id).each(function(obj,n){
                obj.setStyle('cursor','pointer');
                obj.addEvent('click', this.getMatsViewBy.pass( [obj,11], this));
            },this);
            break;
            case 13:
            //reset the frame
            if($(obj.id)){
                $(obj.id).addEvent('click', this.resetFrame.pass([i],this) );
            }
            break;
            case 7: //reset all
            if($(obj.id)){
                $(obj.id).addEvent('click', function(e){
                    e = new Event(e).stop();
                    this.reset(i);
                    return false;
                }.bind(this)
                );
            }

            break;
            case 8: //reset the mat
            if($(obj.id)){
                $(obj.id).addEvent('click', this.resetMat.pass([i],this) );
            }
            if($(obj.id2)){
                $(obj.id2).addEvent('click', this.resetMat.pass([i],this) );
            }
            break;
            case 9: //set the wall color
            $$(obj.id).each(function(el,j){
                el.setStyle('cursor','pointer');
                el.addEvent('click', this.setWallColor.pass([el.getStyle('background-color'),i],this) );
            },this);
            break;
            case 10: //reset the wall color
            $(obj.id).addEvent('click', this.setWallColor.pass(["#fff",9],this) );
            break;
            case 12: //choose class
            $$(obj.id).each(function(el,p){
                el.setStyle('cursor','pointer');
                el.addEvent('click', this.chooseGlass.pass([el,i],this) );
            },this);
            break;
            case 14://get frame details popup
            this.getFrameDetailsFull(14);
            break;
            case 15:
            // onchange mat1 width
            if( $(this.options.actionBtns.elements[15].id) ){
                $(this.options.actionBtns.elements[15].id).addEvent('change',
                this.getMatsDescription.pass([$(this.options.actionBtns.elements[15].mat_img_id),3],this)
                );
            }// onchange mat2 width
            if( $(this.options.actionBtns.elements[15].id2) ){
                $(this.options.actionBtns.elements[15].id2).addEvent('change',
                this.getMatsDescription.pass([$(this.options.actionBtns.elements[15].mat_img_id2),3],this)
                );
            }
            break;

        }
    },
    /* Function
    * @param 	obj for ajax request data, config key
    * @return new frames to dom - node defined in config
    */
    getFramesViewBy:function(btn,i){ // step 0
        new Ajax(this.options.ajaxUrl+this.options.actionBtns.elements[i].func, {
            method: 'post',
            data: $(this.options.actionBtns.elements[i].formData).toQueryString()+'&'+btn.id,
            onComplete:this.eventControl.pass([this.options.actionBtns.elements[2],2],this),
            update: $(this.options.actionBtns.elements[i].updateDiv)
        },this
        ).request();
    },
    /* Function
    * @param 	obj for ajax request data, config key
    * @return new mats to dom - node defined in config
    */
    getMatsViewBy:function(btn,i){ // step 1
        new Ajax(this.options.ajaxUrl+this.options.actionBtns.elements[i].func, {
            method: 'post',
            data: $(this.options.actionBtns.elements[i].formData).toQueryString()+'&'+btn.id,
            onComplete:this.eventControl.pass([this.options.actionBtns.elements[3],3],this),
            update: $(this.options.actionBtns.elements[i].updateDiv)
        },this
        ).request();
    },
    /* Function
    * @param 	obj for ajax request data, config key
    * @return chosen frame to dom - nodes defined in config
    */
    getFramesDescription:function(img,i){ // step 2
        // frame wall
        new Ajax(this.options.ajaxUrl+this.options.actionBtns.elements[i].func, {
            method: 'post',
            data: '&frame_sid='+img.getProperty('rel'),
            onComplete: this.eventControl.pass([this.options.actionBtns.elements[13],13],this),
            update: $(this.options.actionBtns.elements[i].updateDiv)
        },this
        ).request();
        // frame description
        if (this.framesAjax){ this.framesAjax.cancel() }
        this.framesAjax=new Ajax(this.options.ajaxUrl+this.options.actionBtns.elements[4].func, {
            method: 'post',
            data: '&frame_sid='+img.getProperty('rel'),
            update: $(this.options.actionBtns.elements[4].updateDiv),
            onComplete: function(rsp){
                //rebind enLarge script to new dom nodes
                $('img_framed').addEvent('click', function(){
                    new enlargeImage($('img_framed'),{duration: 300,position: 'this'});
                    return false;
                });
                $('fr_btn_magnify').addEvent('click', function(){
                    new enlargeImage($('img_framed'),{duration: 300, position: 'this'});
                    return false;
                });
                //rebind reset buttons and details popup to new dom nodes
                $(this.options.actionBtns.elements[7].id).addEvent('click', this.reset.pass([7],this) );
                this.getFrameDetailsFull(14);
                this.frameCenter();
            }.bind(this)
        },this
        ).request();
    },
    /* Function
    * @param 	obj for ajax request data, config key
    * @return chosen mat to dom - nodes defined in config
    */
    getMatsDescription:function(img,i){ // step 3
        //if its the second mat tab and second mat image is there
        if( $$('.sLMatTabs')[1].style.display!='none' && $('mat_details_image0') )
        {
            var mat_key='&mat_key=0';
            var mat_width='&mat_width='+$(this.options.actionBtns.elements[15].id).options[$(this.options.actionBtns.elements[15].id).selectedIndex].value
            var frame_sid='&frame_sid='+$('mat_details_image0').getProperty('rel')
            var mat_selected = 1;

        }//if its the first mat tab and first mat is there
        else if( $$('.sLMatTabs')[0].style.display!='none' && $('mat_details_image1') )
        {
            var mat_key='&mat_key=1';
            var mat_width='&mat_width='+$(this.options.actionBtns.elements[15].id2).options[$(this.options.actionBtns.elements[15].id2).selectedIndex].value;
            var frame_sid='&frame_sid='+$('mat_details_image1').getProperty('rel');
            var mat_selected = 0;

        }//default to second mat tab
        else if( $$('.sLMatTabs')[1].style.display!='none' )
        {
            var mat_key='&mat_key=0';
            var mat_width='&mat_width=';
            var frame_sid='&frame_sid=';
            var mat_selected = 1;

        }//default to first mat tab
        else if( $$('.sLMatTabs')[0].style.display!='none' )
        {
            var mat_key='&mat_key=1';
            var mat_width='&mat_width=';
            var frame_sid='&frame_sid=';
            var mat_selected = 0;
        }
        //frame wall
        new Ajax(this.options.ajaxUrl+this.options.actionBtns.elements[i].func, {
            method: 'post',
            data: '&mat_sid='+img.getProperty('rel')+mat_width+mat_key,
            update: $(this.options.actionBtns.elements[i].updateDiv)
        },this
        ).request();
        //matt tabs description

        if (this.matsAjax){ this.matsAjax.cancel() }
        this.matsAjax=new Ajax(this.options.ajaxUrl+this.options.actionBtns.elements[6].func, {
            method: 'post',
            data: '&mat_sid='+img.getProperty('rel')+mat_width+mat_key,
            update: $(this.options.actionBtns.elements[6].updateDiv),
            onComplete: function(rsp){
                //rebind enLarge script to new dom nodes
                $('img_framed').addEvent('click', function(){
                    new enlargeImage($('img_framed'),{duration: 300,position: 'this'});
                    return false;
                });
                $('fr_btn_magnify').addEvent('click', function(){
                    new enlargeImage($('img_framed'),{duration: 300, position: 'this'});
                    return false;
                }); //rebind mat tabs to mat descriptions
                //Change the width of the mat1
                if($(this.options.actionBtns.elements[15].id)){
                    $(this.options.actionBtns.elements[15].id).addEvent('change',
                    this.getMatsDescription.pass([$(this.options.actionBtns.elements[15].mat_img_id),3] ,this)
                    );
                }//Change the width of the mat2
                if($(this.options.actionBtns.elements[15].id2)){
                    $(this.options.actionBtns.elements[15].id2).addEvent('change',
                    this.getMatsDescription.pass([$(this.options.actionBtns.elements[15].mat_img_id2),3],this)
                    );
                }//rebind mat reset buttons to new dom
                if ($(this.options.actionBtns.elements[8].id)){
                    $(this.options.actionBtns.elements[8].id).addEvent('click', this.resetMat.pass([8],this) );
                }
                if ($(this.options.actionBtns.elements[8].id2)){
                    $(this.options.actionBtns.elements[8].id2).addEvent('click', this.resetMat.pass([8],this) );
                }
                $(this.options.actionBtns.elements[7].id).addEvent('click', this.reset.pass([7],this) );
                //reposition new frame img nodes (portrait)
                this.frameCenter();
                if( $('MatTabList')){
                    var sLMatTabsOpts = {
                        menuID: 'sLMatTabsmenu',
                        menuClass : 'sLMatTabsmenu', // menu class name
                        divClass: '.sLMatTabs', // div area class
                        action: 'click', // event to switch on
                        injectBefore: 'MatTabList',
                        tops: 10,
                        tope: 5,
                        reloaded:true,
                        selected: mat_selected
                    };
                    var matTabs = new sLtabs(sLMatTabsOpts);
                }
            }.bind(this)
        },this
        ).request();
    },
    /* Function
    * @param 	config key
    * @return show chosen mat in pop up node
    */
    getFrameDetailsFull:function(i){
        $$(this.options.actionBtns.elements[i].id).setStyle('cursor','pointer');
        $$(this.options.actionBtns.elements[i].id).addEvent('click',function(e){
            var e=new Event(e);
            var coords = $(e.target).getCoordinates();
            new Ajax(this.options.ajaxUrl+this.options.actionBtns.elements[i].func, {
                method: 'post',
                data: '&frame_sid='+e.target.getProperty('rel'),
                onRequest: function(){
                    this.details = new Element('div', {
                    'styles': {
                    'width': '650px',
                    'height': '475px',
                    'position':'absolute',
                    'top':(coords.top-475),
                    'left':(coords.left-375),
                    'background':'url(/skin/shared/images/closelabel.gif) top right #fff no-repeat',
                    'border':'2px solid #000',
                    'padding':'15px',
                    'opacity':1,
                    'overflow':'hidden',
                    'overflow-y':'auto'
                    },
                    'events': {
                    'click': function(){
                        this.remove();
                    }
                    },
                    'class': ''}).injectInside(document.body);

                    this.details.innerHTML="<img src='/skin/shared/images/loading.gif'>";
                }.bind(this),
                onComplete:function(rsp){
                    this.details.innerHTML=rsp;
                }.bind(this)
            },this
            ).request();
        }.bind(this)
        );
    },
    /* Function
    * @param 	obj for ajax request data, config key
    * @return save chosen glass to data layer
    */
    chooseGlass:function(radio,i){ // step 3
        new Ajax(this.options.ajaxUrl+this.options.actionBtns.elements[i].func, {
            method: 'post',
            data: '&glass='+radio.value,
            update: $(this.options.actionBtns.elements[i].updateDiv),
            onComplete: function(rsp){
                this.frameCenter();
                $$(this.options.actionBtns.elements[i].id).each(function(el){
                    $(el.getParent()).getFirst().setStyles({
                    'color':'#000',
                    'font-weight':'normal'
                    });
                }.bind(this)
                );
                $(radio.getParent()).getFirst().setStyles({
                'color':'#24a326',
                'font-weight':'bold'
                });
                $('img_framed').addEvent('click', function(){
                    new enlargeImage($('img_framed'),{duration: 300,position: 'this'});
                    return false;
                });
                //$('fr_btn_magnify').removeEvents();
                $('fr_btn_magnify').addEvent('click', function(){
                    new enlargeImage($('img_framed'),{duration: 300, position: 'this'});
                    return false;
                });
                $(this.options.actionBtns.elements[7].id).addEvent('click', this.reset.pass([7],this) );
            }.bind(this)
        },this
        ).request();
    },
    /* Function
    * @param 	obj for ajax request data, config key
    * @return save chosen wallcolor to data layer
    */
    setWallColor: function(color,i){
        $(this.options.actionBtns.elements[i].updateDiv).setStyles({
        'background-color':color
        });
        //update the wall color to the database
        new Ajax(this.options.ajaxUrl+this.options.actionBtns.elements[i].func, {
            method: 'post',
            data: '&wall_color='+color
        },this
        ).request();

    },
    /* Function
    * @param 	config key
    * @return reset all
    */
    reset:function(i){
        new Ajax(this.options.ajaxUrl+this.options.actionBtns.elements[i].func, {
            method: 'post',
            data: '',
            update: $(this.options.actionBtns.elements[i].updateDiv),
            onComplete: function(rsp) {
                // reset Frame description
                $(this.options.actionBtns.elements[2].updateDiv).innerHTML='';
                // reset Mat desctiption
                new Ajax(this.options.ajaxUrl+this.options.actionBtns.elements[3].func, {
                    method: 'post',
                    data: '',
                    update: $(this.options.actionBtns.elements[3].updateDiv),
                    onComplete: function(){
                        // Make Mat Tabs works
                        if( $('MatTabList')){
                            var sLMatTabsOpts = {
                                menuID: 'sLMatTabsmenu',
                                menuClass : 'sLMatTabsmenu', // menu class name
                                divClass: '.sLMatTabs', // div area class
                                action: 'click', // event to switch on
                                injectBefore: 'MatTabList',
                                tops: 10,
                                tope: 5,
                                reloaded:true
                            };
                            var matTabs = new sLtabs(sLMatTabsOpts);
                        }
                    }.bind(this)
                },this
                ).request();
                $(this.options.actionBtns.elements[7].id).addEvent('click', this.reset.pass([7],this) );
                $('img_framed').addEvent('click', function(){
                    new enlargeImage($('img_framed'),{duration: 300,position: 'this'});
                    return false;
                });
                $('fr_btn_magnify').addEvent('click', function(){
                    new enlargeImage($('img_framed'),{duration: 300, position: 'this'});
                    return false;
                });
                this.frameCenter();
            }.bind(this)
        },this
        ).request();
    },
    /* Function
    * @param 	config key
    * @return reset frame
    */
    resetFrame:function(i){
        new Ajax(this.options.ajaxUrl+this.options.actionBtns.elements[i].func, {
            method: 'post',
            data: '',
            update: $(this.options.actionBtns.elements[i].updateDiv),
            onComplete: function(rsp) {
                $(this.options.actionBtns.elements[2].updateDiv).innerHTML='';
                $(this.options.actionBtns.elements[7].id).addEvent('click', this.resetFrame.pass([7],this) );
                $('img_framed').addEvent('click', function(){
                    new enlargeImage($('img_framed'),{duration: 300,position: 'this'});
                    return false;
                });
                $('fr_btn_magnify').addEvent('click', function(){
                    new enlargeImage($('img_framed'),{duration: 300, position: 'this'});
                    return false;
                });
                this.frameCenter();
            }.bind(this)
        },this
        ).request();
    },
    /* Function
    * @param 	config key
    * @return reset mat
    */
    resetMat:function(i){
        var mat_key = ($$('.sLMatTabs')[0].style.display!='none') ? "1" : "0";
        new Ajax(this.options.ajaxUrl+this.options.actionBtns.elements[i].func, {
            method: 'post',
            data: 'mat_key='+mat_key,
            update: $(this.options.actionBtns.elements[i].updateDiv),
            onComplete: function(rsp) {
                $(this.options.actionBtns.elements[7].id).addEvent('click', this.reset.pass([7],this) );
                //$(this.options.actionBtns.elements[7].id).addEvent('click', this.reset.pass([7],this) );
                $('img_framed').addEvent('click', function(){
                    new enlargeImage($('img_framed'),{duration: 300,position: 'this'});
                    return false;
                });
                $('fr_btn_magnify').addEvent('click', function(){
                    new enlargeImage($('img_framed'),{duration: 300, position: 'this'});
                    return false;
                });
                this.frameCenter();
            }.bind(this)
        },this
        ).request();
        // reload Mat description div
        new Ajax(this.options.ajaxUrl+this.options.actionBtns.elements[3].func, {
            method: 'post',
            data: '',
            update: $(this.options.actionBtns.elements[3].updateDiv),
            onComplete: function(){
                // Make Mat Tabs works
                if( $('MatTabList')){
                    var sLMatTabsOpts = {
                        menuID: 'sLMatTabsmenu',
                        menuClass : 'sLMatTabsmenu', // menu class name
                        divClass: '.sLMatTabs', // div area class
                        action: 'click', // event to switch on
                        injectBefore: 'MatTabList',
                        tops: 10,
                        tope: 5,
                        reloaded:true,
                        selected: (mat_key==0)?1:0
                    };
                    var matTabs = new sLtabs(sLMatTabsOpts);
                }
                //Change the width of the mat1
                if($(this.options.actionBtns.elements[15].id)){
                    $(this.options.actionBtns.elements[15].id).addEvent('change',
                    this.getMatsDescription.pass([$(this.options.actionBtns.elements[15].mat_img_id),3] ,this)
                    );
                }//Change the width of the mat2
                if($(this.options.actionBtns.elements[15].id2)){
                    $(this.options.actionBtns.elements[15].id2).addEvent('change',
                    this.getMatsDescription.pass([$(this.options.actionBtns.elements[15].mat_img_id2),3],this)
                    );
                }//rebind mat reset buttons to new dom
                if ($(this.options.actionBtns.elements[8].id)){
                    $(this.options.actionBtns.elements[8].id).addEvent('click', this.resetMat.pass([8],this) );
                }
                if ($(this.options.actionBtns.elements[8].id2)){
                    $(this.options.actionBtns.elements[8].id2).addEvent('click', this.resetMat.pass([8],this) );
                }
            }.bind(this)
        },this
        ).request();

    },
    /* Function
    * @param none
    * @return center frame it picture
    */
    frameCenter:function(){
        if ( $('fr_btn_addtocart') ){
            $('fr_btn_addtocart').addEvent('click', function(e){
                if( $('frameit_error').value != 0){
                    var stop = false;
                    var old_error = $('fr_error').innerHTML;
                    $('fr_error').innerHTML='';
                    //1 - no frame 2 - no outher mat without inner 4 - no glass
                    /*if ( $('frameit_error').value.toInt()&4)  {
                    stop = true;
                    $('fr_error').innerHTML += '1';
                    }*/
                    if ( $('frameit_error').value.toInt()&2) {
                        stop = true;
                        $('fr_error').innerHTML += "You need to select an outer mat first.<br />";
                    }
                    if ( $('frameit_error').value.toInt()&1) {
                        stop = true
                        $('fr_error').innerHTML += "You need to select a frame first.<br />";
                    }
                    if (stop) {
                        e=new Event(e).stop();
                        (function(){ $('fr_error').innerHTML=old_error; }).delay(5000);
                    }else{
                        $('fr_error').innerHTML=old_error;
                    }
                }
            });
        }

        var prop = $('img_framed').getProperty('rel').split(',');

        if(!window.ie7){
            var top=eval( ($('frameit_wall').getStyle('height').toInt()-prop[0])*.5)+'px';
        }else{
            $('frameit_wall').setStyle('line-height','300px');
            $('frameit_wall').setStyle('vertical-align','middle');
            //return '';
        }

        if(	$('img_framed') ) {
            $('img_framed').setStyles({
            'position':'relative',
            'top':top
            });
        }
        this.periodical = this.removeLoading.periodical(50,this,[]);

    },
    /* Periodical Function
    * @param none
    * @return frame it wall background to null, and clear periodical timer
    */
    removeLoading:function(){
        if($('img_framed').getStyle('height').toInt() > 0){
            $('frameit_wall').setStyle('background-image','url()');
            $clear(this.periodical);
        }
    },
    /* Wrapper Function
    * @param debug obj
    * @return console output
    */
    debug:function(debug){
        console.log(debug)
    }
});
//////////////////////////////////////////////////////////////////////////////////////////////////
// sLFrameSearch class - no editing below this line
//////////////////////////////////////////////////////////////////////////////////////////////////
var sLframeItSearch = new Class({
    initialize:function(){
        if($('category').options[$('category').selectedIndex].value ==1){
            $('Divfname').setStyle('display','block');
            $('Divfdescription').setStyle('display','block');
            $('Divfcolor').setStyle('display','block');
            $('Divfwidth').setStyle('display','block');
            $('Divfstyle').setStyle('display','block');
            $('Divfmaterial').setStyle('display','block');
            $('Divname').setStyle('display','none');
            $('Divdescription').setStyle('display','none');
            $('Divcolor').setStyle('display','none');
        }else{
            $('Divfname').setStyle('display','none');
            $('Divfdescription').setStyle('display','none');
            $('Divfcolor').setStyle('display','none');
            $('Divfwidth').setStyle('display','none');
            $('Divfstyle').setStyle('display','none');
            $('Divfmaterial').setStyle('display','none');
            $('Divname').setStyle('display','block');
            $('Divdescription').setStyle('display','block');
            $('Divcolor').setStyle('display','block');
        }

        $('category').addEvent('change', function(el){
            if($('category').options[$('category').selectedIndex].value == 1){
                $('Divfname').setStyle('display','block');
                $('Divfdescription').setStyle('display','block');
                $('Divfcolor').setStyle('display','block');
                $('Divfwidth').setStyle('display','block');
                $('Divfstyle').setStyle('display','block');
                $('Divfmaterial').setStyle('display','block');
                $('Divname').setStyle('display','none');
                $('Divdescription').setStyle('display','none');
                $('Divcolor').setStyle('display','none');
            }else{
                $('Divfname').setStyle('display','none');
                $('Divfdescription').setStyle('display','none');
                $('Divfcolor').setStyle('display','none');
                $('Divfwidth').setStyle('display','none');
                $('Divfstyle').setStyle('display','none');
                $('Divfmaterial').setStyle('display','none');
                $('Divname').setStyle('display','block');
                $('Divdescription').setStyle('display','block');
                $('Divcolor').setStyle('display','block');
            }
        });
    }
});

var sLframeItCart = new Class({
    options:{
        quantity:'td.Quantity input.QuantityInput',
        price:'td.Currency',
        subtotal:'td.Subtotal',
        total:'CartSubTotal',
        clearcart: 'clear_cart',
        form: 'ShoppingCartForm',
        checkout:'checkout',
        continueShopping: 'continue',
        update:'update_cart',
        mint: 0
    },
    initialize:function(){
        $$(this.options.quantity).each(function(el,i){
            el.addEvent('blur', this.updateSubtotal.pass([el,i],this) );
        }.bind(this)
        );

        if ($(this.options.clearcart)){
            $(this.options.clearcart).addEvent('click', function() {
                $(this.options.form).action = '?clear_cart=1';
                $(this.options.form).submit();
            }.bind(this)
            );
        }

    },
    updateSubtotal:function(qty,i){
        if( !isNaN(qty.value) ){
            var p=$$(this.options.price)[i].innerHTML.replace("$","");
            p=p*100;
            var stotal=qty.value*p;
            stotal=stotal/100;
            $$(this.options.subtotal)[i].innerHTML='$'+stotal.toFixed(2);
            this.updateTotal(stotal,i);
            this.effect($$(this.options.subtotal)[i],i);
        }else{
            var coords = $$(this.options.subtotal)[i].getCoordinates();
            this.error = new Element('div', {
            'styles': {
            'width': '220px',
            'height': '50px',
            'position':'absolute',
            'top':(coords.top.toInt()-30)+'px',
            'left':((window.getScrollWidth().toInt()*.5)-145)+'px',
            'background':'url(/skin/shared/images/closelabel.gif) top right #fff no-repeat',
            'border':'2px solid #000',
            'padding':'10px',
            'padding-top':'25px',
            'opacity':1,
            'overflow':'hidden',
            'overflow-y':'auto'
            },
            'events': {
            'click': function(){
                this.remove();
            }
            },
            'class': ''
            }).injectInside(document.body);
            this.error.innerHTML='<span style="color:red;">Error:</span> Please make sure you only use numbers for this quantity amount.';
        }

    },
    updateTotal:function(stotal){
        $$(this.options.subtotal).each(function(el){
            var amt=el.innerHTML.replace("$","");
            this.options.mint+=amt*100;
        }.bind(this)
        );
        var taxes = this.options.mint*0.0014;
        var grandtotal = this.options.mint*0.0114;
        this.options.mint=this.options.mint/100;
        $(this.options.total).innerHTML='$'+this.options.mint.toFixed(2);
        this.options.mint=0;
        this.disableCheckout();
        this.effect($(this.options.total));
    },
    disableCheckout:function(){
        //$(this.options.checkout).setStyle('display','none');
        $(this.options.checkout).disabled = true;
        $(this.options.checkout).setOpacity(.7);
        //$(this.options.checkout).setProperty('type','button');
        //$(this.options.update).setProperty('type','submit');

        //$(this.options.continueShopping).disabled = true;
        //$(this.options.continueShopping).setStyle('color','#CCCCCC');

        if(this.pulse) {
            this.pulse.stop();
            this.pulse = false;
        }

        this.pulse = new Fx.Styles($(this.options.update), {
            duration: 1500,transition: Fx.Transitions.linear,
            onComplete:function(){
                this.pulse.start({'color':['#fff','#00CC66']});
            }.bind(this)
        })
        this.pulse.start({'color':['#fff','#00CC66']});
    },
    effect:function(obj,i){
        new Fx.Styles(obj, {
            duration: 250,transition: Fx.Transitions.linear,
            onComplete:function(){
                new Fx.Styles(obj, {
                    duration: 450,transition: Fx.Transitions.linear }).start({ 'color':['#00CC66','#000'] });
            }
        }).start({'color':['#000','#00CC66']});
    }
});
window.addEvent('unload', document.removeEvents);
//////////////////////////////////////////////////////////////////////////////////////////////////
// init options - edit these for your purposes
//////////////////////////////////////////////////////////////////////////////////////////////////
window.addEvent('domready',function(){
    if($('ShoppingCartForm')){ new sLframeItCart(); }
    var sLframeOpts = {
        actionBtns:{
            elements:
            [
            {// Search Frames
                step: 0, id:"btn_frames_viewby", func:"getFramesViewBy", updateDiv:"getFrameResultsDiv", formData:"frames_viewby" },
                {// Search Mats
                    step: 1, id:"btn_mats_viewby", func:"getMatsViewBy", updateDiv:"getMatResultsDiv", formData:"mats_viewby" },
                    { // Get a Frame Description
                        step: 2, id:".frameli img", func:"getFramesDetail", updateDiv:"FrameDescription", formData:"" },
                        { // Get a Frame Description
                            step: 3, id:".matli img", func:"getMatsDetails", updateDiv:"MatDescription", formData:"" },
                            { // select your frame
                                step:4, id:"btn_choose_frame", func:"chooseFrame", updateDiv:"frameit_results", formData:"choose_frame" },
                                { // frames pagnation
                                    step:5, id:".frame_pages", func:"getFramesViewBy", updateDiv:"getFrameResultsDiv", formData:"frames_viewby"  },
                                    { // choose mat
                                        step:6, id:"btn_choose_mat", func:"chooseMat", updateDiv:"frameit_results", formData:"mat_widths" },
                                        { // everything reset
                                            step:7, id:"fr_btn_reset", func:"reset", updateDiv:"frameit_results", formData:"" },
                                            { // mat reset
                                                step:8, id:"btn_reset_mat0", id2:"btn_reset_mat1", func:"resetMat", updateDiv:"frameit_results", formData:"" },
                                                {	// set the wall color
                                                    step:9, id:".wall_colour_li", func:"chooseWallColour", updateDiv:"frameit_wall", formData:"" },
                                                    { // reset the wall color
                                                        step:10, id:"wall_colour_reset", func:"", updateDiv:"frameit_wall", formData:"" },
                                                        { // mats pagnation
                                                            step:11, id:".mat_pages", func:"getMatsViewBy", updateDiv:"getMatResultsDiv", formData:"mats_viewby" },
                                                            { // mats pagnation
                                                                step:12, id:".radioglass", func:"chooseGlass", updateDiv:"frameit_results", formData:"mats_viewby" },
                                                                { //reset frame
                                                                    step:13, id:"btn_reset_frame", func:"resetFrame", updateDiv:"frameit_results", formData:"" },
                                                                    { // the detailed frame image. click it to pop up details.
                                                                        step:14, id:"div#FrameDescription div.FrImg img", func:"getFramesDetailFull", updateDiv:"", formData:""},
                                                                        { // mat width selection onload
                                                                            step:15, id:"mat_width0", id2:"mat_width1", mat_img_id:'mat_details_image0',mat_img_id2:'mat_details_image1', func:"chooseMat", updateDiv:"frameit_results", formData:"mat_widths" }
                                                                            ]
        },
        ajaxUrl:"/frameit.html?function="
    };
    //if frameit wall run application
    if( $('FrameIt') ){
        var frameit = new sLframeIt(sLframeOpts);
        frameit.frameCenter();
    }
    //if Advanced Search, toggle the search options on change
    if( $('SearchId') && $('category') ){ new sLframeItSearch(); }

    new MooRainbow('wallRainbow', {
        wheel: true,
        imgPath: '/skin/framing/images/colorpick/',
        onChange: function(color) {
            $('frameit_wall').setStyle('background-color', color.hex);
            //$('myInput').value = color.hex;
        },
        onComplete: function(color) {
            $('frameit_wall').setStyle('background-color', color.hex);
            //update the wall color to the database	- hardcoded to ajax wall color
            new Ajax('/frameit.html?function=chooseWallColour', {
                method: 'post',
                data: '&wall_color='+color.hex }).request();
        }
    });

    //onload add magnify event to shit
    if( $('img_framed') ){
        $('img_framed').addEvent('click', function(){
            new enlargeImage($('img_framed'),{duration: 300, position: 'this'});
            return false;
        });

        $('fr_btn_magnify').addEvent('click', function(){
            new enlargeImage($('img_freamed'),{duration: 300, position: 'this'});
            return false;
        });
    }

    /*if ( $('fr_btn_addtocart') ){
    $('fr_btn_addtocart').addEvent('click', function(e){
    if( $('frameit_error').value != 0){
    e=new Event(e).stop();
    $('fr_error').innerHTML = "Error! There is no Frame selected";
    //$('fr_error').innerHTML = $('frameit_error').value;
    (function(){ $('fr_error').innerHTML=''; }).delay(5000);
    }
    });
    }*/

});