window.scwDataClassesPlugin = window.scwDataClassesPlugin || {};

window.SEMICOLON_dataClassesInit = function( $dataClassesEl ){

	if( $dataClassesEl.length < 1 ){
		return true;
	}

	let $dataClassXs 	= $('[data-class-xs]'),
		$dataClassSm 	= $('[data-class-sm]'),
		$dataClassMd 	= $('[data-class-md]'),
		$dataClassLg 	= $('[data-class-lg]'),
		$dataClassXl 	= $('[data-class-xl]'),
		$body			= $('body');

	if( $dataClassXs.length > 0 ) {
		$dataClassXs.each( function(){
			let element = $(this),
				elementClass = element.attr('data-class-xs'),
				elementClassDelete = element.attr('data-class-sm') + ' ' + element.attr('data-class-md') + ' ' + element.attr('data-class-lg') + ' ' + element.attr('data-class-xl');

			if( $body.hasClass('device-xs') ) {
				element.removeClass( elementClassDelete );
				element.addClass( elementClass );
			}
		});
	}

	if( $dataClassSm.length > 0 ) {
		$dataClassSm.each( function(){
			let element = $(this),
				elementClass = element.attr('data-class-sm'),
				elementClassDelete = element.attr('data-class-xs') + ' ' + element.attr('data-class-md') + ' ' + element.attr('data-class-lg') + ' ' + element.attr('data-class-xl');

			if( $body.hasClass('device-sm') ) {
				element.removeClass( elementClassDelete );
				element.addClass( elementClass );
			}
		});
	}

	if( $dataClassMd.length > 0 ) {
		$dataClassMd.each( function(){
			let element = $(this),
				elementClass = element.attr('data-class-md'),
				elementClassDelete = element.attr('data-class-xs') + ' ' + element.attr('data-class-sm') + ' ' + element.attr('data-class-lg') + ' ' + element.attr('data-class-xl');

			if( $body.hasClass('device-md') ) {
				element.removeClass( elementClassDelete );
				element.addClass( elementClass );
			}
		});
	}

	if( $dataClassLg.length > 0 ) {
		$dataClassLg.each( function(){
			let element = $(this),
				elementClass = element.attr('data-class-lg'),
				elementClassDelete = element.attr('data-class-xs') + ' ' + element.attr('data-class-sm') + ' ' + element.attr('data-class-md') + ' ' + element.attr('data-class-xl');

			if( $body.hasClass('device-lg') ) {
				element.removeClass( elementClassDelete );
				element.addClass( elementClass );
			}
		});
	}

	if( $dataClassXl.length > 0 ) {
		$dataClassXl.each( function(){
			let element = $(this),
				elementClass = element.attr('data-class-xl'),
				elementClassDelete = element.attr('data-class-xs') + ' ' + element.attr('data-class-sm') + ' ' + element.attr('data-class-md') + ' ' + element.attr('data-class-lg');

			if( $body.hasClass('device-xl') ) {
				element.removeClass( elementClassDelete );
				element.addClass( elementClass );
			}
		});
	}

};