(function(jq){
    jq(document).ready(function(){   
    
        var options = {
            model: null,
            face: null,
            strap: null,
            view: null,
            url: 'https://www.benneywatches.com/'
        };
        
        var models = {
            AABS:	['Product-GEOSPORTSTER_11.aspx', '495'],
            AABL:	['Product-GEOSPORTSTER_12.aspx', '475'],
            AASS:	['Product-GEOSPORTSTER_13.aspx', '495'],
            AASL:	['Product-GEOSPORTSTER_14.aspx', '475'],	
            ABBS:	['Product-GEOSPORTSTER_15.aspx', '465'],
            ABBL:	['Product-GEOSPORTSTER_16.aspx', '440'],
            ABSS:	['Product-GEOSPORTSTER_17.aspx', '465'],
            ABSL:	['Product-GEOSPORTSTER_18.aspx', '440'],	
            BABS:	['Product-GEOFORM_19.aspx', '390'],
            BABL:	['Product-GEOFORM_20.aspx', '365'],
            BASS:	['Product-GEOFORM_21.aspx', '390'],
            BASL:	['Product-GEOFORM_22.aspx', '365'],	
            CABS:	['Product-GEOSTYLE_23.aspx', '350'],
            CABL:	['Product-GEOSTYLE_24.aspx', '325'],
            CASS:	['Product-GEOSTYLE_25.aspx', '350'],
            CASL:	['Product-GEOSTYLE_26.aspx', '325'],
            CAPS:	['Product-GEOSTYLE_27.aspx', '350'],
            CAPL:	['Product-GEOSTYLE_28.aspx', '325']
        };
         
        function init(){
        	// set 'flash required' message if js availible;
        	jq('.flash .noflash').removeClass('hide');
            setDefaultProduct();
            // bind option update handlers;
        	jq.each(['face', 'strap'], function(i, v){
        		jq('.'+v+' a').bind('click', function(){
                    //console.log(this.rel);
                    options[v] = this.rel;
                    updateLink(this, '.'+v);
                    updateText(this.title, '.'+v);
                    updatePrice(getModelDetails());
                    updateImage();
        			return false;
        		});
        	});
        	// bind update price handler;
            jq('.buy a').bind('click', function(){
                // console.log(getModelDetails());
                this.href= options.url + getModelDetails()[0];
                return true;
            });
            jq('.view a').bind('click', function(){
                options.view = this.rel.split('opt')[1];
                updateLink(this, '.view');
                updateImage();
                return false;
            });
        };
        /**
         * sets the default product to display;
         * @returns Object containing the defaults;
         */
        function setDefaultProduct(){
            if( ! jq('body').hasClass('product') )
                return false;
            // set defaults;   
            options.model = getModelCode();
            options.face = 'b';     // set face colour to (b)lack;
            options.strap = 's';    // set strap colour to (s)ilver;
            options.view = '1';
            // show defaults;
            updateLink(jq('.face a').get(0), '.face');
            updateLink(jq('.strap a').get(0), '.strap');
            updateLink(jq('.view a').get(0), '.view');
            updateText(jq('.face a').get(0).title, '.face');
            updateText(jq('.strap a').get(0).title, '.strap');
            updatePrice(getModelDetails());
 
            return options;
        };
        /**
         * gets current selected models details;
         * @return  Array;
         */
        function getModelDetails(){
            return models[getModel().toUpperCase()];
        };
        /**
         * gets current selected model;
         * @return  String;
         */
        function getModel(){
            // return current SKU;
            return options.model+options.face+options.strap;
        };
        /**
         * highlight currently selected option (face or strap);
         * @param   elem{HTMLAnchorElement} clicked face or strap selector;
         * @param   scope{String}           ref face or strap;
         * @return  jQuery object;
         */
        function updateLink(elem, scope){
            jq(scope+' a img').css({opacity: "0.6"});
            return jq('img', elem).css({
                opacity: "1",
                border: "solid 2px #fff"
            }); 
        };
        /**
         * update 'Current selection' text;
         * @param   selection{String}       colour of selected option;
         * @param   scope{String}           ref face or strap;
         * @return  jQuery object;
         */
        function updateText(selection, scope){
            //console.log(string+', '+scope);
            jq(scope+' .current').text(selection);
            return fade(scope+' .current');
        };
        
       /**
         * @param   elem{String}    jquery selector;
         * @return  jQuery object;
         */
        function fade(elem){
            // currently a problem with the background animations in safari;
            if (jQuery.browser.safari) return false;
            var duration = 1000;
            return jq(elem).animate({backgroundColor: 'rgb(116, 116, 116)'}, duration/4, function(){
                var self = this;
                setTimeout(function(){
                    jq(self).animate({backgroundColor: 'rgb(0 ,0 ,0)'}, duration);
                }, duration/2);
            });
        }
        
        /**
         * update current price (only if different from current price);
         * @param   model{Array}    model specific properties;
         * @return  jQuery object;
         */
        function updatePrice(model){
            var old = parseInt(jq('.buy .current').text().split('£')[1]);
            if( parseInt(model[1]) === old ) return false;
            jq('.buy .current').text('£'+model[1]);
            return fade('.buy .current');
        };
        /**
         * set model code based on page title;
         * @return  String;
         */
        function getModelCode(){
            // document title for IE !?!;
            var s = (jq('title').text() || document.title ).split(':: ')[1];
            if(s.toLowerCase() == 'geosport'){
                return 'ab';
            }else if(s.toLowerCase() == 'chronograph'){
                return 'aa';
            }else if(s.toLowerCase() == 'geoform'){
                return 'ba';
            }else{
                return 'ca';
            };
        };
        /**
         * swap out banner image;
         * @param   model{Array}    model specific properties;
         * @return  jQuery object;
         */
        function updateImage(){
            var src = "Images/Products/"+getModel()+"-"+options.view+".jpg";
        	jq('.banner img').hide().attr('src', src);
        	return jq('.banner img').fadeIn(1000);
        };    
        init();
    }); 
})(jQuery)